57,000,000 Americans have a disability.
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).
How Accessibility Impacts Business
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.
Top companies such as Target, JetBlue, and Scribd have been fined/sued over inaccessibility.
“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)
The NFL Color Rush
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.
What We Can Do About It
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.
Use those tools!
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
10 General Design & Development Considerations
- 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.
Top comments (10)
As someone with dyslexia, I appreciate the reminder to UX designers to account for diabilities! Making a website dyslexic friendly is not hard.
Don't EVER do black-on-white or white-on-black! Those are hardest for us to read. Black on off-white, or white on a dark non-black background are better.
Don't use icon fonts.. We have SVG for a reason.
Make your website behave well with Stylish, which some dyslexic users use to override colors and fonts to make the site more readable.
Sans serif FTW, but please choose fonts without that annoying l-I-1 collision.
Curious, I find sharp contrasting text the easier to read and have difficulties reading sites that use off-colors.
Doesn't context usually resolve I-l-1 collisions?
Context isn't much of a factor in dyslexia, because the condition moves letters/words around for us (in different ways depending on the type of dyslexia). If we know what the letter IS, we can usually "untangle" what we're reading, but the l-I-1 collision makes it harder, because we don't know what it was.
I think it's important for mass market services to cater to people with disabilities. However, there's a real problem here: there is no standard I know of to detect user's disabilities. The best a site can do is offer a second version, which is basically a text only linear version and hope for the best.
Also, if a company is doing a lot of A/B testing, and UX testing, they will arrive at a site that caters mainly to people without disabilities. Some of your points can be implemented always (like alt-tags), but things like changing fonts or colors modify the intended design.
How are this divergent requirements to be met? Without a way to detect the user's requirements, sites will not be willing to compromise their design for all users.
Important side note: A lot of the web today just doesn't work for anybody. Sites are being rushed out without adequate testing. Even without disabilities there are sites that require a specific browser, or OS, screen resolution, etc. Some sites fail behind proxy servers, in VPNs, or with ad blocking. Or they're loaded with bad JS, and foreign JS that breaks them. Most web developers don't do enough testing.
Hey Angela,
I think there is a typo 3rd last point of your considerations. Testing pages without a keyboard and a mouse is quite hard, but would probably work with a wii-mote or something similar :)
I really recommend the aXe plugin for browsers: chrome.google.com/webstore/detail/...
Wow, aXe looks better than the Google a11y developer tools extension I usually use: chrome.google.com/webstore/detail/...
Well written article about an underrated subject, thank you.
It is also important to think about people who have less performant machines or slow internet connections.
Thanks for posting. I'm pushing more and more for this. There's some very satisfying about ensuring your website is accessible to all.
I think there's a typo here ("without" should be "with") :-)