According to a 2012 Census report, 56.7 million Americans have some form of disability. As developers and designers, it is our responsibility to create websites and applications that cater to everyone. It is also our social responsibility to make the web accessible to more than just 80% of the population and to educate the public (especially other engineers and designers) about these issues.
Consider impairments that impact accessibility of online websites, applications, and documents. This survey estimates the number of people with specific impairments as follows:
19.9 million (8.2%) have difficulty lifting or grasping. This could, for example impact their use of a mouse or keyboard.
5.2 million (6.3%) have a cognitive, mental, or emotional impairment.
8.1 million (3.3%) have a vision impairment. These people might rely on a screen magnifier or a screen reader, or might have a form of color blindness.
7.6 million (3.1%) have a hearing impairment. They might rely on transcripts and / or captions for audio and video media (source).
Ignoring accessibility can create a loss in potential profit each year. Imagine something as small as text color choice alienating half of your potential customers. Even age-related conditions such as presbyopia (loss of the eyes’ ability to focus) hinders the capability to read small text or see colors with low-contrast.
“The case, brought by the California Council of the Blind and three blind JetBlue customers, is about access barriers on JetBlue’s website and the inaccessibility of JetBlue’s airport check-in kiosks to people with visual impairments. JetBlue has designed its website in a way that prevents blind customers from independently and privately accessing information and using the site’s features. JetBlue’s airport kiosks cannot be used by blind customers because the machines do not have audio output or an accessible means to input information.” (source)
Another example of accessibility negligence is the 2015 NFL Color Rush campaign. To celebrate the league’s 50th anniversary of the first-ever TV game shown in color, the Bills were wearing all-red and the Jets were wearing all-green. Ironically, the NFL failed to account for the 8% of men who are red/green color-blind.
Afterward, the NFL released a statement claiming they “did test the jerseys this summer on field and on television. The standard television test did not account for color blindness for fans at home, that became apparent.”
Hopefully, this instance highlights the importance of color choice and awareness of inclusive design.
Use the Web Content Accessibility Guidelines Checklist (WCAG)
Use this for accessibility compliance — WCAG 2.0 is the current inclusive web standard. WCAG applies to all web content, including single page and dynamic web applications, multimedia, and mobile websites.
There are a variety of websites and browser plugins to help you check for accessibility.
My favorites are:
- Chrome Developer Accessibility Tools
- WAVE (Web Accessibility Evaluation Tool)
- ChromeVox Screen Reader
- SEE Chrome Plugin
- Use headings (h1, h2) properly
- Use ARIA landmarks (marking sections of a web page)
- Add labels to form fields
- Keep color contrast in mind
- Use live text, not pictures of text (this also helps with SEO!)
- Provide video descriptions and use closed captioning
- Choose dropdown menu that works for all users (someone may be unable to trigger or access a submenu)
- Test websites without a keyboard (many people don’t have a mouse)
- Test sites with assistive technologies on mobile and desktop
- Add proper alt-text to images (great article about alt-text)
Accessibility is the new standard of web development and we must not fall behind.