According to the WHO, 17% of the global population is visually impaired. Meaning nearly 2 out of every 10 people looking at your website may have trouble reading it without assistance. For most people with visual impairment, this simply means wiping their glasses clean or adjusting screen brightness. However, there are more than one million people in the US alone with moderate to severe vision impairment. These one million people may require other assistive technologies in order to navigate the internet. Screen readers such as JAWS help visually impaired persons access websites by transcribing textual and non-text elements. But websites must be coded with a specific language in order for screen readers to scan and make sense of web content. Have you taken a look (pun very much intended) at your website's accessibility lately?
What is web ADA Compliance?
ADA Compliance for web means your website complies to Web Content Accessibility Guidelines (WCAG) 2.0. In simple terms, it means that your website is readable by those with visual and hearing impairments, as well as those with learning disabilities and limited reading capabilities.
In the summer of 2017, the grocery chain, Winn-Dixie, lost an ADA compliance lawsuit. The judge ruled that their website must be accessible to blind users. The ruling threw website accessibility into the spotlight. Many of us knew web ADA compliance was to be mandatory for all federal institutions beginning in January of 2018, but the legal loss of privately-owned Winn-Dixie threw many for a loop.
Should your business be concerned about ADA Compliance on your website?
The Winn-Dixie lawsuit set precedent that many private companies will be required to integrate accessibility into their website design. However, accessibility for web remains an evolving and elusive mystery. The exact definition is still a bit muddy, and the verbiage remains unsolidified. The general consensus is if your website acts as a supplement in any way to your product or service, then your website must comply with WCAG 2.0.
Why? The ADA requires that products and services be equally accessible by everyone. Winn-Dixie sealed their fate by providing a cohesive shopping experience with their web app without considering its use by those with visual impairment. The plaintiff was unable to grocery shop online and access certain offers due to the site’s unnavigable design, which a judge ruled as a substandard shopping experience due to disability.
The good (maybe even great) news is that many businesses have built compliance into their sites, just by using SCHEMA.org and alt tags for non-text elements. The same coding language that bumps SEO could also improve legibility for screen readers and other assistive tools. This is because SCHEMA uses descriptive language to segment web pages – the same descriptive language screen readers use to understand page layout.
Keep an eye out for our second post of the ADA series in which I go into depth about how ADA compliance could boost SEO.
How do you design a website to be ADA compliant?
I’ve already mentioned WCAG 2.0, but the application of these guidelines requires a deeper examination. I’m going to go over three important elements of WCAG that I believe every website should implement, regardless of legal risk. Every website should be navigable by keyboard only and readable by screen readers, they must comply to WCAG text guidelines including contrast and scalability, and websites must format visual and non-text elements to be sensible for those with visual impairment.
Website Navigation
The biggest hold up with WCAG and site navigation is the ability to navigate a website using only a keyboard. By default, using the tab button skips to the next link or schema defined section (by use of tabindex ordering). Imagine trying to navigate a news article using only the tab button; it would be a nightmare. You’d have to scour through scores of navigation links and hyperlinked ads just to reach the main content. Well, screen readers have the same issue. Consider ordering the tab navigation on your site to jump to main content within a few clicks of a button.
Text Guidelines
Highly contrasted text is the most legible. We’ve all seen the terrible memes and/or PowerPoint slides with black text on a blue background. Even the best eyes strain to read in those conditions. Many people with visual impairment struggle with reading text that doesn’t meet WCAG standards. According to their guideline, text contrast from background color(s) must be 7:1.
Another factor the visually impaired struggle with is text size. It is a major trend in the last few years to have small, thin text on your site; it gives content a modern, streamlined look. Unfortunately, that forward-thinking design might make your content harder to read. WCAG suggests all text be scalable to, at minimum, 200% of its original size. If your website is particularly content heavy, you might want to consider a serif font (or a font with lil’ feet) as it is more easily readable in paragraph form.
Visual Elements
Any graphic or image must have descriptive alt text. Most people are comfortable by this point with naming images according to image content, as well as providing descriptions for them. However, other visual elements like graphs, charts, and infographics are forgotten. Any relevant visual elements on a page should be accompanied by a text description that lays out the same information. If design is hindered by the addition of text elements, hidden or alt text will do the trick.
Wrap it up, kid.
It is important to remember that there is not one shade of accessibility. Accessibility for your website might mean considering audience reading level or making sure every video on your YouTube channel is captioned and translatable (more on this in part 2). Many companies will have a knee jerk reaction to the Winn-Dixie case and try to force their sites into a definition of accessibility that doesn’t necessarily work for them, nor benefit their user experience. For example, an image heavy shopping site will not rely on the same text-central guidelines as a law firm, but they will have to make sure keyboard navigation is possible and that all images have descriptive alt-tags.
Make sure your approach to accessibility enhances users’ journey through your content. It is unlikely that ADA compliance for web will be mandated for all in the very near future, but the Winn-Dixie case is a strong hint to get started on your accessibility strategy. It is better to be ahead of the curve on this one. Tackling your site’s accessibility not only protects your company from potentially pricey litigation in the future, it benefits user experience with your site. And isn’t that what websites are all about anyway?
