Do multiple h1's cause screen readers problems

问题:

When I put a website I am building through a W3C checker it asks me to consider only using h1's as a top level heading and points out a section where I have a h1 inside of a section. It also mentions that screen readers will treat them all as top level elements, however, according to HTML5 specs, sections effectively "reset" the headings so you can start another hierarchy from 1-6 within them.

Should I only be using h2-h6 within sections if we are trying to focus on W3C validation and accessibility? Or is this warning incorrect?

回答1:

Despite the fact that it's not gramatically incorrect to reset headings level whenever you have a new section, it's a good habit to follow the advice given by the tool you are using and implement a heading hierarchy correctly structured within the full document.

For example, some screenreader might give you the ability to use some shortcut to go the the next h1 heading using some shortcut, and you can't suppose that the implementation would be the same in every screen reader. Some might chose to go the next h1 inside in the same section, some might chose to go to the next h1 in the DOM order.

回答2:

Using h1 everywhere is valid (if sectioning elements are used correctly), but the HTML5 spec encourages authors to use heading elements of the rank corresponding to the section’s nesting (h1-h6).

Why encouraging not to use h1 everywhere, although this can be beneficial? Most likely because not all relevant user agents (like screen readers) support the HTML5 outline algorithm.

So if you want to support screen readers that don’t support HTML5 and/or the outline algorithm, you may want to follow the advice to use heading elements of the appropriate rank.