Web Accessibility Checklist

These guidelines are based on the Web Content Accessibility Guidelines (WCAG) 2.0, Section 508 of the Rehabilitation Act of 1973 (as amended) and the World Wide Web Consortium's Web Accessibility Initiative. These guidelines are in keeping with the spirit of current legislation such as ADA, Section 504 of the Rehabilitation Act, and Section 255 of the Telecom Act.

  • List items marked with easy are less technical and most relevant to web content providers and non-coders.

Navigation and Organization

  • Write text clearly and simply.
  • Every page should have an HTML title tag that uniquely and briefly describes the page content, then includes the website title.
  • Use h1-h6 tags for headings, properly nested to outline the content hierarchically and provide navigation for screen readers.
  • Use strong or em tags for emphasis, instead of styles or underlines.
  • Use list elements ul, ol and dl to create lists.
  • Use ul (unordered lists) to create navigation menus.
  • Navigation should be simple and consistent.
  • Navigation links should come after the main content, or provide a link or method that allows users to skip repetitive navigation links.
  • To display content only to screenreaders, use absolute positioning off the screen instead of display:none or visibility:hidden.
  • Frames should have a title attribute containing text that facilitates identification and navigation.
  • In HTML5, structure the page using semantic elements (such as header, footer, nav, article, section and aside).
  • In HTML5, add ARIA landmarks using attributes such as these:
    • role="" for important page elements: main, navigation, search, banner, article, contentinfo, etc.
    • aria-required or aria-disabled or aria-readonly set to true for some form fields.
    • aria-label or aria-labelledby to clarify elements with a role.

Tables

  • Keep tables as simple as possible; minimize use of nested tables and cells that span multiple rows and columns.
  • Use a summary attribute and/or caption element to summarize the table contents.
  • Use th elements and scope attributes for row and column headings.
  • Use tables for tabular data. Minimize use of tables for page layout.
  • Layout tables should use the ARIA role="presentation" attribute, but not summary, caption, th or scope.
  • WebAIM: Creating Accessible Tables

Links

Visual Design

Graphics

  • Use an alt attribute (alternate text) to describe the content and function of images, image inputs, image map areas, and Java applets.
    • HTML code: <img src="/images/morgan.jpg" alt="Morgan Library" />
    • An image which is not a link, and merely decorative or explained in the page text, should use an empty alt attribute: alt=""
    • Add alt text to images in WordPress
  • For image maps, use client side rather than server side.
  • Use moving or animated graphics or text sparingly and consider alternatives, to avoid distraction and triggering seizure disorders.
  • WebAIM: Accessible Images

Multimedia

Online Forms

  • Design electronic forms to allow for easy navigation, completion, and submission of the information requested.
  • Allow keyboard-only navigation (e.g. Tab key to move sequentially, arrow keys to select items, Enter to submit).
  • Form controls such as text fields and text boxes should be properly labeled using a label element with a for attribute that matches the id attribute of the control.
    • HTML code: <label for="name">Name:</label><input id="name" type="text" name="textfield" />
  • Use fieldset and legend elements to group related fields.
  • Instructions and text-based descriptions of the information requested should be positioned before the form elements.
  • Allow extension of any time limitations.
  • Error-handling should include both client and server validation, error messages that clearly indicate the problem and solution, and easy error correction.
  • Provide an alternative way of providing the information requested.
  • WebAIM: Creating Accessible Forms

Scripting Languages

  • Use HTML instead of scripting languages like JavaScript whenever possible.
  • Assure that script content and fuctionality are accessible.
  • Assure that scripts do not make form elements inaccessible to keyboard navigation.
  • A text description should be provided before the script executes if the script conveys additional information or performs a function that affects the user's interface.
  • WebAIM: Accessible JavaScript

Test Your Work

Check your site using different technologies, such as:

  • Only the keyboard for navigation. (See WebAIM: Keyboard Accessibility.)
  • A browser with images, styles and scripts disabled.
  • A screen reader such as JAWS or VoiceOver.
  • Click in the browser window, select all (Ctrl+A), copy (Ctrl+C), and paste into Notepad (Ctrl+V) to show all text that is accessible to screenreaders.
  • An automated online accessibility checker such as WAVE.
  • An automated code checker such as the W3C HTML Validator.
  • Web browsers such as Mozilla Firefox, Google Chrome, Microsoft Internet Explorer and Edge, Apple Safari, and Opera.
  • Desktop and laptop operating systems, including Microsoft Windows and MacOS.
  • Mobile devices, including tablets, mobile phones and media players running Apple iOS and Google Android operating systems.