Checkpoints - Do not have multiple headings with identical text
Why is this important?
Headings give structure to a web page. This structure is both visual and technical, meaning that a human can see it (or hear it, more on that later) and a machine can understand it. This structure is like an outline of the page. Descriptive headings allow screen-reader and assistive technology users to skim the structure of a page and navigate to or skip over sections. Identical headings make it more difficult for user to navigate through the site efficiently.
A screen reader user can set the tool to read out headings only and to start reading content from a selected heading rather than starting from the top of the page. The issue with having text that are identical is that users would then not know which heading to start reading from. This causes confusion on which section provides more meaningful content.
How can I resolve this issue?
If there are two headings that have use the same text check if there is a more appropriate heading to use for one or another and change one of the headings to align better with the content that succeeds it. For cases where headings are used to define the style of an element, consider using a div or span instead of a heading if jumping to the specific text provides no additional benefit. Remember that screen reader users can also use links to jump to specific links on a page.
What topics do this checkpoint affect?
Accessibility (WCAG 2 Level AA, 2.4.6)
Can you explain how this checkpoint works?
The checkpoint examines the entire HTML source code of a page and looks at the text enclosed in Header tags <h1> to <h6>. An issue is flagged if there are any two tags where the text is identical. This is regardless if the heading is on different levels.