New Standards for Web Accessibility
The Americans with Disabilities Act (ADA) is finally drawing attention on the web. Signed in 1990, the act was designed to ensure equal opportunity to the estimated 50 million Americans who live with disability. The ADA’s effects are present in everyday life, from the elevators and ramps lining office buildings to the handicapped parking spaces outside the grocery store. While real life public spaces have long been accessible to all, the same cannot be said on the web.
While the Department of Justice has consistently stated that the ADA applies on the Internet, its policies have not been concrete enough to be enforced. This year, new Public Accommodation Website Regulations expected in the spring or summer will reveal new standards for web accessibility moving forward. And seeing as those standards can only grow more stringent, having an accessible, ADA compliant website has become a hot topic.
The good news is that having an accessible website doesn’t just protect you from the law. It’s ethical, promotes good design practices, and enhances traffic and viewership.
At PaperStreet, we are glad to help make your website ADA compliant. But if you are interested in learning how you can make your website more compliant, join me as we explore how to identify and fix common accessibility problems.
Part 1: Finding Problems Using WAVE
The first step to ADA compliance is sniffing out the accessibility issues your website might have. Our problem-finder will be WAVE, the Web Accessibility Evaluation Tool, an immensely useful tool developed by WebAIM (Web Accessibility In Mind), an organization focused on accessibility since 1999.
Running WAVE is as easy as visiting the WAVE website (or installing the Chrome plugin) and entering a web address to scan. Most websites will have ADA compliance issues big or small, so enter a website of your choosing.
This will navigate your browser to the site you entered and open the WAVE window on top of it. For example, I went to wordpress.org:
You should see green, red, and yellow icons floating above elements on the page. Nothing is broken; these are added by WAVE. Green icons are simply features of your webpage identified by WAVE, and are generally of no concern. Errors, which appear in red, and Alerts, which appear in yellow, are concerns. For full ADA compliance that meets WCAG 2.0 guidelines, all errors should be resolved, while alerts are recommended fixes. See our ADA Compliance Checklist for a list of what’s required for total compliance.
The “Details” tab – the second tab from the top of the WAVE window (look for the flag icon) – is key. It identifies problems on the page, categorized by Errors and Alerts. Click the blue “i” (Info) button next to each issue to read a detailed description of the problem as well as why it matters and how it can be fixed. You can also open the <code> panel at the bottom of the screen to see exactly where in the source code WAVE found problems.
Part 2: Fixing Common Issues
Now that we know how to locate problems, let’s get our hands dirty and fix some. As you solve issues, refresh the page you are working on and re-scan with WAVE to be sure they are cleared up.
We will look at a select handful of errors and alerts generated by WAVE scans. You may or may not see these issues depending on the page you scan, but rest assured, these are common results.
Fix Error: Missing alternative text
Because visually impaired users cannot consume image content, they rely on screen reading software to read alternate text descriptions. If images do not provide alternative (“alt”) text, the image lacks crucial accessibility. In fact, WebAIM describes alt text as the first principle of web accessibility.
The fix? You guessed it: Ensure all images contain alt text. Ideally, alt text describes the content and function of the image succinctly and without being redundant with nearby content.
Alt text is simply an attribute included in <img> tags:
<img src=”mysite.com/images/logo.jpg” alt=”My Site Logo” />
Fix Error: Document language missing
We just mentioned it, but let’s mention it again: screen reading software is important for the visually impaired. The document language, identified in code, informs the software what language to read. If your website doesn’t identify its language, it is simply less accessible.
Adding the document language only requires an attribute in the <html> tag to open the page. It is best placed in a header file:
<html lang=”en”><!– All Webpage Content Goes Here –></html>
Note that “en” identifies English as the primary language of the page; different languages have different codes. See W3C Language Code Reference.
Fix Error: Missing form label
Forms are fields where users can enter information into a website. Each form should have a label associated with it to describe what information the user is to fill in (“First Name” or “Phone Number,” for example). For screen reading software, these labels essentially act as alt text.
One way to code a WAVE-friendly form is with a <label> element with a “for” attribute that matches the “id” attribute of a nearby <input>. For example:
<input type=”text” id=”name” class=”contact-form-name” placeholder=”Name*”>
Note that the text in between the <label> tags (“Name”) will actually print to the screen. This can be hidden with the CSS of display: none; while still satisfying WAVE.
Fix Alert: Skipped heading level
Page headings promote readability and section page content. They also come in multiple levels that should follow a logical sequence: <h1> should hold <h2> which should hold <h3>, and so on. This is not only good, valid code, but promotes accessibility for keyboard-assisted users and better search engine optimization.
If WAVE detects a skipped heading level, it might mean the code goes from a <h1> to an <h3> or an <h2> to an <h4>. It could also mean that <h1> was skipped entirely and an <h2> was used. The fix is to ensure that heading numbers flow in order.
Best practices: Use one top-level heading <h1>, and below that, you may choose to include multiple <h2>. If there are even smaller headings within the sub-sections, go to <h3>. If no heading level is skipped, you beat the game.
These are just a handful of the accessibility issues you will encounter with your new WAVE tool. But as you can see, fixing accessibility issues isn’t always difficult, and WAVE is happy to explain why each fix is worth the effort.
Accessibility is good. Embrace it! And remember, you can always contact PaperStreet to handle your website’s ADA compliance.