Post Image

8 Website Accessibility Best Practices to Improve UX

by
Jerry Cao
Jerry Cao

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.

image03

Photo credit: “Two way this way.” With Associates. Creative Commons.

  1. 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).
  1. Body text should be a minimum of 16 pixels.
  1. 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.
  1. 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.

6. Explanatory link text

Some screen readers have the option to list out every link on the page, but this feature is meaningless if the link text is merely “click here” — taken out of context like this, it’s impossible to tell where it leads.

image01

Photo credit: BBC

Include link descriptions that can be understood independently, out of context. Don’t go overboard, though. Text is a design element, so never include more than necessary.

7. Use a 40×40 pt. clickable area for touch controls

Accessibility means designing for everyone, whether technically disabled or not.

For touch controls, any area less than 40×40 pts. will cause trouble for some users. This is the preferred norm for accepting all finger sizes, as well as any assistance tools.

8. Follow the accessibility checklist

How accessible is your web app or website?

Nomensa, in conjunction with Sky, released this handy accessibility checklist.

You’ll notice that most of the items on the list are more than just accessibility guidelines, but tips for a better UX overall. It’s a great way to keep on track throughout the process, so check it out.

Quick Case Study: Apple.com

If you ever need any guidance or want to see accessibility at work, check out Apple.com.

image02

Photo credit: Apple.com

  • Apple’s minimalist style makes everything organized and easy to understand, and reflect this structure in their layout. This helps both the visually and mentally impaired.
  • The colors and contrast are suitable for visibility and legibility, but with enough diversity to stay visually interesting.
  • The site uses keyboard controls and avoids pulldown menus altogether.
  • Most text content is in short snippets, perfect for screen readers or those with trouble reading.

Conclusion

Accessibility is just good UX design.

Accessibility guidelines are not something    optional— they are synonymous with good design period, and should be implemented regardless of who your users are.

For more practical design advice, check out the free 109-page guide The Essential Elements of Successful UX Design. Best practices are explained based on analyzing 24 examples from companies like Slack, Apple, and others.

87042076806348.waLDIkkTHQ2gbuX1fRvQ_height640

Feature photo credit: Web Designer Depot

Jerry Cao

by Jerry Cao

Jerry Cao is a content strategist at UXPin where he gets to put his overly active imagination to paper every day. In a past life, he developed content strategies for clients at Brafton and worked in traditional advertising at DDB San Francisco. In his spare time he enjoys playing electric guitar, watching foreign horror films, and expanding his knowledge of random facts. Follow him on Twitter.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you