HTML

  • Use HTML for functionality, if possible. Its native elements are semantic and built with accessibility features that will naturally conform to WCAG 2.0 AA (i.e. use <button> instead of scripting a <div> for button functionality)

  • HTML is used according to specification (i.e. proper nesting)
  • All informative or linked <img> elements have appropriate alternative text
  • All decorative <img> elements have a null alt (alt=””) attribute
  • Data tables are marked up so that the columns are associated with the headers
  • Layout tables do not use <th> or <caption>
  • Form elements have visible labels that are programmatically associated with the form elements.
  • Related fields are grouped and associated with a label
  • IDs are unique.

Assistive technologies & keyboard-only

  • Turn off styles, and ensure the document reading order is logical (screen readers follow the order of the Document Object Model)
  • Tab through the page without using the mouse. Is the focus clearly visible at all times? Is the order logical?
  • Can you accomplish all functionality using only the keyboard?
  • Does the keyboard focus ever get trapped (i.e. can’t leave a modal without using the mouse)?
  • Error messages are associated with the corresponding form element
  • When screen readers fill out a field, or submit a form with an error, they are made aware of the error
  • All custom, scripted controls, and widgets use programmatically-determinable names and roles to mirror HTML native controls
  • Verify no major change of context is automatically triggered when tabbing to an element

Page structure and navigation for assistive technologies (AT)

  • Headings are used to organize content, and are nested according to HTML specification
  • The <title> updates for each page
  • An <h1> is on every page
  • List markup is used for lists, and nested according to HTML specification
  • Landmarks are created to separate content into broad sections (i.e. <header>, <main>, <footer>)

Glossary

A11y – Accessibility

Applies to computer systems, including the internet, software and hardware. is to all people, including those with disabilities or impairments.

AT – Assistive Technology

Assistive technology. Examples are screen readers, refreshable Braille displays, single-switch entry devices, and voice-input software.

Programmatically-determined

Content is authored in such a way that user agents, including assistive technologies, can access the information.

Semantic elements

A semantic element clearly describes its meaning to both the browser and the developer.

  • Semantic elements: <form>, <table>, and <article> - Clearly defines its content.
  • Non-semantic elements: <div> and <span> - Tells nothing about its content.

WCAG 2.0 AA

Web Content Accessibility Guidelines (WCAG) 2.0, Level AA is the standard our websites and digital documents should conform to, so that we comply with the law.