Perceivable
WCAG 1.3.1
Level A

What is Heading-Determinable and Levels?

Headings should be programmatically determinable and follow a logical order so assistive technologies can build a useful outline.

Avoid skipping levels or relying on visual styling only. A clean structure helps users scan and navigate content quickly.

Screen reader users who navigate by headings.
Keyboard users who jump between sections.
Users with cognitive needs who depend on a clear outline.

Improves Accessibility
Better Structure
Better User Experience
Supports Compliance

Good vs Bad Examples

Use the tabs to compare the right and wrong heading hierarchy.

Logical heading structure

Example page showing a logical heading hierarchy from H1 to H3 with headings programmatically determinable.

html

<h1>Accessibility Guidelines</h1>
<h2>Headings and Labels</h2>
<h3>Determinable Heading Levels</h3>
<p>Content follows a logical outline without skipping levels.</p>

Why this is correct:

Uses semantic heading elements for each section title.
Levels are sequential with no skips.
Supports screen reader outline navigation.

Implementation Checklist

Progress0 / 6 completed (0%)

Heading elements are used for section titles.
Heading levels follow a logical order without skips.
Visual size is not used in place of semantic headings.
Page structure can be understood by screen readers.
The document outline reflects the visible structure.
Keyboard and screen reader testing confirm the hierarchy.

Knowledge Check

Answer Yes or No to test your understanding of heading hierarchy.

Score: 0 / 5 · Answered: 0 / 5

What is Heading-Determinable and Levels?

Good vs Bad Examples

Why this is correct:

Implementation Checklist

Knowledge Check

Should headings use semantic h1, h2, and h3 elements?

Is skipping heading levels acceptable when the page is visually organized?

Should headings be programmatically determinable?

Can a div with large text replace a real heading element?

Does a logical heading order help keyboard and screen reader users?

What is Heading-Determinable and Levels?

Good vs Bad Examples

Why this is correct:

Implementation Checklist

Knowledge Check

1. Should headings use semantic h1, h2, and h3 elements?

2. Is skipping heading levels acceptable when the page is visually organized?

3. Should headings be programmatically determinable?

4. Can a div with large text replace a real heading element?

5. Does a logical heading order help keyboard and screen reader users?

Should headings use semantic h1, h2, and h3 elements?

Is skipping heading levels acceptable when the page is visually organized?

Should headings be programmatically determinable?

Can a div with large text replace a real heading element?

Does a logical heading order help keyboard and screen reader users?