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
• Magnification does not cause content to be obscured or blocked
• Magnification does not cause horizontal scrolling

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