< Back to Standards

Starter Template

Example showing heading level tags properly marking up heading text.
Image/Screenshot explaining visually what type of component this page is covering.

Definition / explanation of what this component is/how it works.

Impacted Users

Screen reader users need ....

Users with cognitive disabilities need ...

Keyboard users need ... etc.

Designers

Rule that designers must follow.

Rule explanation text here. Rules for designers usually involve annotating the design and conveying accessibility properties to developers to make sure it's coded properly for accessibility.

✅ Do

Good Design Example

Screenshot from the figma example.

❌ Don't

Bad Design Example

Screenshot from the figma example.

Live Figma Example

Link to Figma example

Testing for Accessibility

Design Review
  1. Look for ... in the design.
  2. Make sure ... is annotated in the design.
  3. Make sure ...
  4. If ... is properly annotated in the design then it passes. ✅
  5. If ... is not annotated in the design then it fails. ❌
  6. If ... then it passes. ✅
  7. If ... then it fails. ❌

Content Designers

Rule text that content designers must follow.

Explanation of rule.

✅ Do

Good Content Example

See the Pen Heading Structure - Good Example by Paul J. Adam (@pauljadam) on CodePen.

Live Good Content Example

Heading Structure - Good Example

❌ Don't

Bad Content Examples

See the Pen Heading Structure - Bad Example by Paul J. Adam (@pauljadam) on CodePen.

See the Pen Untitled by Paul J. Adam (@pauljadam) on CodePen.

Live Bad Content Examples

Testing for Accessibility

Using Web Inspector
  1. Right Click > Inspect ... on the page.
  2. Make sure ...
  3. Make sure ...
  4. If ... then it passes. ✅
  5. If ... then it fails. ❌
Using Screen Reader
  1. Use the screen reader to navigate to ...
  2. Make sure ...
  3. Make sure ...
  4. If ... then it passes. ✅
  5. If ... then it fails. ❌

Developers

Rule text developers must follow.

Explanation of rule text.

✅ Do

Good Code Example

See the Pen Heading Levels - Good Example by Paul J. Adam (@pauljadam) on CodePen.

Live Good Code Example

Heading Levels - Good Example

❌ Don't

Bad Code Example

See the Pen Heading Levels - Good Example by Paul J. Adam (@pauljadam) on CodePen.

Live Bad Code Example

Heading Levels - Bad Example

Testing for Accessibility

Using Web Inspector
  1. Right Click > Inspect ... on the page.
  2. Make sure ...
  3. Make sure ...
  4. If ... then it passes. ✅
  5. If ... then it fails. ❌
  6. If ... then it passes. ✅
  7. If ... then it fails. ❌
Using Screen Reader
  1. Use the screen reader to navigate to ...
  2. Make sure ...
  3. Make sure ...
  4. If ... then it passes. ✅
  5. If ... then it fails. ❌

Disabilities Affected

Assistive Technologies Applicable

Design System Documentation

Heading | Duet Design System

ARIA Design Patterns

N/A (Don't use ARIA for headings!)

WCAG Success Criteria

Success Techniques for WCAG

Failure Techniques for WCAG