Web accessibility, simply put, is making the web work for all people – including those with a diverse range of hearing, movement, sight, and cognitive abilities. And designing for it can easily fly under the radar because it's hard to understand what to do, how to design for expectations, and how to confirm you’ve done it well. Let’s fix that.
In this article, we’ll discuss why accessibility is critical for design, several steps you can take to check that you’re designing accessibly, and how to validate that your design meets accessibility standards.
Why accessibility matters
It’s important to remember that disabilities aren’t always permanent. Disabilities may also be temporary (e.g., a broken arm), situational (e.g., a light that is too bright to see your screen), and those that advance over time due to age (e.g., font size that's too small to be read). Everyone benefits from accessible design.
A document called WCAG 2.1 (Web Content Accessibility Guidelines) currently represents the legal standard for accessible web applications in almost every country, from the US to China. WCAG has 3 levels of compliance, but most countries use A (the bare minimum) & AA (acceptable conformance) exclusively. AAA is reserved for uncommon needs, such as live transcription of video.
Design that ignores accessibility can lead to lawsuits and expensive fixes. It may tarnish a company’s image and prevent sales. It can also block you and others from getting things done.
How to design
There are several simple steps you can take as you plan for your next design project, reminding you to consider your users at every milestone.
- Involve people with disabilities. WCAG is not an exhaustive supply of accessibility guidance, and every user’s needs are different. Regular discovery, review, and testing with users should help you discover what will work best, in addition to the standards set by WCAG.
- Use a quality design system. A well-executed design system, such as Pega Cosmos, will have already done a lot of work for designers. Design system components, colors, and patterns will take accessibility into account.
- Label everything, especially if the design doesn’t show a label in the mockup. Every icon button, every error message, every menu of options, descriptions of images, page titles, tab title structure must be labeled. Accessible applications can and should use invisible labels to supply context. This helps developers and assistive technologies (AT) supply a description of the page to users.
- Instruct users well. When explaining errors or help text, don’t rely just on shape, color, size, visual location, etc. For example, use “Select the Submit button” instead of “Select the large blue check icon to the right.” When supplying the option to review more content, include text that contextualizes where a “Read more” link will take the user. Finally, don’t rely on error message defaults; errors must clearly tell users what’s wrong and how to fix it. For example, use “Must contain 8 characters” instead of “This entry is invalid”.
- Think responsively. Accessible design allows users to scale text up to 200% of its size, as well as view designs in both landscape & portrait mode on multiple devices. The old desktop-only design or portrait-mode app isn’t going to cut it anymore. Plan for designs that have little horizontal or vertical space available.
- See the difference. Clarity in color is critical for accessibility. All text besides logos and disabled options must have at least a 4.5:1 contrast ratio to the background. All form input borders and iconography with critical meaning must have a 3:1 contrast ratio to their backgrounds. And don’t rely exclusively on color to show meaning. For example, don’t change an icon from green to red to show it’s in danger. There are many free tools available online to check the contrast in your work.
- Interact wisely. Mice, touch, motion, voice controls, and keyboards all work differently, so don't rely only on interaction-specific methods to get things done. Avoid timed events too: people using assistive technology typically need a longer time to act. Consider adding alternatives for interactions like swipes, key commands, shakes to undo, double-clicks, messages that can disappear, and so on.
- Read the spec. The guidelines we've mentioned are general. Use the WCAG 2.1 AA spec itself for exact requirements to help guide your designs further and expand your options.
Validate your design
Now that you’re confident you have a quality design, pair with your dev teams and audience to review.
Together, run your developed design through an automated accessibility checker. Test with users that have various abilities, levels of tech-savviness, and skills with assistive technologies. Use a free screen-reader, such as VoiceOver in Mac or NVDA on Windows, and try to navigate your application without a mouse. Or reach out to a third-party to help you verify that your application has been designed well.
Now that you know the steps towards making your application more accessible, you’re on your way to making the way work for everyone—and to become an advocate for accessible design. So, try it in your next project – and start designing accessibly today!
Related Links
Don't Forget
- JOIN THE CONVERSATION on Collaboration Center
- FOLLOW @PegaDeveloper on Twitter
- SUBSCRIBE to the Pega Developer Podcast on Spotify or via RSS
