Accessibility (often abbreviated to A11y) involves an attempt to make your website or web app usable to as many people as possible. A11y is often linked with people that have various disabilities, but designing and developing accessibly actually benefits other groups as well, such as someone with poor internet connection or using mobile devices, to name a few.
The more you practice web accessibility the better you’ll become.
Like any significant undertaking, learning accessibility might feel overwhelming at first. However, Pablo Papasidero at Design Much offers three recommendations for learning accessibility that also apply to most other large projects in life:
- Gain empathy. Try using the assistive technology already included in your devices. How is it helpful and where are there frustrations? In another post, Accessibility Starts with Design, I discuss different types of user impairments and how impairments can impact usability.
- Start small. Learn about one thing first (Papasidero references this article about accessible buttons as an example). Dig into the technical guides and seek out secondary and tertiary resources from experts (e.g., joining accessibility newsletters, following accessibility experts on social media). Once you have an understanding of a single topic, move up to the next.
- Practice it. Designing for accessibility is a skill that you need to practice to become incrementally better. Start with low-hanging fruit, such as color contrast on text, and use accessible frameworks with pretested components. Some examples of accessible frameworks include Clarity (VMWare), Lightning (Salesforce), Carbon (IBM), and Spectrum (Adobe).
As you learn more and begin designing with accessibility in mind, part of your work will expand to educating clients about the principles of A11y, as well. While it is up to the client to decide whether to invest in accessibility, showcasing the importance, benefits, and impact it has on their users helps clients make an informed decision.
Accessibility Requirements
Learning about accessibility by reviewing and understanding accessibility requirements can help you be more mindful of your design choices and their impact on disabled users (e.g., parallax and animations, video auto-play and image sliders, long-scrolling pages, and transparency). There are several accessibility requirements sources, each with a slightly different focus, but the most common accessibility needs that come up in design are:
- Color contrast and usage
- Content, copy, and readability
- Headings and page titles
- Link purpose
- Hover and focus states
- Forms (errors, labels, etc.)
- Layout (consistency, responsiveness)
- Media (captions, alt text, etc.)
- Tab order and bypass blocks
- Timing
- Typograph
Accessibility requirements can instruct and help guide you on the right design for these elements and beyond.
[image source: Sheri Byrne-Haber]
Sources for accessibility requirements
WCAG (Web Content Accessibility Guidelines)
WCAG covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities.
Key principles of WCAG include:
- Perceivable information and user interface
- Operable user interface and navigation
- Understandable information and user interface
- Robust content and reliable interpretation
WCAG uses an A, AA, and AAA ratings scale to indicate compliance, with A being the minimum and AAA the maximum level.
[image source: Open Classrooms]
(User Agent Accessibility Guidelines)
UAAG guides developers in designing user agents that make the web more accessible to people with disabilities. User agents include browsers, browser extensions, media players, readers, and other applications that render web content.
ATAG (Authoring Tool Accessibility Guidelines)
The Authoring Tool Accessibility Guidelines (ATAG) provide guidelines for designing web content authoring tools that are both more accessible to authors with disabilities (Part A) and designed to enable, support, and promote the production of more accessible web content by all authors (Part B).
Design choices impact users in different ways
As Stevie Wonder said, "We need to make every single thing accessible to every single person with a disability.”
Although learning accessibility might feel daunting at first glance, it is a reachable goal if you make it a priority and use the excellent resources available. Investing in knowledge helps your design practice. Even in projects where you are not specifically designing for accessibility, that knowledge can influence your design to ensure better icons, legible typography, and optimal color usage that make a web application more usable not only for people with impairments, but for everyone.
Ro Dixon
