Planning Your Web App for Accessibility
When planning a web app, the thoughtful developer remains aware at all times that the people who visit and use the app come with different abilities. When planning a web app, the ethical developer understands that, even though every person is different, they all have an equal right to use the app. When you give everyone equal access to your web app, you’re making your app accessible.
Planning for accessibility means taking the following impairments into account:
- Visual: Includes full or partial blindness, color-blindness, and reduced vision.
- Auditory: Includes full or partial deafness, difficulty hearing, the inability to hear sounds at certain frequencies, and tinnitus.
- Motor: Includes the inability to use a pointing device such as a mouse, restricted movement, lack of fine motor control, excessive trembling or shaking, and slow reflexes or response times.
- Cognitive: Includes learning disabilities, focusing problems, impaired memory, and extreme distractibility.
An accessible design is the right choice ethically, but it’s also the right choice practically because a significant percentage (estimates range from 5 to 20 percent) of the people who use your web app will exhibit one or more of the above disabilities in varying degrees. Fortunately, as long as you build your app with equal access in mind from the get-go, adding accessible features takes very little effort on your part.
Before you get started, it’s a good idea to crank up a screen reading application so that you can test out how your web app works when “heard.” If you use Windows, start up the Narrator utility; if you’re on a Mac, fire up the VoiceOver utility.
web app accessibility is a massive topic, but for our purposes you can boil it down to implementing the following techniques:
- Include alternative text for all images. For the visually impaired, a screen reader reads aloud the value of every
altattribute, so important or structural images should include a brief description as the
<img src="twitter.png" alt="Icon for link to Twitter">
You don’t need to add an
alt value for purely decorative images, but you must include the
alt tag (set to an empty string:
alt="") or your HTML code won’t validate.
- Add an ARIA label to all form fields. ARIA stands for Accessible Rich Internet Applications, and it’s a technology for adding accessibility to web apps. When you add the
aria-labelattribute to an
<textarea>tag, the screen reader reads that attribute’s text:
<input type="radio" id="pony-express" name="delivery" value="pony" aria-label="Pony express delivery option">
- Add a label for all form fields. Adding the
<label>tag — either by using the
forattribute to reference the
idof the corresponding field, or by surrounding the field with
</label>tags — enables the user to select the field by also clicking the label. This increases the target area for clicking, which helps users with unsteady hands. Be sure to add a label for every
<input>tag, as well as each
<label for="user-email">Email address</label> <input id="user-email" type="email">
- Use headings hierarchically. All page headings should use
<h6>tags, where that order reflects the hierarchy of the heading structure:
<h1>is the top-level heading in a section of the page,
<h2>is the second-level heading in that section, and so on. Don’t skip heading levels (say, by jumping from
- Use semantic HTML5 page tags. These include <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer>. These so-called landmarks help assistive technologies make sense of your web app. You should also add ARIA role attributes to these tags, as follows:
<header role="banner"> <nav role="navigation"> <main role="main"> <article role="contentinfo"> <section role="contentinfo"> <aside role="complementary"> <aside role="note"> <footer role="contentinfo">
role possibilities for the
<aside> tag? Yep: Choose the
role value that best fits the content of the sidebar.
- Add ARIA roles to non-semantic elements. If your app uses non-semantic elements, such as a jQuery UI or jQuery Mobile widget, you can alert assistive technologies to what the widget does by adding the
roleattribute and setting it equal to the widget’s function in the app. Some example
toolbar. For example, here’s how you’d add the various tab-related roles to jQuery UI’s Tabs widget:
<div id="my-tabs"> <ul role="tablist"> <li><a href="#my-tab-1" role="tab">This</a></li> <li><a href="#my-tab-2" role="tab">That</a></li> <li><a href="#my-tab-3" role="tab">The Other</a></li> </ul> <div id="my-tab-1" role="tabpanel"> This is the first tab's content. </div> <div id="my-tab-2" role="tabpanel"> This is the second tab's content. </div> <div id="my-tab-3" role="tabpanel"> Yep, this is the third tab's content. </div> </div>
Check out Mozilla Developer Network’s Using ARIA page to see a complete list of ARIA roles.
- Ensure your app’s colors have sufficient contrast. If text colors too closely match the background color, the text will be hard to decipher, particularly for the visually impaired.
Once your app is on the web, you can check its accessibility by heading over to the Web Accessibility Evaluation Tool (WAVE). Paste your web app’s address into the text box and press Enter/Return to see a report.