Cómo usar los encabezados correctamente

Muy fácil de entender el artículo How to structure headings for web accessibility que incluye varios ejemplos:
When is a heading not a heading? Serious question, the answer lies behind one of the most common accessibility problems on the web.
Headings are much more than a big bold title, they provide a solid structure to the webpage. Think of headings as an outline of your webpage.
The structure should be portrayed both in a visual and technical manner, so people can see the structure, and screen readers are able to identity the structure in order to read it out.
Users who can see the page decide within seconds whether or not the content is relevant to them by skimming through headings, glancing over sub-headings keeping an eye out for significant keywords. Breaking up content with headings allows the page to be easily scanned by the user
Without a heading structure, you force users to do extra work to find the information they’re looking for, who has the time and luxury?
From an accessibility point of view the structure in the code should align with the visual presentation and make sense as a “table of contents” for the page.
Use headings to introduce content, they are labels not statements.
Dos buenos ejemplos:

Y un mal ejemplo:


Entradas populares de este blog

accessiBe, la herramienta mágica

Las cinco reglas de ARIA