Designing for Accessibility: The Ultimate in UX
By Katy Hinz
Today marks the fifth annual Global Accessibility Awareness Day (GAAD). The focus of GAAD is to spark conversation and learning about designing websites, software, mobile apps, and more for users with different disabilities.
Designing for users with a broad range of abilities can bring challenges. But, before you start thinking “Great, more stuff to limit my rockstar designs” — recognize this: Smart designs aren’t created to impress your peers. Smart designs (and smart designers!) use design elements like color, placement, and interaction in very intentional ways to help site visitors accomplish their goals — while giving the user the most enjoyable experience possible.
So how do you create impressive, accessible designs? These 6 tips will help you create accessible designs that meet the minimum standards of Section 508 and Web Content Accessibility Guidelines 2.0.
1 . Start with Wireframes
Now you might be thinking “Duh! This is obvious.” But how often do you consider accessibility at this step? Designing for accessibility means considering all users from the start.
This includes people who are color blind, or have poor vision, those with hearing impairments, or cognitive limitations, older users, younger users, power users, and those who just want a great experience. (Even participants in your research should include those with disabilities.)
Consider the flow of your site and how different users will experience it. Will someone using only a keyboard be able to navigate your menus? Will your layout make sense to an older user with limited web experience? Wireframes provide a quick way to explore solutions before getting into the details of your design.
2. Take a New Look at Layout
Consider layout details in both the wireframing and design phases. Strong layouts keep attention on what’s important, and helps the user decide what to do next. If you’ve been designing for a while, this may be old hat, but take a look at layout from the perspective of accessibility.
Accessible layouts should:
- Avoid “staggered” layout of images and text. To create a clear, straightforward user experience keep the order of elements logical and understandable for all users. Design pages on an underlying grid, with elements aligned both horizontally and vertically.
- Display the most important information first. Information like frequently browsed topics, key features, and functions should all be displayed “above the fold.”
- Consider screen size. Many users still browse the web on smaller monitors (or may be on a mobile device). How does your site respond when it’s opened on a 13” monitor? Please, above all, avoid horizontal scrolling!
- Think about menus: Many sites use a large (wide) menu system, that quickly converts to a mobile “hamburger” style menu on smaller desktop screens. Will non-savvy users with older, smaller monitors know what to do when encountering a less-obvious menu structure?
3. Design for Keyboard Accessibility
Many users are physically unable to navigate a website in a traditional manner, and use only their keyboard, or voice recognition software to navigate a site.
Keyboard-only users, and assistive technologies work by recognizing “action items” that are visible on the screen. When designers use drop-downs, hover states or other hidden information, these users will be at a deficit.
This list will give non-traditional users an optimal site experience:
- Make sure all links and controls can be accessed using the Tab and Spacebar keys on the keyboard.
- Ensure the order of elements a user will tab through is logical. Avoid instances like tabbing from something on the top of the page, all the way to the bottom, and then back up. This is confusing.
- Add visual cues to reinforce navigation by highlighting element when they are selected.
- If using interactive features like dropdowns and carousels, make sure they comply with W3C’s WAI-ARIA 1.0 Authoring Practices
- Make sure your user isn’t “trapped.” Lightboxes, page overlays, pop-ups, plugins, and JavaScript widgets can all be dead-ends. Give your user a way to get both into and out of any interface element.
- If your site uses a video player, make sure it’s not set to auto-play, and that is operable by keyboard-only users. You should also make sure all videos are closed-captioned for hearing-impaired users.
- Avoid making text into a graphic. Using images as text prevent screen readers from properly communicating site content to the user.
- Always provide alt text for images. For sight-impaired users alt-text that is readable by their screen-reader improve their overall experience.
4. Test Your Colors & Fonts for Readability
As a designer, your color palette is key to your design. Unfortunately, many computer users are color blind, or have limited vision. To accommodate these users make sure you have the proper contrast ratio between your text, and the background.
WCAG standards say the contrast ratio should be a minimum of 4.5 for any fonts smaller than 24px. If your font is larger than 24px, (or 19px bold), you get a bit of a break — the contrast ratio drops to a minimum of 3.
Here’s an example:
In this first graphic, the Find Staff headline and body text are white and sit on a dark blue background. They pass with a stunning ratio of 13.2 — easy to read even for users who cannot see color.
In comparison, if the text is changed to a bright purple, the color ratio plummets to 3.5, and becomes very difficult for vision-sensitive users to read.
Logos and elements in a disabled state like inactive buttons or menu items are exempt from this standard. However, placeholder text, or light helper text for form fields still need to follow the rules.
Check out Juicey Studio’s Color Contrast Analyzer to see how your colors fare.
5. Forms & Helper Icons or Text
Form accessibility goes a bit beyond the general keyboard accessibility outlined earlier.
Follow these tips to create accessible forms:
Keep things logical. They of course should be logical in presentation and easy to tab through.
Label your form fields and controls. Here’s a great example of form labels. As a user (or screen reader) reads the page, information is presented in a logical order, with both form labels, and helper text to guide the user.
Make error states clear for all users.
Here’s an example of an inaccessible form on box.com. Look at the form in full color, you can see there are errors in the Full Name and Phone Number fields, as noted with the red outline.
But when you can’t rely on color to note errors the form errors aren’t visible. Take a look at the form in black and white. Suddenly we have no idea why our form didn’t work and we don’t know how to resolve the problem.
In contrast, Evernote does a nice job with their sign-in form. They’ve used color to note the error for those who can view in color. But there is also a block of text below the field with the error, telling me what happened. This solution will work for all users including those who can’t view color, and those using a screen reader.
6. Learn from others.
As designers, we’re always finding inspiration in the work of others. Let the accessibility — or lack thereof — on your favorite sites be a guide. See how major sites work for keyboard or assistive technology users.
Here are some examples:
CNN.com appears to be lacking in accessibility for keyboard users. After I type in the url and get to the site, and use Tab to navigate, the only thing I am able to do is get a quote from the stock market widget.
Conversely, Facebook is a gem for keyboard users. When I log into the site and hit the Tab button, my first option to interact with the site is the item at the top left of the site (Search Facebook). Logical and easy.
As I tab through the site, I can easily create a post, respond to posts, even add a sticker to a post. All of my options are clearly highlighted for focus.
To learn more, check out this comprehensive list of keyboard actions by WebAIM.
At first glance, it might seem that designing for accessibility limits your creativity, but remember design *is* creativity. Look at these guidelines as another design challenge and dig into your creative toolbox to solve them.
In the end, you’ll have a better overall user experience for everyone.
Katy Hinz is a Sr. Designer at Teal Media, a full-service creative agency with a conscience. We pour every ounce of our passion and skill toward your success, because we, too, want the world to be a better place. We believe purposeful design can transform organizations, inspire action, and enable progress.
Learn more at TealMedia.com and find us on Facebook and Twitter.
