Blind and Visually Impaired Community
↑
5
↓
accessable html heading structure question (self.Blind)
submitted by ohLookAnotherBug
Hey,
i have been researching for quite a while on this topic, but can't find a satisfying answer, so i want to ask the ones that it actually matters for:
Can screen-readers properly navigate nested structures with section tags?
According to the html standard, the section tag is considered as a subsection of the nearest ancestor sectioning root. So a H1 tag followed by a section tag and then another H1 tag would be the same as an H1 tag followed by a H2 tag.
Are screen-readers able to handle this situation, or does it make navigation difficult?
<h1>
a
</h1>
<section>
<h1>
b
</h1>
</section>
is equvalent to:
<h1>
a
</h1>
<h2>
b
</h2>
Context: I am developing a dynamic webpage, that inserts some components conditionally. The cleanest solution for me is to wrap the component inside a <section> tag and start from h1 inside the component, since i don't have to assume any outside structure. But i'm afraid that the (semantically correct) usage of multiple H1 tags will confuse common screen-reader programs.
Since i'm composing the page dynamically, hardcoding the heading levels might cause the hierarchy levels to break
i have been researching for quite a while on this topic, but can't find a satisfying answer, so i want to ask the ones that it actually matters for:
Can screen-readers properly navigate nested structures with section tags?
According to the html standard, the section tag is considered as a subsection of the nearest ancestor sectioning root. So a H1 tag followed by a section tag and then another H1 tag would be the same as an H1 tag followed by a H2 tag.
Are screen-readers able to handle this situation, or does it make navigation difficult?
<h1>
a
</h1>
<section>
<h1>
b
</h1>
</section>
is equvalent to:
<h1>
a
</h1>
<h2>
b
</h2>
Context: I am developing a dynamic webpage, that inserts some components conditionally. The cleanest solution for me is to wrap the component inside a <section> tag and start from h1 inside the component, since i don't have to assume any outside structure. But i'm afraid that the (semantically correct) usage of multiple H1 tags will confuse common screen-reader programs.
Since i'm composing the page dynamically, hardcoding the heading levels might cause the hierarchy levels to break
zersiax 3 points 2y ago
You've stumbled across a bit of a wasp's nest, I'm afraid.
First, section elements on their own don't do anything for screenreaders; they are not announced and cannot be navigated in any meaningful manner. You can force them to be announced as navigable regions, by adding an aria-label or title to the section element, this makes it appear as a named region. See also:
$1
​
As for heading structure ...that is a painfully difficult one. On the whole, there are two schools of thought on multiple heading 1's on a single page, which is related to more than one main landmark on a page. I would argue that headings are an outline of the overall page, and therefore, using named regions is fine without resetting the heading hierarchy order. That way, people can sstill skip past the however many named regions to the subsequent heading, as there would be no other real way to quickly skip past them other than skip links otherwise. Does that help at all? :)
First, section elements on their own don't do anything for screenreaders; they are not announced and cannot be navigated in any meaningful manner. You can force them to be announced as navigable regions, by adding an aria-label or title to the section element, this makes it appear as a named region. See also:
$1
​
As for heading structure ...that is a painfully difficult one. On the whole, there are two schools of thought on multiple heading 1's on a single page, which is related to more than one main landmark on a page. I would argue that headings are an outline of the overall page, and therefore, using named regions is fine without resetting the heading hierarchy order. That way, people can sstill skip past the however many named regions to the subsequent heading, as there would be no other real way to quickly skip past them other than skip links otherwise. Does that help at all? :)
ithinknotathrowaway 2 points 2y ago
I dont have an answer for you, but I suspect it is a bad idea to do this. I dont have a working screen reader right now, but the firefox accessibility inspector shows both cases as an h1 tag.
> According to the html standard, the section tag is considered as a subsection of the nearest ancestor sectioning root. So a H1 tag followed by a section tag and then another H1 tag would be the same as an H1 tag followed by a H2 tag.
Can you link this? Now I am kind of curious about whay the spec would say this. I did a quick test here it seems the CSS style in firefox does render the second h1 tag as an h2.
More to the point, do you really have that many levels that you require the use of nested h1 tags as general purpose tags.
> According to the html standard, the section tag is considered as a subsection of the nearest ancestor sectioning root. So a H1 tag followed by a section tag and then another H1 tag would be the same as an H1 tag followed by a H2 tag.
Can you link this? Now I am kind of curious about whay the spec would say this. I did a quick test here it seems the CSS style in firefox does render the second h1 tag as an h2.
More to the point, do you really have that many levels that you require the use of nested h1 tags as general purpose tags.
ohLookAnotherBug [OP] 1 points 2y ago
ah my bad, i wanted to link the reference, but i must have forgotten. $1
The style of the heading is not relevant, as that should be disconnected anyway. The purpose, as with the example in the reference, is to make it easier to maintain, since all heading-hierarchies are self-contained.
There are also html-outliner tools that show the same, like this $1. There is also one from W3, but that requires a file or website.
The style of the heading is not relevant, as that should be disconnected anyway. The purpose, as with the example in the reference, is to make it easier to maintain, since all heading-hierarchies are self-contained.
There are also html-outliner tools that show the same, like this $1. There is also one from W3, but that requires a file or website.
SecTrono 1 points 2y ago
ok, i'll give you a few quick points to help you get started on your way.
- download NVDA and learn how to use it. its a free open source screen reader that is very popular. i think it might be the most used screen reader right now. so if you test it with NVDA you are probably going to get a pretty good idea of how accessible it is.
- in most situations you should only use the <h1> tag once on a webpage. the <h1> tag is supposed to be the title of the tag. the text in the <h1> tag should be the same or at least similar to the text in the <title> tag. text in the <title> tag should start with words that give some description of what that specific page is about. example would be <title>contact us - ohLookAnotherBug.com</title> ... <h1>contact us</h1>
- if you are changing the page dynamically you will probably want to use aria tags. my aria tags are a little rusty at the moment but something like <section role="region" aria-live="polite"> will let a screen reader know that things inside that section tag are going to be changing dynamically.
- download NVDA and learn how to use it. its a free open source screen reader that is very popular. i think it might be the most used screen reader right now. so if you test it with NVDA you are probably going to get a pretty good idea of how accessible it is.
- in most situations you should only use the <h1> tag once on a webpage. the <h1> tag is supposed to be the title of the tag. the text in the <h1> tag should be the same or at least similar to the text in the <title> tag. text in the <title> tag should start with words that give some description of what that specific page is about. example would be <title>contact us - ohLookAnotherBug.com</title> ... <h1>contact us</h1>
- if you are changing the page dynamically you will probably want to use aria tags. my aria tags are a little rusty at the moment but something like <section role="region" aria-live="polite"> will let a screen reader know that things inside that section tag are going to be changing dynamically.
This nonprofit website is run by volunteers.
Please contribute if you can. Thank you!
Our mission is to provide everyone with access to large-
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
scale community websites for the good of humanity.
Without ads, without tracking, without greed.
©2023 HumbleCat Inc • HumbleCat is a 501(c)3 nonprofit based in Michigan, USA.