Should I Add Invisible <h2>'s to <sections>'s? [closed]

Question

My site has a very nice, clean, html5 semantic structure.

But here and there, I have sections that don't have any h2 tags because they are not worthy. For example, a box containing the progress bar for a networking tool. It does deserve its own separate section, but it absolutely does not need a header.

But the validator and other sites suggest all section tags need an h2 header. Given that, should I add display: none h2 headers to the few header-less section tags I have?

On the one hand, hidden content for the sake of making 'validators' and search engines happy seems like bad practice. If it's not worthy of being on your page, don't put it on your page.

On the other hand, I can see a situation where someone is using a text-only browser or some kind of visually impaired screen reader (that we always hear about in HTML docs but I've never heard of in real life). In that situation, you might not know what the progress bar even is. Looking at it's source code does not make it's function clear. But looking at it graphically rendered makes it 100% clear. So in that case, an h2 tag that says "Progress Bar" would be useful to have in the source, while being invisible on the normally rendered page.

Answer 1

I think the problem starts with misusing <section> tag.

Per MDN:

The HTML element represents a standalone section — which doesn't have a more specific semantic element to represent it

A common misuse is using section as a devision element (using it as a wrapper) when really you could use a simple div.

Usage notes of <section>:

Each should be identified, typically by including a heading (- element) as a child of the element.

And

Do not use the element as a generic container; this is what is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.

About not worthy of headers sections, maybe a simple div to wrap progress bar elements can solve your problem .

With all that been said, MDN's states about <section>:

— contained within an HTML document. Typically, but not always, sections have a heading.

Which means it's not "bad HTML" ...

More: The Generic Section element

About accessibility, there are other ways to interact with users. (titles for elements, alternative text and more...)