We collaborated with experienced designers to come up with these top five User Interface (UI) digital accessibility issues and solutions. There are many more of course, which you can check out on W3C-Web Accessibility Initiative’s (WAI) Designing for Accessibility.
1. Design focus states with visual indicators
Your website should be designed so that whenever an interactive element, for example a link or a form field, receives focus, a visual indicator shows. If a user lands on a link, for example, there should be a clear change in state. The change in the focus state lets a sighted keyboard user know where they are as they tab through a web page. This is especially helpful for people with Attention Deficit Disorder or short-term memory issues.
Well-designed focus indicators should be high in contrast, the same throughout an interface, and consistent, regardless of the browser. Focus is obvious to a user when a colored outline is visible, or when highlighted fields appear as a user fills out an online form or tabs through menu options.
A few helpful tips:
- As with most other digital accessibility features, it’s easier and more efficient to design focus indicator styles for elements early in the process, preferably at the same time as other states (like hover and active).
- Make focus very clear and conspicuous by providing a strong, contrasting color for a box border or potentially highlighting an input field such as a search box.
- A focus indicator is often a rectangular box around a link or a vertical bar displayed in a text field.
(Reference: WCAG success criterion 2.4.7 Visible Focus)
2. Avoid low contrast text
The closer text color is to the background color, the harder it is to read. This is also true for tiny error messages on forms that don’t have enough contrast. This makes it difficult or impossible for users with low vision to accurately and quickly complete online forms.
Insufficient contrast is one of the most common accessibility issues in digital product design, and also one of the easiest to avoid or to fix. To figure out what colors your website is using, use a color selector tool to grab a color off your website. Color numbers are specified using hexadecimal values. You’ll be able to get its hexadecimal code (for example, #efefef) using a color selector tool. You can then enter this into a color contrast checker and immediately know what your color contrast ratio is.
A few helpful tips:
- If text has a light color, a dark opacity layer should be used over an image. Adding an additional opacity layer between the image and the text is one option. Alternatively, if the text has a dark color, you should use a light opacity layer.
- Meet a 4.5:1 color contrast ratio for typical body copy text and 3:1 for large scale text.
- If you reverse the text and background colors, the contrast ratio stays the same.
(Reference: WCAG success criteria 1.4.3 Color Contrast (Minimum)
3. Ensure sufficient contrast for graphical objects and user interface components
It should go without saying, but every element a user interacts with must be perceivable. For example, when completing forms, using light gray text for placeholder text may not meet contrast requirements, making the UI more difficult (or impossible) to use. The same goes for carousels such as news scrolls or slideshows and checkboxes on forms. These and many other interface components must have, for example, pause and stop buttons that have sufficient contrast so they can be perceived.
It’s imperative to address low contrast issues early in the design process. This will help resolve any low contrast-related readability barriers that often come up. Given that vision disabilities, including low vision, are among the top ten disabilities among adults, the failure to address these design issues can have a significant UI impact.
A few helpful tips:
- As with large text, for graphical objects such as charts and graphs a contrast ratio of 3:1 should be sufficient.
- Pie charts are good examples of when sufficient contrast around and between the slices is critical to understanding the chart’s meaning.
- Be aware that insufficient contrast often negatively impacts UI on mobile devices being used in a bright environment.
(Reference: WCAG success criterion 1.4.11 Non-text Contrast)
4. Use spacing of elements that ensures accessibility
How effectively you use spacing affects both the readability of your website and how well its content is organized. For example, content items that are related may be grouped together, while content not related to a particular topic may be spatially separated. Spacing is also critical to accessibility when zooming in on a page. Your page content needs to reflow to fit the resized area so none of it disappears. In addition, a user shouldn’t have to scroll up and down or left-to-right to be able to read everything that’s on a page.
A few helpful tips:
- Don’t restrict content to view on a single display orientation (portrait or landscape) unless necessary.
- You should be able to increase text size on your page by up to 200% without the page display messing up or having text overlap other text or elements.
- Ensure that text and line spacing can be adjusted without causing a negative user experience.
(References: WCAG success criteria 1.3.4 Orientation, 1.4.4 Resize Text, 1.4.10 Reflow, and 1.4.12 Text Spacing)
5. Avoid using color alone to indicate meaning
Color is a common vehicle for enhancing the visual appeal of a website, but there are a lot of users who can’t tell the difference between one color and another. Using color alone to convey information will make your website content inaccessible to many people. If your website has, for example, a green button whose purpose is to finalize a purchase, your label should clearly indicate “place your order” or some other unambiguous language. This impacts not only people who are colorblind who may not be able to differentiate between red and green, blue and green, or blue and yellow. It also makes your website inaccessible to many older users who may not be able to perceive certain colors or the differences between them.
A few helpful tips:
- Don’t identify links just by color. Underlining links makes them accessible to people who can’t see the color of the link.
- If your website has a button that is used to cancel an order, your labeled instructions must clearly state the purpose of the button, for example, “Click this button to cancel your order.”
- Form fields that have been incorrectly filled out need to be identified by more than just a red border, for example. You also need to have text that explicitly indicates that an error was made and how to fix it.
(Reference: WCAG success criterion 1.4.1 Use of Color)
