Skip to main content

Accessibility Checklist

 

Markup

  • Separate structure from presentation and use proper markup for that structure. For example, mark up lists as lists
    <ul>, <ol>, <dl>
    rather than text with a
    <br>
    tag after each list item. Ensure documents are readable without style sheets.
  • Screen reader specific content is rendered off screen rather than hidden or not displayed.
  • Style sheets are used to style text.
  • Frames are not recommended.

Visual Appearance and Content

  • Contrast is still sufficient between text and background (must pass WCAG AA guidelines), especially if you happen to be using a background image and that image is removed.
  • Pages remain usable when users enlarge text up to twice its original size.
  • Each element on a page is reachable and can be manipulated via the keyboard.
  • Content and background have sufficient contrast for color-blind and low-vision users.
  • Do not use content that flashes or blinks more than three times a second.
  • Do not hide the focus indicator. When a user uses the keyboard to tab from element to element, it should always be apparent where they are.
  • Do not require users to perceive font, color, or other styling changes in order to understand meaning, including error messages or as the sole method of indicating selection. For instance, don’t say, “The highlighted word in the previous paragraph is the most important,” or “Items marked in red are errors and need to be corrected,” unless the word or items are indicated in some other way.
  • Nested lists are marked up properly.

Language and Content

  • Acronyms are wrapped in acronym elements and abbreviations use proper markup.
  • Changes in natural language are identified inline.

Links

  • Anchor elements contain a valid hypertext reference.
  • Link text is meaningful when taken out of context and is short and concise.
  • Links do not directly target images
  • Avoid using the same link text for links with different targets; for example, using “Click Here” below each of your featured stories.
  • Links that target content requiring a plug-in indicate the content type; for example, having to use a PDF reader to read a PDF.

Navigation

  • A valid skip link target is present and is located appropriately.
  • Event handlers that trigger navigation or form submission are avoided.
  • Time-based meta-redirects are avoided.
  • Entire pages do not automatically refresh.
  • Pages use a consistent navigation structure.
  • Provide a mechanism for skipping past repetitive navigation links.

Page Structure

  • The reading order of content and elements are correct when viewed without style sheets.
  • Headings and labels are descriptive and unique.
  • Page reading order coincides with the tab order of the page.
  • Pages utilize the title element.
  • Provide an alternative to scrollable div areas.
  • Provide section headings to organize content.

Typography

  • Fonts use relative sizing.

Images and Multimedia

  • Text is used instead of images of text unless decorative or essential.
  • All images have an alt attribute, leaving the text for decorational images blank (e.g., alt=”“). Avoid redundant alt attributes. Ensure alternative text for images is informative and is spelled and spaced correctly. In general, be brief with alt text (e.g., “the Christus statue”), but provide detail when it conveys meaning (e.g., “President Hinckley’s son standing at his graveside with family in arms”).
  • Provide mathematical formulas in appropriate markup.
  • CSS background images that convey meaning have textual equivalents.
  • Provide a transcript, captions and/or sign language translation for all audio and video with speech with correct grammar and punctuation.
  • Provide a “described” version of a video when description is necessary for unsighted users to understand content. (The described audio track can either be distributed with the video content, or as an audio only file.)
  • If you must use CAPTCHAs, provide an audio CAPTCHA alternative.

Focus Control

  • Event handlers that trigger focus changes are avoided.
  • Keyboard focus is indicated visually.
  • New windows do not open without user control and new windows or frames do not open without a warning.

Keyboard Accessibility

  • Accelerator/shortcut keys do not conflict with standard browser keystrokes.
  • All active elements can receive keyboard focus and that keyboard focus is not provided to inactive elements.
  • The sole use of device dependent event handlers is avoided.
  • The tab order of interactive elements on the page is logical.
  • Provide a list of keyboard access keys on your site (example: http://www.daa.org.uk/?page=accessibility).
  • Use ARIA Roles.

Forms

  • Always label all form fields with the tag and that all labels are unique and explicit. If a form field has no specific text label on the page, add one, and hide it with CSS or use the title attribute.
  • Use fieldsets <fieldset> with legends <legend> to associate prompts with radio buttons and check boxes. For instance, a form asks “Gender:” and offers radio buttons that say “Male” or “Female”. Then “Gender:” should be enclosed in a tag, and all three elements (and the two radio buttons with their labels) should be enclosed in a <fieldset> tag.
  • Radio button groups are properly formed.
  • Identify all input errors in text (in addition to any images or icons), and place the error notification either next to the affected field or in a prominent location such as the top of the page with an anchor link to the affected field.
  • Provide help links or inline instructions for completing fields when necessary.
  • Provide valid, concise and meaningful alternative text for image buttons.
  • Do not permit users to complete important actions without a confirmation or a way to undo.

Data Tables

  • Data table header elements are properly identified and provided in the same table as content, that data tables are not used to also layout content which is unrelated to the data, that distinct tabular data is provided in separate data tables, and that headers and cells are properly associated.

Common Mistakes to Avoid

  • Using in-line presentational attributes for objects: Do not use in-line attributes to style tables, Twitter widgets, etc. e.g. "frameborder", "cellspacing", etc.; use CSS.
  • Using non-distinguishable links: If you have two links labeled the same, they should point the user to the same destination.
  • Not using proper markup for headers: For headers, use <h2>, <h3>, <h4>, etc. tags, not <strong> or <u> tags.
  • Not using titles for iFrames: When you embed a YouTube video, Twitter widget, or any other element in an iFrame, you must use a title attribute.
  • Insufficient link text: Do not use “Read more” or “click here” as link/button text. The text should describe what the user is clicking on e.g. “More about x, y, z.”
  • Using anchor tags incorrectly: When linking to a page anchor, do not use the name attribute e.g. name="my-anchor". Use an ID instead e.g. id="my-anchor". The ID must apply to an actual page object e.g. <div id="my-anchor">Here is my content</div>, as opposed to an empty one e.g. <a name="my-anchor"></a>.
  • Using infographics that do not have a text alternative: Do not create graphics to display complex text layouts. If you do, provide a plain text alternative below or on another page, then link to it below the graphic.

Testing