Web Accessibility Checklist

Images should have meaningful and contextual alternative text which describes the image. Alternative text is read by screen readers in place of images, displayed in place of images if the image is not loaded and provides semantic meaning to images which can be read by search engines.

Links should be visually identifiable and distinguishable from the standard copy. Use underlines as an easy way to show users when a link is present. If underlines aren’t used, make sure there is 3:1 contrast between link text and body text or some other visual identifier.

Break up long form content with section headings. They are useful for users who have difficulty focusing or remembering where they are on a page, as well as users with a visual impairment, who may navigate by skipping between headings. Headings and labels should be clear and describe the intended topic.

Choose the correct element for the current context to create a good web experience. Use correct heading tags to create a comprehensible page structure. Headings should not skip a level. All pages should have a <h1> tag which describes the page.

<h1>Cars</h1>
  <h2>Honda</h2>
    <h3>Civic</h3>
    <h3>Fit</h3>
  <h2>Ford</h2>
    <h3>Focus</h3>
  <h2>Toyota</h2>
    <h3>Prius</h3>
    <h3>Corolla</h3>
        

Each form input should have a label that accurately describes it’s purpose. Use aria-label for elements that don’t have a visible label. Provide format if applicable (i.e date: MM/DD/YYY)

Be sure that information is not dependent on color, shape, size or location. There should be another indicator (such as icons to accompany color coding, or an underline on linked text) so that people who cannot easily distinguish colors will be able to understand and use your content.

Check the text and background color to ensure an optimal contrast ratio so that it can be read by people with moderately low vision. Text should have a contrast ratio of at least 4.5:1 with the background. Color contrast should at least pass WCAG AA success criterion (AAA for mobile).

Test web pages by zooming the page up to 200% as well as enlarging the text by 200%. Content should be readable and the page should not visually break when using these constraints.

Web pages should have a title tag that accurately describes the page function or purpose. The title is typically the first content read by screen readers when the page is loaded.

Many users are physically unable to use a mouse, and might be navigating through the page using only a keyboard. Testing a website with a keyboard requires no special tools or skills, simply try tabbing your website using the keyboard only; don’t touch the mouse. Be sure to avoid any keyboard traps where the user becomes stuck in a keyboard loop. Make sure the order of all clickable elements on the page is logical.

Ensure all clickable elements have a visible focus state to show keyboard users where they are on the page. Use the :focus CSS selector to style this behavior. The user should never lose focus when tabbing through the elements of a page.

Using the correct input type is not only semantic, but will display the correct keyboard type on mobile devices and save the user from multiple annoying taps.

Users must be able to pause movement on automatically changing content (carousels, slideshows, etc.) as it may be too fast or distracting, making text difficult to read. All functionality should be keyboard accessible. Changes to carousel or slideshow items must be communicated to all users, including screen reader users.

Flashing elements are generally a bad idea, but if needed be sure flashing is less than 3 Hz (3 times a second).

Pages should be designed for screen reader compatibility. Screen readers allow visually impaired users to consume web content through assistive technology that converts text into speech. It is important to structure markup properly to allow users to correctly navigate the content. Test web pages using a screen reader to verify correct page structure, link content, image alternative text, and spelling mistakes.

Give keyboard users the ability to skip over all of the links, corporate icons, search bars and other navigation elements and allow them to navigate to the beginning of the page content.

Provide multiple ways for users to find your website’s pages by:

• Adding an HTML sitemap page (which links to every page on your website).
• Including a search function on every page.
• Providing a clear and consistent main navigation menu.

Do not rely on hover states to convey information as this approach is not screen reader, keyboard or mobile accessible.

Interactions which pull the user away from their current state of the page must give context and correctly put their focus state back to where they were on the page. Pressing the Escape key `Esc` should also close all dialogs.

Be sure the site doesn’t time out without user acknowledgement. Allow the user to request more time. Allow session re-authentication without loss of data.

Ensure that multimedia elements are accessible and can be consumed by everyone. Videos should have options for captioning. Audio-only content should have transcripts. Media players should be keyboard accessible. Allow audio volume to be controlled.

Media that is played automatically may confuse users and execute functionality that is out of the users control. Non-sighted users who depend on screen readers may not be able to understand or navigate the page.

The HTML lang attribute (<html lang="en">) is used to identify the language of text content on the web. This information helps screen readers switch language profiles to provide a better user experience.

Labels should be clear and understandable so they identify the controls in a form and the user knows what information is expected to be entered. Labels should always be visible.

Use descriptive error explanations close to the invalid input, explaining what is wrong and how to fix it. Simply coloring the field red is not enough. Error messages should be in text which explains the error along with how to fix it and should be accessible by screen readers.

Make sure data is accessible via screen readers. Some chart or map plugins do not allow for data to be read by screen readers. Look for images of text where the same presentation can be accomplished using true text. Provide text alternatives for non-text content. Allow Scalable Vector Graphics (SVG) content to be as accessible as possible. Place the SVG element in the HTML directly, provide a ‘title’, provide a ‘description’, make it focusable and give it a role attribute.

Avoid links with non-descriptive text (i.e. “Click Here”). Have the link describe where the user will go when clicking (or tapping on a mobile device). Any destructive actions, such as deleting sensitive information, should be clearly expressed. Utilize aria-label to give context to screen readers (i.e. “Learn More <a href="/cats" aria-label="Learn More About Cats">Learn More</a>").

Avoid links that open a new tab or window. If nessesary provide an indication of the behavior (text or icon).

Tables allow users to visually associate data contextually. This is not possible for non-sighted users. Be sure to use proper table elements, and not to style other elements to look like a table. Use the <caption> tag to describe the data that the table represents. Table headers should never be empty. Use the scope attribute to properly associate data cells with appropriate headers.

Accessible Rich Internet Applications (ARIA) allow assistive technologies to convey appropriate information to people with disabilities. ARIA in HTML is a combination of 'roles' (which identify an element’s purpose) and 'aria' attributes (which describe things about it and what it’s up to).

Hide decorative, accent or any images that do not convey any information from screen readers. Move these images to CSS and use them as background images as they are purely for style. Using 'aria-hidden' attribute is also a viable option.

Testing web pages with styles disabled is a great way to catch some accessibility issues like page structure, non-informational images readable by screen reader, as well as other issues like heading order. Use a tool like the WAVE Evaluation Tool to test pages with no styles.

Having a small page size ensures users with a slower bandwidth can access your page.

Valid HTML allows both browsers and screen reader software to accurately render pages.

• Ensure element IDs are unique.
• Find missing or unbalanced HTML tags in your documents
• Remove stray characters
• Correct missing and invalid attributes