Often, accessibility best practices are just best practices overall — simple interfaces, alternative user pathways to suit user preferences, etc.
Below, we’ve listed the best practices that specifically aid users and don’t spell out hours of extra work.
The following article is an excerpt from the new 109-page e-book The Essential Elements of Successful UX Design.
1. Execute the fundamentals flawlessly
A good start to accessibility is making sure the UI is rock-solid.
Clear and logical designs benefit everyone, as does consistent navigation. The big difference, though, is that inconveniences like cluttered screens or navigation inconsistency become even bigger obstacles for people who are visually impaired.
2. Enable keyboard navigation for web design
Power users in general prefer keyboard navigation, and the availability of hotkey shortcuts is always a welcome addition.
But for disabled users, these features are mandatory. This means going beyond “tabbing” or scrolling with the space bar. Check out Wikipedia’s complete table of keyboard shortcuts to see the recognized standards for keyboard control.
3. Prioritize Text Clarity
The biggest obstacle for visually impaired users is text clarity, so designers should take every measure to increase legibility (clarity of letters) and readability (clarity of text blocks) . Here are four easy-to-apply techniques that users who are visually impaired will surely appreciate.
Photo credit: “Two way this way.” With Associates. Creative Commons.
- The W3C cites the a minimum contrast ratio between text and background as 4.5:1 (for large or bold fonts, it’s acceptable to drop to 3:1).
- Body text should be a minimum of 16 pixels.
- Spacing between lines should be at least 25% of the font size. With the 16-pixel minimum size above, spacing should be 4 pixels or more.
- Allow font resizing in style sheets by using a measure other than pixels, such as em, pt, or relative sizes.
Like the principles of universal design, improved readability helps every user, though some more than others.
4. Don’t rely exclusively on color
As we said above, color-blindness affects close to 10% of the population.
While a color code can be a shortcut to faster and more efficient communication about functionality, don’t forget labels for explaining crucial functions.
For example, let’s say there’s an error with an input field. Outlining the box in red is a good way to communicate a problem, but also include an exclamation point icon for fuller accessibility.
If you’re ever in doubt about designing for the visually-impaired, look at your interface through a black-and-white filter.
5. Order content in HTML for screen readers
Ever since the separation of HTML and CSS, developers are able to alter what users see without changing the structure of the code. In addition to simplifying the design process, this also allows for better usability with screen readers.
While sighted users can simply scan the page and click on their preferred selection, users with screen readers must sit through the screen readers explaining every element on the page. Imagine the frustration with clicking a link to an article and having to sift through the entire navigation menu.
With the separation of HTML and CSS, though, you can reorganize the code to suit screen readers without changing the screen layout at all. The navigation menu can stay at the top, best for sighted users, while the code for it stays at the bottom, best for screen readers.
