General Site Review Checklist

This document is a general checklist of potential accessibility issues that can be used to review a site for usability. Additional topic-specific checklists will be created that go into more detail.

Landmarks

The following HTML 5 elements function as landmarks that can be used by assistive technology to navigate a website.

<header>
<nav>
<main>
<article>
<aside>
<footer>

ARIA roles can be used to create landmarks on elements that aren't inherently landmarks:

<form role="search">

Language Support

Declaring a language attribute on the html element enables a screen reader to read out the text with correct pronunciation: <html lang="en">
Layouts and elements should properly change directions and flip sides when the page is translated to a right-to-left language like arabic.

Document Outline

Use semantic headings and structure

Links

Ensure links are recognizable (Both underlined and colored in body text. At least one indicator in menus and lists).
Ensure links have :hover state (Either underline or color change)
Ensure links have :focus state (Either the default blue outline used by browsers is clearly visible, or an alternate focus style is created.)
For links in menus, the hover/focus states should be different than the active state for the current page link.
External links have visual and text indicator that they open in new windows.

Images

Use appropriate alt text. Read article on using ALT text
If no alt text has been entered make sure an empty alt="" attribute is present.
Add role="presentation" to any images that are purely decorative.
If an image is in a link (such as in a tout), setting alt="" is usually preferred to keep it from distracting users while they are navigating

Javascript

Unobtrusive Javascript
No-JS Alternatives

Forms

Logical layout
Associated label for all form controls (e.g. input, select etc.)
Make sure placeholder attributes are NOT being used in place of label tags. See WHATWG article
Group related form elements with fieldset and describe the group with legend

Media (Audio and Video)

Providing text alternatives makes the audio information accessible to people who are deaf or hard of hearing. This also goes for search engines who are deaf and hard of hearing as well.

Provide text transcripts
Synchronized subtitles for videos

Color and Contrast

Best done early in the process, by ensuring that the foreground and background colors of your site have sufficient contrast you will help make your site more readable for everyone. Contrast Ratio is one tool for checking the contrast of your colors for both standard vision and color deficient user.

Test color contrast

Test against different types of color blindness with a tool like http://colorfilter.wickline.org/.

If you are on a Mac, another option is Michel Fortin's, Sim Daltonism color blindness simulator.

Deuteranopia
Protanopia
Tritanopia

Keyboard navigation

"Skip to main content" link should be visible on focus.
Tabbing through links goes in the same order as things visually appear on the screen.
Focus outlines are visible on all elements as they are focused.

Motion

All motion transitions should be deactivated if user prefers reduced motion. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
Avoid parallax scrolling and diagonal lines that are unpleasant for viewers with vestibular disorder. https://alistapart.com/article/accessibility-for-vestibular/

Testing

Navigating your site using a range of tools, such as just the keyboard or a screen reader, will help you understand how a blind, low-vision, or limited-mobility user will experience it.

Test using a screen reader

Tools

This extension provides an extensive usability checklist: https://accessibilityinsights.io/en/
This site has an interactive checklist: http://a11yproject.com/checklist.html

Kalawiki