Heading elements appear in a sequentially-descending order
Page headings follow a logical order without skipping levels.
Link copied!
On this page
Impact
About
Properly ordered headings that do not skip levels convey the semantic structure of the page, making it easier to navigate and understand when using assistive technologies.
Risks
Keyboard users cannot efficiently navigate your site.
Why it's important
Allows keyboard-only users and screen reader users to efficiently move through and interact with page content.
User stories
As a keyboard-only user, I want to efficiently navigate through page content without getting stuck or lost.
Code
Failing pattern:
<!-- Fail: heading level skipped -->
<h1>Agency name</h1>
<h3>Services</h3>
Passing pattern:
<!-- Pass: sequential heading levels -->
<h1>Agency name</h1>
<h2>Services</h2>
<h3>Benefits</h3>
Error
ScanGov messaging when a site fails a standard:
Failed: Heading elements appear in a sequentially-descending order
Examples
Failing pattern:
<h1>Agency name</h1>
<h3>Benefits</h3> <!-- skips h2 -->
Passing pattern:
<h1>Agency name</h1>
<h2>Services</h2>
<h3>Benefits</h3>
Guidance
Indicators
Related
- [accesskey] values are unique
- [aria-*] attributes match their roles
- Uses ARIA roles only on compatible elements
- button, link, and menuitem elements have accessible names
- ARIA attributes are used as specified for the element's role
- Deprecated ARIA roles were not used
- Elements with role="dialog" or role="alertdialog" have accessible names
- [aria-hidden="true"] is not present on the document <body>
- [aria-hidden="true"] elements do not contain focusable descendents
- ARIA input fields have accessible names
- ARIA meter elements have accessible names
- ARIA progressbar elements have accessible names
- Elements use only permitted ARIA attributes
- [role]s have all required [aria-*] attributes
- Elements with an ARIA [role] that require children to contain a specific [role] have all required children
- [role]s are contained by their required parent element
- [role] values are valid
- Elements with the role=text attribute do not have focusable descendents
- ARIA toggle fields have accessible names
- ARIA tooltip elements have accessible names
- ARIA treeitem elements have accessible names
- [aria-*] attributes have valid values
- [aria-*] attributes are valid and not misspelled
- Buttons have an accessible name
- The page contains a heading, skip link, or landmark region
- Background and foreground colors have a sufficient contrast ratio
- <dl>'s contain only properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements
- Definition list items are wrapped in <dl> elements
- Document has a <title> element
- ARIA IDs are unique
- No form fields have multiple labels
- <frame> or <iframe> elements have a title
- <html> element has a [lang] attribute
- <html> element has a valid value for its [lang] attribute
- <html> element has an [xml:lang] attribute with the same base language as the [lang] attribute
- Image elements have [alt] attributes
- Image elements do not have [alt] attributes that are redundant text
- Input buttons have discernible text
- <input type="image"> elements have [alt] text
- Form elements have associated labels
- Links are distinguishable without relying on color
- Links have a discernible name
- Lists contain only <li> elements and script supporting elements (<script> and <template>)
- List items (<li>) are contained within <ul>, <ol> or <menu> parent elements
- The document does not use <meta http-equiv="refresh">
- [user-scalable="no"] is not used in the <meta name="viewport"> element and the [maximum-scale] attribute is not less than 5
- <object> elements have alternate text
- Select elements have associated label elements
- Skip links are focusable
- No element has a [tabindex] value greater than 0
- Tables have different content in the summary attribute and <caption>
- Touch targets have sufficient size and spacing
- Cells in a <table> element that use the [headers] attribute refer to table cells within the same table
- <th> elements and elements with [role="columnheader"/"rowheader"] have data cells they describe
- [lang] attributes have a valid value
- <video> elements contain a <track> element with [kind="captions"]
- All heading elements contain content
- Identical links have the same purpose
- Document has a main landmark
- Elements with visible text labels have matching accessible names
- Tables use <caption> instead of cells with the [colspan] attribute to indicate a caption
- <td> elements in a large <table> have one or more table headers
- Image aspect ratio
- Valid doctype
- Character encoding
- Accessibility grades on Project ScanGov
- ScanGov Accessibility
On this page