Headings

Screen-readers often 'scan' a website through its headings. More often than not, headings are a 'miss' due to lack of consistency in its heading structure among components.

Heading Structure

Recommendations for headings on our Phase2 projects include:

  • Hero / Masthead Component:<h1>

  • All other components: <h2>

Rationale

If a heading is styled in specific manner, then that is separate from the DOM treatment. The CSS rules are in effect to present them as such, but "under the hood" in the DOM, it is semantically set as an <h2>.

This safeguards against content editors who, for visual purposes, may reorganize content on a page.