Techniques to Improve Website Accessibility

Friday, May 8, 2020

Summary

This list enumerates common techniques for creating accessible websites and applications.

Users can traverse and interact with a page or view using only the keyboard

  • Keyboard tab and arrow sequence reflects logical reading order
  • Any element that exhibits a hover/click behavior exhibits the same behavior via focus/keypress
  • Any element that exhibits a hover/click style exhibits the same style via focus/keypress
  • Elements display a visual indicator on focus and on hover
  • Keyboard commands in the web application do not conflict with browser or OS commands
  • Modal dialogs, popups, and overlays capture keyboard focus until dismissed by user

Users can remain oriented within a page or view

  • All content on all pages is contained within a named landmark region
  • All landmark regions have unique accessible names
  • Landmark regions observe rules and restrictions for level and nesting
  • Regions created by web editors have unique accessible names
  • All object IDs are unique in a page

Unique, descriptive text labels are applied to non-text elements

  • Landmarks, Sections (aria-label, aria-labelledby)
  • Images/Area (ALT text, aria-label, aria-labelledby, aria presentation role)
  • Form controls (label, aria-label, aria-labelledby, fieldset/legend)
  • Buttons (inner text, HTML label, aria-label, aria-labelledby)
  • Links (inner text, aria-label, aria-labelledby)
  • Widgets (aria-label, aria-labelledby)
  • Media players and controls (aria-label, aria-labelledby)

Document structure is standard and intuitive

  • All pages and views include a unique title which is exposed on load
  • All pages and views use appropriate, well-labeled landmarks and sectioning
  • All pages and views contain a level 1 heading
  • Headings are nested and increase by 1 level; no heading levels are skipped
  • Headings are used to introduce or identify topics and regions, not to compose blocks of text
  • Headings are not used to provide styling or spacing, but reflect the natural outline of  document

Native HTML5 elements are used wherever possible

  • HTML5 elements and attributes are use in conformance with HTML5 standards
  • HTML5 is used for sectioning and container elements
  • ARIA role attribute is not provided when it duplicates the role of the HTML5 tag
  • If ARIA role is applied, all attributes of that role are managed in script

Color and styles

  • Foreground and background colors are defined in tandem
  • Foreground/background color combinations conform to applicable contrast levels
  • Hyperlinks are visually distinguishable from surrounding text in two ways (e.g., color, underline)
  • Styles are provided using CSS, and not via HTML tags like <b> or <i>

Documents remain legible when magnified

  • Content reflows without horizontal scrolling (up to 400%)
  • Use relative units (e.g., em, %) for all text
  • Use relative units (e.g., em, %) for all interface elements

Dynamic and live content

  • Alerts, notifications, updates, and similar live content are exposed to the user
  • User is returned to an appropriate context after addressing alerts, notifications, updates, and similar live content
  • Dynamic content includes instructions for any calls to action
  • Dynamic modals, dialogs, and other overlays can be dismissed using ESC or close button

Online media

  • All recorded media is accompanied by an accurate transcript
  • Recorded video is accompanied by synchronized captions
  • Recorded videos are accompanied by audio description of onscreen activity
  • Media players are accessible; components are keyboard and screen reader operable

User control and autonomy

  • Users submit forms and commit changes via accessible interface elements
  • Users can opt-in to auditory and motion experiences; media does not autoplay
  • Users can extend time limits whenever possible