HTML5 and ARIA Techniques
WCAG 2.0 Level A and AA requirements using ARIA and HTML5 accessibility features.
Evaluation of W3C Web Content Accessibility Guidelines 2.0 Level A and AA conformance using HTML5 and ARIA accessibility techniques. ARIA Landmarks are required for the identification and labeling of the sections of content on a web page. The ruleset requires the use of ARIA widget roles for identifying and describing interactive elements (e.g. popup menus, grids, trees, etc...) that cannot be not described by the native semantics of HTML5 form control and links elements.
- Version: 1.2.0
- Total Rules: 136
- Required Rules: 109
- Recommended Rules: 27
Guideline 1.1 Text Alternatives
Success Criterion 1.1.1 Non-text Content (Level A)
Rule ID | Summary | Required |
---|---|---|
Image 1 | Images must have alt text | Yes |
Image 2 | Alt text must summarize purpose | Yes |
Image 3 | Alt text must not include filename | Yes |
Image 4 (English) | Alt text no more than 100 characters | no |
Image 5 | Verify image is decorative | Yes |
Image 6 | Long description for complex images | Yes |
Image 7 | Use MathML for mathematical expressions | Yes |
Guideline 1.2 Time-based Media
Success Criterion 1.2.1 Audio-only and Video-only (Prerecorded) (Level A)
Rule ID | Summary | Required |
---|---|---|
Audio 1 | audio must have alternative |
Yes |
Audio 2 | object for audio must have alternative |
Yes |
Audio 3 | embed for audio must have alternative |
Yes |
Video 1 | video for video only must have alternative |
Yes |
Video 2 | object for video only must have alternative |
Yes |
Video 3 | embed for video only must have alternative |
Yes |
Success Criterion 1.2.2 Captions (Prerecorded) (Level A)
Rule ID | Summary | Required |
---|---|---|
Video 4 | video must have caption |
Yes |
Video 5 | object for video must have captions |
Yes |
Video 6 | embed for video must have captions |
Yes |
Success Criterion 1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)
Rule ID | Summary | Required |
---|---|---|
Video 7 | video element must have audio description. |
Yes |
Video 8 | object for video must have audio description. |
Yes |
Video 9 | embed for video must have audio description |
Yes |
Guideline 1.3 Adaptable
Success Criterion 1.3.1 Info and Relationships (Level A)
Success Criterion 1.3.2 Meaningful Sequence (Level A)
Rule ID | Summary | Required |
---|---|---|
Layout 1 | Layout tables must have meaningful sequence | Yes |
Layout 2 | Do not nest layout tables | no |
Layout 3 | Verify aria-flowto supports reading order |
Yes |
Order 1 | Reading order: CSS positioning | Yes |
Success Criterion 1.3.3 Sensory Characteristics (Level A)
Rule ID | Summary | Required |
---|---|---|
Sensory 1 | Not only shape, size and location | Yes |
Guideline 1.4 Distinguishable
Success Criterion 1.4.1 Use of Color (Level A)
Rule ID | Summary | Required |
---|---|---|
Color 2 | Use of color | Yes |
Success Criterion 1.4.2 Audio Control (Level A)
Rule ID | Summary | Required |
---|---|---|
Audio 4 | Pause, stop or mute audio | Yes |
Success Criterion 1.4.3 Contrast (Minimum) (Level AA)
Rule ID | Summary | Required |
---|---|---|
Color 1 | Text must exceed CCR threshold | Yes |
Success Criterion 1.4.4 Resize text (Level AA)
Rule ID | Summary | Required |
---|---|---|
Resize 1 | Resize text content | Yes |
Guideline 2.1 Keyboard Accessible
Success Criterion 2.1.1 Keyboard (Level A)
Rule ID | Summary | Required |
---|---|---|
Keyboard 1 | Widget roles require keyboard support | Yes |
Keyboard 2 | Interactive functionality must be keyboard operable | Yes |
Widget 16 | Closed shadow DOM requires manual check. | Yes |
Success Criterion 2.1.2 No Keyboard Trap (Level A)
Rule ID | Summary | Required |
---|---|---|
Keyboard 3 | No keyboard trap | Yes |
Guideline 2.2 Enough Time
Success Criterion 2.2.1 Timing Adjustable (Level A)
Rule ID | Summary | Required |
---|---|---|
Timing 1 | Control time limits | Yes |
Success Criterion 2.2.2 Pause, Stop, Hide (Level A)
Rule ID | Summary | Required |
---|---|---|
Timing 2 | Control moving, blinking or auto-updating content | Yes |
Guideline 2.3 Seizures and Physical Reactions
Success Criterion 2.3.1 Three Flashes or Below Threshold (Level A)
Rule ID | Summary | Required |
---|---|---|
HTML 2 | Replace marquee elements |
Yes |
Timing 3 | Flashing limits | Yes |
Guideline 2.4 Navigable
Success Criterion 2.4.1 Bypass Blocks (Level A)
Rule ID | Summary | Required |
---|---|---|
Bypass 1 | Skip to main content link | no |
Frame 1 | frame must have accessible name |
Yes |
Frame 2 | iframe must have accessible name |
Yes |
Heading 1 | Page must have h1 element |
no |
Landmark 1 | main landmark: at least one |
Yes |
Landmark 3 | navigation landmark: at least one |
Yes |
Landmark 4 | banner landmark: identifies branding content |
Yes |
Landmark 5 | banner landmark: no more than one |
Yes |
Landmark 6 | contentinfo landmark: identifies admin content |
Yes |
Landmark 7 | contentinfo landmark: no more than one |
Yes |
Success Criterion 2.4.2 Page Titled (Level A)
Rule ID | Summary | Required |
---|---|---|
Title 1 | title must identify website and page |
Yes |
Success Criterion 2.4.3 Focus Order (Level A)
Rule ID | Summary | Required |
---|---|---|
Focus 1 | Focus order must be meaningful | Yes |
Success Criterion 2.4.4 Link Purpose (In Context) (Level A)
Rule ID | Summary | Required |
---|---|---|
Link 1 | Link text must describe the link target | Yes |
Link 2 | Link text must be unique | no |
Success Criterion 2.4.5 Multiple Ways (Level AA)
Rule ID | Summary | Required |
---|---|---|
Navigation 1 | At least two ways of finding content | Yes |
Success Criterion 2.4.6 Headings and Labels (Level AA)
Rule ID | Summary | Required |
---|---|---|
Control 10 | Labels must be unique | Yes |
Control 11 | Submit and reset button labels must be unique | Yes |
Heading 2 | h1 must be in main or banner landmark |
no |
Heading 3 | Sibling headings must be unique | no |
List 2 | Provide list labels when appropriate | no |
Table 2 | Data tables must have name | no |
Widget 12 | Widget labels must be descriptive | Yes |
Success Criterion 2.4.7 Focus Visible (Level AA)
Rule ID | Summary | Required |
---|---|---|
Focus 2 | Focus must be visible | Yes |
Guideline 3.1 Readable
Success Criterion 3.1.1 Language of Page (Level A)
Rule ID | Summary | Required |
---|---|---|
Language 1 | Page must use language code | Yes |
Success Criterion 3.1.2 Language of Parts (Level AA)
Rule ID | Summary | Required |
---|---|---|
Language 2 | Identify language changes | Yes |
Guideline 3.2 Predictable
Success Criterion 3.2.1 On Focus (Level A)
Rule ID | Summary | Required |
---|---|---|
Focus 3 | Target focus must be in content window | Yes |
Success Criterion 3.2.2 On Input (Level A)
Rule ID | Summary | Required |
---|---|---|
Focus 4 | select must not change context |
Yes |
Focus 5 | Forms submitted using buttons | Yes |
Success Criterion 3.2.3 Consistent Navigation (Level AA)
Rule ID | Summary | Required |
---|---|---|
Navigation 2 | Consistent ordering of landmarks | Yes |
Navigation 3 | Consistent ordering of h1 and h2 labels |
Yes |
Success Criterion 3.2.4 Consistent Identification (Level AA)
Rule ID | Summary | Required |
---|---|---|
Navigation 4 | Consistent labeling of landmarks | Yes |
Navigation 5 | Consistent h1 and h2 page section labels |
Yes |
Guideline 3.3 Input Assistance
Success Criterion 3.3.1 Error Identification (Level A)
Rule ID | Summary | Required |
---|---|---|
Error 1 | Information on invalid values | Yes |
Success Criterion 3.3.2 Labels or Instructions (Level A)
Rule ID | Summary | Required |
---|---|---|
Control 1 | Form controls must have labels | Yes |
Control 2 | Image button must have alt. content | Yes |
Control 3 | Radio buttons must have grouping label | Yes |
Control 4 | button s must have content |
Yes |
Control 6 | label must reference control |
Yes |
Control 7 | label must have content |
Yes |
Control 8 | fieldset must have one legend |
Yes |
Control 9 | Verify title is the label. |
Yes |
Success Criterion 3.3.3 Error Suggestion (Level AA)
Rule ID | Summary | Required |
---|---|---|
Error 2 | Required form controls | Yes |
Error 3 | Required widgets | Yes |
Error 4 | Error correction suggestions | Yes |
Success Criterion 3.3.4 Error Prevention (Legal, Financial, Data) (Level AA)
Rule ID | Summary | Required |
---|---|---|
Error 5 | Prevent errors | Yes |
Guideline 4.1 Compatible
Success Criterion 4.1.1 Parsing (Level A)
Rule ID | Summary | Required |
---|---|---|
Control 5 | id must be unique |
Yes |
Widget 15 | Remove deprecated ARIA attributes. | no |
Success Criterion 4.1.2 Name, Role, Value (Level A)
Rule ID | Summary | Required |
---|---|---|
HTML 3 | Role is not allowed | Yes |
Role 11 | li element group item semantics. (Deprecated) |
no |
Role 12 | a[href] element role semantics. (Deprecated) |
no |
Role 13 | select element role semantics. (Deprecated) |
no |
Role 14 | textarea element role semantics. (Deprecated) |
no |
Role 3 | ol and ul role grouping semantics. (Deprecated) |
no |
Widget 1 | Widgets must have label | Yes |
Widget 10 | Value in range | Yes |
Widget 11 | Elements with event handlers must have roles | Yes |
Widget 13 | Role does not support accessible name. | Yes |
Widget 14 | Verify appropriate use of live region | Yes |
Widget 2 | onClick event handlers must have role |
Yes |
Widget 3 | role must be valid |
Yes |
Widget 4 | ARIA values must be valid | Yes |
Widget 5 | Attributes that start with aria- must be defined. |
Yes |
Widget 6 | Widgets must have properties | Yes |
Widget 7 | Widgets must have owned elements | Yes |
Widget 8 | Role must have parent | Yes |
Widget 9 | Only one owner | Yes |