For years, the 1990 Americans with Disabilities Act (ADA) was applied to physical spaces, such as requiring publicly available buildings to have wheelchair ramps and wheelchair accessible bathrooms.
Soon, advocates for the disabled began to sue businesses that failed to provide ADA accommodations for noncompliance.
Because Title lll of ADA requires effective communication pertaining to accessibly electronic information technology, that same litigious impulse has reached The Internet, and businesses with non-compliant websites are feeling the pinch.
Businesses Under Attack
In a May 14 webinar, called ADA Web Compliance, presented by Seyfarth Shaw LLP. and sponsored by WineAmerica, we learned how American business are being targeted in Title lll lawsuits.
They told us that in 2018, 1564 ADA on the Web-related lawsuits were brought in New York state alone, 576 in Florida.
California, which offers statuary damages to plaintiffs in addition to inductive relief, attorneys fees, and costs, had only 10 cases.
ADA Web Compliance is Good for Business
There’s a small but possible chance that having a non-ADA compliant website will expose your business to litigation.
But lawsuits aside, there is a larger case for making your website accessible to the 1 billion people on earth who have some kind of disability.
Sales!
When you make your website accessible, it gets more traffic and more potential customers, which translates into more sales. When you think about its benefits, you see that accessibility is just good business.
How to Make your Website Accessible and ADA compliant
Disabled people come in all forms. They might have reduced or no vision, hearing, or motor skills, or they have photosensitive seizures, and cognitive impairment.
For the most part, achieving ADA Web Compliance is the same as following the best practices for web design in general. If you have been using best practices, you have already done most of the work towards accessibility.
Much of the techniques have been available all this time but for one reason or another, web designers and users have been slow to take advantage.
That inertia must end. Start by using this tool to scan your site for accessibility issues.
Be Keyboard Friendly
For people with mobility issues, it can be hard to use the touchpad or a mouse to move through a site. And because assistive technologies such as browsers rely on keyboard-only navigation, using the keyboard is their lifeline.
This means all the elements on a web page should be accessible by pressing the tab button. For the Tab button to work this way your elements – links, buttons, and form controls – must have keyboard “focus.”
In WordPress you can use a plugin to help.
Make Content Easily Accessible
For the disabled, issues with content can arise if the content is dynamic. In other words, if it can change without the page reloading. Screen readers don’t always catch the changes.
The suggested way to work with dynamic content is to use ARIA landmarks. ARIA landmarks are attributes you can add to elements in your page to define areas like the main content or a navigation region. By tagging dynamic content as a ‘live region,’ screen readers will better understand the content as it changes.
- Write out all acronyms and put the abbreviation in brackets.
- Make your links contextual by using words that mean something (as opposed to “click here”) in your anchor text.
- In general, create content with the disabled in mind, even if it means ditching cleverness to be clear as sunshine.
Add Alt Text to All Images
If someone cannot see your pictures they might as well not exist. Help the screen reader announce your images by:
- Giving images keyword-rich titles
- Putting that same title – or a longer one – in the Alt-Text field
- Filling in the image’s Description field with even more information, like caption info, photo credit, site URL, etc.
Completely filling out the fields in Media Manager is advisable not just for accessibility, but it also helps search spiders learn about your content, which is good for your Search Engine Optimization (SEO).
Pick Colors Purposefully
Even sighted people have a hard time discerning colors. Can you image what it’s like for the vision impaired?
When you choose color combinations, opt for the strongest contrast possible.
- Light type on dark background, dark type on a light field
- Red and Green are the colors of protanopia blindness and should be avoided, especially as links.
- For graphs, add patterns as well as color.
To play with colors and receive a contrast ratio score, try this Color Contrast Checker from webaim.org
Use Headers to Structure Content Correctly
Nobody wants to read a long chunk of text. By breaking your content into pieces with contextual headers, your text can be more easily scanned and read by everyone.
Header tags work the same way as an outline
H1 – Title
—–H2 – Major Concept
———-H3 – Minor Concept
—————H4 – More Minor Concept
—–H2 – Major Concept
———-H3 – Minor Concept
Never use header tags to format your text! That’s what the Cascading Stylesheet (css.php) does.
Read More: 3 REASONS TO LOVE USING HEADER TAGS IN WORDPRESS
Design Website Accessible Forms
To make your forms accessible, be sure they are clearly labeled outside of each field. Placeholder text is not visible enough. Be sure to include clearly-written instructions and information around the form so there is no misinterpretation. Mark required field with asterisks, “Required,” or simply eliminate optional fields.
Use Tables only for Tabular Data
Tables may be handy for a lot of uses, but they should only be used for tabular data. Don’t use tables for lists just because they look pretty. That will just confuse a screen reader about the content.
Enable Resizable Text
Sometimes a visitor will enlarge a page to read it better. But if the designer has specified the text size in absolute units, such as pixels, it won’t work. Better to use relative sizes to scale the text. In pixels, body text should be equivalent to 16-18 px.
Avoid Automatic Media and Navigation
There was a time when auto-playing music, sliders and carousels were all the rage because they were easy to create. Now we know how difficult they can be in terms of accessibility. Best to keep images static.
Add Captions to Video
For the hearing challenged, your stunning videos are just moving pictures. By adding captions, the meaning of your videos will be understood by everyone.
Some Web Resources
To learn more about ADA Web Compliance, please visit these sites:
WordCamp Vancouver 2019
In related news, I will be speaking at the 2019 Vancouver WordCamp, September 28, on the topic of website accessibility!
In tandem with Kelli Wise, who will speak about “Keeping Your Content Accessible,” my seminar is called “Digital Wheelchair Ramps: Tools for Making your Website ADA Compliant,” and will be a demonstration of the many online tools and plugins one can use to give their sites an accessible edge.
If you’ve never been to a WordCamp, it’s the best deal in WordPress education money can buy.
Tickets are only $25 (CAD) and include coffee, lunch, a WordCamp Vancouver 2019 tote bag, an invitation to the after party, and a full day of networking and sessions on all things WordPress.
WordCamp Vancouver, September 28, will be held at UBC Robson Square, at 800 Robson Street, Vancouver, BC. Tickets are now on sale so get ’em while they’re hot!
See you at Vancouver WordCamp!