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)

Rule ID Summary Required
Heading 5 Headings must be properly nested Yes
Heading 6 Headings must have text content no
Heading 7 First landmark heading h2 no
Heading 8 Headings nested in landmarks Yes
Landmark 10 navigation landmark: restrictions Yes
Landmark 11 main landmark: must be top-level Yes
Landmark 12 contentinfo landmark: must be top-level Yes
Landmark 13 contentinfo landmark: restrictions Yes
Landmark 14 search landmark: restrictions Yes
Landmark 15 form landmark: restrictions Yes
Landmark 16 region landmark must have accessible name Yes
Landmark 17 Landmarks must be uniquely identifiable Yes
Landmark 18 Landmarks must identify content regions Yes
Landmark 19 complementary landmark: must be top level Yes
Landmark 2 All content must be contained in landmarks Yes
Landmark 8 banner landmark: must be top-level Yes
Landmark 9 banner landmark: restrictions Yes
List 1 Use semantic markup for lists Yes
Role 1 main element role semantics. (Deprecated) no
Role 10 Overriding h1-h6 role semantics. (Deprecated) no
Role 2 body element role semantics. (Deprecated) no
Role 4 article element role semantics. (Deprecated) no
Role 5 section element role semantics. (Deprecated) no
Role 6 Do not override nav element semantics. (Deprecated) no
Role 7 aside element role semantics. (Deprecated) no
Role 8 Do not override header element role. (Deprecated) no
Role 9 Do not override footer element role. (Deprecated) no
Table 1 Data cells must have row/column headers Yes
Table 3 Data tables must have description no
Table 4 Data tables must have unique names Yes
Table 5 Identify table markup as data or layout Yes
Table 6 Header cells must be th elements Yes
Table 7 Data cells must use headers attribute Yes
Table 8 Name must be different than description Yes

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 buttons 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