Web accessibility means making online content usable (and enjoyable!) for people with physical, cognitive, and learning disabilities that affect how they interact with the web.
Fun fact: "Accessibility" is often abbreviated to "a11y" for hashtaggery.
- The web is an equalizing force in people's ability to get things done on a daily basis:
- Paying bills
- Buying essentials
- Signing up for services
- Communicating
- Accessible websites typically are search engine-friendly websites
- Accessible websites typically work well on mobile and tablet devices
- It's easier than it sounds!
- Vision (blindness, low vision, color blindness)
- Over 6,500,000 adults, most of them between 18 and 64, and over 650,000 children in the US reported issues related to low vision or blindness in 2011.
- About 1 in 10 men are color blind.
- Hearing (deafness)
- About 36 million adults in the US have some form of hearing loss.
- About 2 in 1000 children in the US are born deaf.
- Motor skills (trouble with using a mouse)
- Cognitive and learning issues (autism, dyslexia, ADD, etc.)
- About 1 in 88 children in the US are on the autism spectrum.
- Probably about 20% of people have some form of dyslexia.
- 11% of children 4-17 years of age, and about 4% of adults, in the US have been diagnosed with ADD.
In general, it's estimated that 12-20% of people have a disability of some kind.
References:
- Statistical Facts about Blindness in the United States (2011)
- Color blindness - PubMed Health
- Quick Statistics - National Institute on Deafness and Other Communication Disorders
- Autism Spectrum Disorders - CDC
- Debunking the Myths about Dyslexia - University of Michigan
- ADHD - CDC
- ADHD in Adults - PubMed
- Screen readers and braille readers for hearing/reading text, images, controls
- Screen magnification for low-vision users
- Keyboard-only navigation, or navigation with a joystick or other simplified interface
- Captions and transcripts for video and audio
W3C's Web Content Accessibility Guidelines (WCAG) provides principles and techniques for making web content:
- Perceivable
- Operable
- Understandable
- Robust
In other words, can a user...
- access content
- use interactive elements
- understand and navigate content
- use the content on the device of their choice and with the technology of their choice
... in a way that works for them?
WCAG is currently in its second version, so it's often called WCAG 2.0. WCAG also has three levels of compliance, from least strict (Level A) to most strict (Level AAA). Most commonly we target Level AA.
- Use HTML, CSS, and Javascript correctly.
- Create good content with logical organization that humans and machines can understand, including text alternatives for all visual content. (YouTube does captions, for example, and creates them by default!)
- Supplement valid HTML with some extra attributes that provide more information to screen readers, when appropriate.
That's it!
The first step for automated testing is validating your HTML.
The second step is running an automated test against WCAG 2.0 principles. These tests will sometimes find false positives for issues, but are a great way to get accustomed to WCAG and techniques for identifying and fixing a11y issues.
- Chrome Accessibility Developer Tools is an add-on for Chrome that adds an accessibility audit to the existing Web Inspector tools.
- HTML_Codesniffer is an in-browser tool and bookmarklet for any browser that checks your code against WCAG 2.0.
Test using all of the interactive parts of your page using the keyboard alone.
- Tab: Move between interactive elements.
- Return/Enter: "Click" on links or buttons.
- Up and down arrows: Select a radio button from a set, or an option from a select element.
- Spacebar: Select a choice from a select element, or check a checkbox.
Test your page with a screen reader, or a screen reader emulator, to see how a user might actually hear the page. Keep in mind that all screen readers work slightly differently: they have different shortcut keys and may identify (or not identify) information on the page differently.
Today we'll be testing with VoiceOver, the screenreader that comes free with your Mac. To use VoiceOver:
- Open System Preferences > Accessibility.
- Select "VoiceOver" from the menu.
- Check the box.
Or, just press Command (⌘) + F5 to toggle VoiceOver on or off.
The first time you run VoiceOver you'll be prompted to go through a tutorial. Use the tutorial and the reference links at the bottom to learn VoiceOver's keyboard shortcuts.
Using valid HTML elements to display text creates a well-structured document and also allows screen reader users to use keyboard shortcuts to "skim" the page by browsing for headers, links, tables, form fields, etc.
Valid and well-written header elements <h1> through <h6> create a kind of outline of the page.
Paragraphs (<p>), lists (<ol> and <ul>), and other types of elements create logical reading experiences.
<h1>Every page should have an h1!</h1>
<h2>Smaller sections should have h2s</h2>
<h3>And then h3s, if appropriate, etc.</h3>
<p>Blocks of text should usually be paragraphs.</p>
<ul>
<li>Lists should be used for</li>
<li>Well, lists</li>
<li>You know</li>
</ul>
Links are read by their text, so make text links clear and unique.
<a href="http://adadevelopersacademy.org/">This link</a>
and
<a href="https://twitter.com/adaacademy">this link</a>
will usually read the same to screen readers, even though they go to different URLs.
Images should have alt attributes that provide a useful description of the image. If the image is for decoration only, it should be applied through CSS, or should have an empty alt value.
<img src="http://placekitten.com/300/300" alt="an adorable tabby kitten">
Always have a text equivalent for information that is presented in a non-text format, such as images, standalone icons, videos, etc.
Data tables should always have headers (<th>) to help situate data, and scope attributes for multiple headers on different axes.
<table>
<caption>Upcoming Birthdays</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Date</th>
</tr>
<tr>
<th scope="row">Laura</th>
<td>December 6</td>
</tr>
<tr>
<th scope="row">Bill</th>
<td>December 12</td>
</tr>
<tr>
<th scope="row">Kai</th>
<td>December 14</td>
</tr>
<tr>
<th scope="row">Jessica</th>
<td>January 8</td>
</tr>
<tr>
<th scope="row">Kayle</th>
<td>January 9</td>
</tr>
</table>
Form fields should always have labels or, in the case of buttons, clear text. Elements presented in sets, like radiobuttons and checkboxes, should be grouped with a <fieldset> element.
<form>
<label>Name
<input type="text">
</label>
<label>Phone
<input type="text">
</label>
<fieldset>
<legend>Order type</legend>
<label>Takeout
<input type="radio" name="order" value="takeout">
</label>
<label>Delivery
<input type="radio" name="order" value="delivery">
</label>
</fieldset>
<fieldset>
<legend>Toppings</legend>
<label>Extra cheese
<input type="checkbox" name="toppings" value="cheese">
</label>
<label>Mushrooms
<input type="checkbox" name="toppings" value="mushrooms">
</label>
<label>Pepperoni
<input type="checkbox" name="toppings" value="pepperoni">
</label>
<label>Pineapple
<input type="checkbox" name="toppings" value="pineapple">
</label>
</fieldset>
<button type="submit">Submit order</button>
</form>
There are also a couple of ways to tie labels to fields:
- Nest the field inside the label like above
- Use attributes to tie the label to the field like this:
<label for="phone">Phone</label>
<input type="text" id="phone">
For users who can't see well and/or who suffer from color blindness, text and backgrounds need to have sufficient contrast to be visible.
By default, all browsers show keyboard focus on interactive elements with the outline CSS property applied to an element's :focus pseudo class.
You can replace this default functionality, or also add to it by changing background colors, adding underlines, etc., with CSS.
Sometimes you'll want to add extra text for screen readers. This might be because information is conveyed visually with icons, or colors, or other design elements.
This can be done with some CSS that we can apply with a class on any element:
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
The Web Accessibility Initiative's Accessible Rich Internet Application spec (WAI-ARIA) is designed to enhance already well-formed HTML for even greater accessibility.
WAI-ARIA consists of different types of attributes used to convey more information about elements, relationships and states to screen readers. Contemporary screen readers can identify these attributes and use them when they're announcing content to users.
Here are some examples:
roleindicates the element's role on the page. In this case, we have a navigation group, which most newer screen readers will be able to identify.aria-labelledbywill help tie a clear relationship between things that are in groups or hierarchies.
<nav role="navigation">
<ul>
<li><a href="#" id="nav-tops">Tops</a>
<ul aria-labelledby="nav-tops">
<li><a href="tops/t-shirts.html">T-Shirts</a></li>
<li><a href="tops/tanks.html">Tanks</a></li>
<li><a href="tops/button-ups.html">Button-Ups</a></li>
</ul>
</li>
<li><a href="#" id="nav-bottoms">Bottoms</a>
<ul aria-labelledby="nav-bottoms">
<li><a href="bottoms/jeans.html">Jeans</a></li>
<li><a href="bottoms/skirts.html">Skirts</a></li>
<li><a href="bottoms/shorts.html">Shorts</a></li>
</ul>
</li>
</ul>
</nav>
There are sets of role attributes called Landmark Roles and Document Structure Roles that can be applied to different areas of the page. These form a kind of outline of the types of content that appear on the page and help screen reader users "skim" the page.
<header>
<img src="site-logo.png" role="banner" alt="Site Name">
<!-- The banner role correlates to a site's logo or name. -->
<nav role="navigation">
<!-- Here's where the site global nav might live. -->
</nav>
<form role="search">
<!-- Here's where the site search might live. -->
</form>
</header>>
<main role="main">
<!-- The main content of the page would be the main column of text, for example. -->
</main>
<aside role="complementary">
<!-- Here's supportive information, like "about" blurbs, or other products, etc. -->
</aside>
<footer role="contentinfo">
<!-- Meta-information that describes the content, like copyright dates, might live here. -->
</footer>
Fun fact: If you're noticing similarities between WAI-ARIA roles and HTML5 container elements, that's no accident. WAI-ARIA precedes HTML5, but has similar goals for creating semantic containers and labels for content.
Good news, everyone! We're going on vacation. Let's run our tests while we learn about the trip!
What if you want more options for controls and dynamic content on the page? WAI-ARIA Widget Roles provide some enhancements like:
alertroles for important content that should get announced ASAP.progressbarroles for showing progress load.tabroles can be easily styled like links or buttons but function like radio buttons.tooltiproles can provide extra info when a user hovers or clicks on a link or button.
If a user does something that dynamically loads content on the current page, it's helpful to change context and move keyboard focus to that new content so that screen reader and keyboard users can have a smoothly flowing experience.
Javascript can be used in conjunction with WAI-ARIA attributes to create a rich, informative experience for screen reader users by dynamically adding and removing different attributes or attribute values as interactions occur and new content loads on the page.
- WebAIM has how-tos, news, and lots of resources related to a11y
- Web Axe is a blog and podcast about accessiblity issues
- Places It's Tempting to Use Display: None; But Don't gives a nice rundown of using CSS to hide content visually-only.
- Accessibility Developer Tools extension for Chrome
- HTML_Codesniffer browser bookmarklet and in-browser audit tool
- Lou Verou's Contrast Ratio tool
- VoiceOver on OSX Commands and Gestures
- VoiceOver on iOS Gestures
- Fangs Screen Reader Emulator for Firefox
- NVDA, a free screen reader for Windows
- JAWS, a screen reader for Windows with a free demo version
- ZoomText, a screen reader and magnifier for Windows with a free demo version
- Test your current projects for accessibility using VoiceOver with Safari, and Chrome Accessibility Developer Tools. If it helps, close your eyes! (Also potentially be kind to your neighbors by wearing headphones.)
- Update your CSS with any color contrast changes. You can use the Contrast Ratio tool to try out different contrasts.
- Update your HTML with WAI-ARIA Landmark Roles when they are applicable.
- Update any other HTML elements or attributes that aren't valid or don't read as you expect them to.
- Rerun your tests.
- Have a partner test your project with VoiceOver.