We follow WCAG 2.0 AA as our standard for accessibility. WCAG (Web Content Accessibility Guidelines) has long been the gold standard for accessibility on the web.
What is know as Section 508, which is the law that determines what is required for accessibility has decided to adopt the WCAG guidelines. So now WCAG has become the standard to follow.
This checklist helps developers identify potential accessibility issues affecting their websites or applications. It's broken down into three sections of decreasing importance: A, B and C. Please check and address these issues in the order in which they appear.
It is important to note, while B and C are noted as less critical, they are still required to be truly 508 compliant. This checklist should be used as a reference for development and is not a substitute for compliance checks by a section 508 coordinator.
forminputs have explicit labels
These tools can be used to test sites for Section 508 and WCAG compliance in browser:
These tools can be used in automated tests and with continuous integration tools to help you ensure that your sites remain accessible throughout the development process:
Avoid using tabindex of >= 1 as this will disrupt the normal tab order of the page. tabindex of -1 is only appropriate when autofocusing an element not normally interactive.
When using images on a page, you must provide an alternate method for that content. This can be provided in multiple ways. You can provide this information with a caption, alt tag or aria label. If an image has text, all the text in the image must be provided in the alternate content.
alt tag should contain the following:
<img src="/accessibility/images/sign.jpg" alt="Sign that reads Warning do not read this sign">
Avoid using "Image of" or "Picture of" as the screen reader will notify the user that it's an image. Also avoid using all caps as some screen readers will read each letter. ie. W-A-R-N-I-N-G
There are two aspects we need to address when it comes to color, contrast and color dependence. Color contrast is the ratio of the foreground color(text) and the background color. Color dependence is the need to see color to understand the information. Color contrast should meet the WCAG 2.0 AA minimum color contrast ratio of 4.5:1.
All states of the text (hover, visited, focused) should meet this requirement. This also applies to images of text unless the image is a logo, which are exempt.
Making forms accessible is a simple process. Each form element should be associated with its instructions and errors, and everything should be accessible via the keyboard.
Each form element must have a label, and is associated with the
for tag. The
for tag refers to the
id of the
input. All elements should be wrapped in a
fieldset. There can only be one
legend tag per
fieldset. Anything in the
legend tag will be associated.
legend is often used for radio buttons as its the easiest way to associate the radio buttons with the question. Notice there is no
label for the radio buttons, but each button has a
title tag for assistive technology to read.
Screen readers vary on what they read and the additional information they provide by default.
You can test these with your own screen reader. If you have a OSX you can turn voice over on by hitting command+f5.
Flashing is generally a bad idea. It can cause all sorts of issues, from seizures to motion sickness. If you absolutely must have a flashing element there are a few things to consider.
Page titles are important because they help a user navigate their browser. Most users have multiple tabs open at once. It's easier to jump between pages if each page title is unique. It's also helpful to have the unique portion first, usually the name of the page.
<title>Page Name - Denver Public Schools</title>
When laying out a page, headings provide a semantic way to lay out sections of content. A heading element briefly describes the topic of the section it introduces. Heading elements are used by users of AT to navigate a page quickly and to understand the structure of a page.
When using heading elements. reserve the
<h1> element for the page title. On the home page, this is usually the title of the site and on other pages, this may be the page title. Use the
<h1> element once per page—some assistive technology may be unable to read multiple
<h1> tags on a single page correctly. Other heading levels may be used more than once following document outline order and you may reset headings up to
<h2> with the
For sub sections, use
<h6> in document outline order.
<h1> is the most important and
<h6> is the least. Avoid skipping headings. Avoid breaking document outline order (you may go from
<h3>, but never
Hiding content is very useful for accessibility. We can hide things visually and only display it to screen reader users, we can hide content from screen reader users and only show it visually, or we can hide content from both.
aria-hidden should be used in combination with these techniques. If we want to hide something from just the screen reader, you can mark it as
aria-hidden='true' are always ignored by the screen reader. This is useful for: - Collapsing Menus - Repetitive information - Off screen content
If an element has multiple states, it's visibility should be tracked with
aria-hidden true/false. An element with
aria-hidden='false' is treated by the screen reader as if it didn't have the aria-hidden attribute and is read or not read based on other factors, such as CSS.
display:none; will visually hide but also hides content from Screen readers.
All elements on a page should be contained in a landmark element. This helps users of AT quickly navigate a page. An example of a landmark element would be a navigation menu. In HTML 4 this would be assigned an ARIA tag of
role="navigation". However, in HTML 5 you just wrap your navigation in
<nav> and do not need to add the "navigation" role. HTML5 provides built in landmark elements such as
main, nav, aside, header, footer. When using HTML5 elements, there is no need define role.
When using multimedia, we must provide means for everyone to consume the media. Multimedia is anything that uses audio and video.
Videos with audio require synchronized closed captioning. Anything said in the video must be included in the closed captioning, and anything in the closed captioning must be said in the video.
Audio description ensures any information displayed visually is conveyed via audio. The most basic example of this is text on screen. All the text on screen should be available by audio. This can be done a couple of ways. The script for the video can be written in a way that all visual information is read by the narrator. The other way is to add a separate audio track that describes the visual content. This can be done with a special player or a separate version of the video with the audio baked in.
Just a note about keyboard access. All video controls should be accessible via the keyboard, but it's also worth noting that time stamp information should be available to screen readers as well.
When tables are used to show data, the header cells that relate to the data cells need to be programmatically linked. This makes table navigation for screen readers less painful.
Simple tables can have two levels of headers. Each header cell should have
Complex tables are tables with more than two levels of headers. Each header should be given a unique
id and each data cell should have a
header attribute with each related header cells id listed.
CSS dependence just means site shouldn't rely on CSS to be functional or understandable. Often sites will use CSS to load important images for example. This is bad for several reasons. Background images can't be tagged for accessibility and with CSS turned off they aren't shown.
The other issue that pops up with CSS dependence is content order. Sometimes, content will be arranged on screen with CSS instead of the natural code flow.
Links are commonly used to quickly navigate a site when someone is using AT. Often, screen reader users won't read through an entire page to find what they are looking for. They simply move from link to link.
Things become problematic when links only make sense with context. Links such as 'Click Here' or 'Read more' don't make sense without that visual context. It's important that we inspect our sites for these types of links. These links can be made accessible using
title or ARIA attributes, but this isn't ideal. The ideal method for making these links accessible is just to write better link text.
The other issue screen reader and keyboard users come across is lengthy nav bars. These are usually made up of a list of links and with compound menus. They can be quite lengthy to tab through. To alleviate these pains, a skip navigation link should be provided. This is the first link on the page and jumps to an anchor with a
aria-label='Opens in new window'