User Experience at IU

In part one of this three-part series, we considered how you can increase accessibility with structure and labeling. In part two, we reviewed visual components like images and colors.

If you’ve read both parts, you should have a better understanding of how your design decisions can improve the accessibility of your digital products. You may also have realized there is overlap between accessibility and many design best practices. Considering accessibility should make your websites and applications more usable for everyone.

In this final installment, we’ll cover patterns, or more complex components like tables and widgets.

Tables

When tables are clearly labeled and simplified, they’re easier to understand. They’re also easier to navigate and grasp when using assistive technologies.

Names

Have you provided a name for any data tables? Data table names are conveyed by screen readers and other assistive technologies, which help people understand the purpose of the table. This is especially important if you have more than one table on a page.

• Do provide a name for any data tables.
• Do make the name visible, if possible.

Headers

Have you included headers for any data tables in your design? Your table might have column headers, row headers, or both column and row headers. Screen readers announce the column and row headers for each data cell, which helps with orientation and understanding.

• Do mark header rows and columns.

Structure

If a table has more than one row and one column of table headers, is there a way to simplify or restructure the table? Complex tables are difficult to understand. They also make it more difficult to correctly attach headers to the data cells.

• Do simplify complex tables whenever you can.

Widgets

Simplifying an interaction or process reduces cognitive load. Simplification may mean more interactions. For example, a wizard helps walk someone through a complicated process, like a form that takes many steps. It may take longer for the user to complete, but breaking something into multiple steps should increase usability—and user confidence. Simpler interactions are also usually easier to make accessible.

Predictability

Does the user interface (UI) behave in a predictable way? People with cognitive impairments are better able to complete their tasks when the UI follows design conventions and behaves the way they expect it to. This also helps people with limited vision who may only see a small portion of the interface at any time. Simplifying an interaction is often about meeting (or aligning) expectations.

• Do follow conventions so people know what to expect.
• Don’t prioritize efficiency over expectations.

Familiarity

Is there a simpler or more conventional interaction that would do the same thing? Simpler and conventional interactions tend to be familiar, which means that people don’t have to learn what actions they can take and how to take them. Complex widgets can also be difficult to use with a keyboard or a screen reader. Simpler widgets often have less chance of breaking.

• Do choose the simplest widget for the job.
• Do consider how a widget would work with a mouse, keyboard, and touchscreen.

Clarity

Are all instructions clear? Clear instructions help everyone complete their tasks. For example, forms that indicate specific required fields or formatting save the user time, since they don’t have to guess what’s required.

Clear instructions can also help people understand what’s happening “behind the scenes.” For example, feedback like a success message can let the user know if their action was successful.

• Do mark required fields on forms and indicate any special formatting.
• Do provide feedback.
• Do provide instructions for using complex widgets.

Recovery

How easy is it for the system or the person using it to recover when something goes wrong? What sort of errors might occur? Can actions be reversed? Have you written clear error messages that will help someone correct the errors? Where will error messages appear? Does the UI help prevent errors before they happen, especially if the error would be destructive or have financial or legal consequences?

• Do write clear error messages.
• Do help prevent errors, especially if the error would be destructive or have financial or legal consequences.

Conclusion

We’ve only covered a few accessibility-related decisions in this series, but hopefully these will help you create a more inclusive digital environment. When you design with accessibility in mind, you’re creating a more usable product for everyone—not just those with impairments.

To learn more about designing for accessibility (and usability), check out WCAG criteria written in plain language.