How to Design for Web Accessibility
How Do I Design for Web Accessibility?
Designing for website accessibility is not an option any more. The American Disabilities Act, backed by Dept of Justice and courts have made it clear that websites must be accessible to all to be ADA compliant. Accessibiity is a civil right, and website designers must adapt. Quickly.
This is a requirement that has come on very suddenly for many web designers. Especially for those not 100% dedicated to the craft of desiging websites.
If you describe yourself as a "graphic designer", its time for you to leave the room.
This is no longer a game for "graphic designers".
First, designing for people with disabilities requires a foundational understanding of the principles of Universal Design/Inclusive Design. There is tons already published on Google on this topic, so I won’t repeat these all here. The basic idea is to expand your target personas to include people with various disabilities, and create design and interactive elements that work for people with low or no vision, color blindness, deafness, physical restrictions, or mental/cognitive disabilities who use a wide assortment of "assistive technologies". ATs include screen readers, screen magnifiers, speech input and alternate input devices. In practice, focus first on screen readers.
Web Accesibility Tips for Web Designers
- Make sure you have strong contrast throughout product
- Avoid small typefaces
- Avoid typefaces that are difficult to read
- Ensure that you do not rely on color or image alone to convey information or importance
- Provide [skip to content] option triggered by first AT input (tab key for keyboard-only)
- Provide focus states that indicate where the cursor is on the page and ensure that contrast achieves necessary contrast.
- Make user inputs understandable - ensure form field labels and instructions are not embedded in the field and remain visible while the user is using the form
- Provide clear and consistent navigation options
- Add user controls for content that starts automatically (ex. hero slider)
- For each construct, make sure to work out how the keyboard-only user would complete the task.
Creating Personas of People with Disabilities
Low Vision
- Importance of larger typefaces and strong contrast. Use of browser tools to control font size, or separate screen magnifiers.
- Color contrast is key for this user group.
- Consider for the color blind group here as well.
Blind
- Use of screen readers
- Highly dependent on keyboard accessibility and ensuring that each element on the page properly describes its name, role and state.
Deaf
- Video content captions
- Ensure no auditory cues for advancing through flows or denoting information
Cognitive
- Simple layouts with clear structure
- Avoid repetitive flashing
- Appropriate language levels
- Limit dynamically changing content (sliders that auto slide, tickers, etc.)
Physical - fine motor skills
- Keyboard-only nav
- Pointers, etc.
- Audio input
Accessible Web Design Tools
For designers, the primary toolset focuses on color contrast to ensure designs work for people with low vision and color blindness.
- NoCoffee Chome Extension : Simulates how pages appear to people with various vision issues.
- Colour Contrast Analyser : By The Paciallo Group : Software for Mac or Windows that tests for color contrast
- WebAIM Contrast Checker : Web-based contrast tester
- Color Oracle : Software for Mac, Windows, Unix that simulates color blindness
Accessible Web Design References for Designers
- W3C’s WCAG : How to Meet WCAG v2.1 Quick Reference
- W3C’s WCAG : Tips for Getting Started Designing for Web Accessibility
- Interaction Design Foundation: Learn to Create Accessible Websites with the Principles of Universal Design