Web Accessibility Checklist
Links | Accessibility list |
---|---|
All <img> elements include ALT attribute |
|
Images used for decoration include empty ALT text (alt="") and no title attribute |
|
CSS background images are not used to convey important information or provide functionality, such as navigation or branding |
|
All functionality is keyboard operable (including interactive User Interface components) |
|
The keyboard tab order follows logical page order |
|
Where mouse event handlers are used, keyboard handlers are also available |
|
Change of page context should be controllable by user |
|
When an element receives keyboard focus, there is a visual indicator such as an outline |
|
No keyboard traps exist (i.e., the keyboard user can navigate in and out of page elements) |
|
Content reading order is linear and logical in the absence of styles and formatting |
|
Forms are fully keyboard-operable |
|
All form fields are associated with <label> elements |
|
All error prevention and handling are exposed to and navigable by all users |
|
Pages begin with a top-level heading, marked up as <h1> |
|
Pages use appropriate landmarks, particularly the "main" role. |
|
Pages maintain a hierarchical heading structure, skipping no heading levels |
|
Pages should include a unique <title> |
|
<Title> should be meaningful and relevant to the page contents |
|
Page and section layout are achieved by using semantically correct elements such as <body> , <div>, <section> , etc. |
|
Page and section layout are achieved by using semantic elements such as <body>,<div>, <section>, <article> etc. |
|
Page maintains legibility after page magnification in browser |
|
Content maintains legibility after text magnification |
|
Ensure that links are focusable and can be activated by keyboard |
|
Use unique text to identify hyperlinks (e.g., "More about Diversity"; "Proceed to Checkout") |
|
Link text uses device-neutral wording, such as "Proceed to…" |
|
Links are visually identifiable, and distinguishable from other page content |
|
Video is accompanied by a synchronized caption and audio by a transcript |
|
All video should be presented with an available closed-caption |
|
All media should be presented in a keyboard-operable player |
|
Tables use <th> and <td> to present data |
|
Table headers and table data cells are related by SCOPE, ID/HEADERS or other associative markup |
|
Foreground and background contrast must be sufficient (=>4.5:1 for regular text) |
|
Font sizes should be defined as percentages, ems, or by named sizes |
|
Interactive elements are enhanced progressively, built on elements with native functionality such as links and buttons |
|
Custom UI components have appropriate role, state, and accessible text labels |