We are living in a world where things are constantly changing, new technologies give us great power to access more online, communicate better and in most cases improve our life styles.
And just like Uncle Ben told young Peter Parker, with great power comes great responsibility. When creating a website or an app a big responsibility should be making your solution accessible to the disabled.
Why do I have to make my website accessible?
Besides the obvious of being a good person. It is said that Google favors sites that meet the Web Content Accessibility Guidelines 2.0 (WCAG). These guidelines have been around for some time, it is only over the last few years it has become an ISO standard.
Also you may want to lean on the side of caution, in 2017 Winn-Dixie lost an ADA (American with Disabilities Act) compliance lawsuit. The general consensus and preventive lesson here is that if you have a website that serves the general public, you may want to follow the guidelines.
What is ADA Compliance?
The Americans with Disabilities Act became law in 1990, in a nutshell it prohibits discrimination against people with disabilities in all areas of public life. Although in the past it only focused on private sectors with 15 or more employees. Early this year new federal regulations will take effect stating that all federal institutions websites must meet AA compliance set out in WCAG 2.0.
How do I make my website ADA Compliant?
Although the long list of guidelines set out in WCAG 2.0 can seem quite daunting, it isn’t as difficult as it seems. If you have a good web developer, you can check off the requirements fairly seamlessly.
It is important to note it is easier to work accessibility features into your website through out the design and development cycle. Putting off the accessibility checklist to the end will take longer and may interfere with your initial design.
Ok great, so you now you have a long list of items to work through to make your website compliant. But how do you know if it is compliant, how is it measured? Luckily, there are a few good online tools out there to get you started and help you along the way. We have picked our favorite three.
1. Google Lighthouse
Lighthouse is a free to use, automated tool you can use to improve the quality of your web pages. It is a tool that audits and measures performance, accessibility and progressive web.
Lighthouse checks things like:
- Color contrast ratios, a test to see if your background and foreground colors have enough contrast to be visible to people with impaired vision.
- Elements like buttons and links have discernible names
- Elements describe content well. Things like correct uses of title and alt attributes
When you run your report you will notice a list of recommended manual checks:
- The page has a logical tab order
- Interactive controls are keyboard focusable
- Interactive elements indicate their purpose and state
- The user’s focus is directed to new content added to the page
- User focus is not accidentally trapped in a region
- Custom controls have associated labels
- Custom controls have ARIA roles
- Visual order on the page follows DOM order
- Off screen content is hidden from assistive technology
- Headings do not skip levels
- HTML5 landmark elements are used to improve navigation
2. WAVE– Web Accessibility Evaluation Tool
Another handy tool that can help you work through your accessibility check list, is WAVE. WAVE, like Lighthouse will audit your website and provide you feedback and suggestions on how to adjust your site.
It’s powerful interactive checklist will highlight and warn you of issues that should be addressed. Because it is interactive, you will be able to click on the checklist result and it will take you to the problem area, ironically a great visual and intuitive aid for us.
3. Contrast Ratio Tool
Thirdly, a nifty website tool that allows you to measure color contrast ratio. By supplying the background color you and text color you want to test. You will be given a score, ideally you want to be over 4.
Phew.... last words
By using all three tools and some manual testing with your trusted web developer your website should be more inline with ADA and WCAG 2.0. At Zulu Shack Creative we can help you gear towards ADA compliance, that being said we are not lawyers, so what is perceived as compliant can at times be a grey area.
Nevertheless, it is nothing you should feel disheartened by, remember creating compliant websites is for the greater good. Ultimately you want your message or products reaching as many people as you can.