Html Question posted in
Some basic documentation can be found here.

Html – Should an h3 or h4 ever go above an h2 if its semantic meaning is less significant?

I have a component that has an eyebrow and below the eyebrow there is a larger heading. The heading is larger and more significant to the overall theme of the component. The eyebrow is more supplementary.

Would it be allowable from an accessibility perspective to use an h3 or h4 for the eyebrow and an h2 for the heading text beneath it, even though the eyebrow is technically above the header?

For example,

 <section> 
   <h3 style="font-size: 12px">Eyebrow</h3> 
   <h2 style="font-size: 32px">Heading Element</h4>
 </section>
Tags:

2

Answers


  1. 0

    Yes, from an accessibility perspective, it is perfectly acceptable to use an <h3> or <h4> for the eyebrow and an <h2> for the main heading, even though the eyebrow is positioned above the main heading in the visual layout. The key factor here is to ensure that the heading levels correctly represent the semantic structure and importance of the content within the document’s overall hierarchy, rather than their visual presentation on the page.

    Here are a few points to consider when implementing this structure:

    1. Semantic Hierarchy: Ensure that the heading levels reflect the semantic importance and relationship of the sections they represent. The main heading (<h2>) should represent a primary section or topic, while the eyebrow (<h3> or <h4>) serves as a subordinate element, providing additional context or a subheading.

    2. Use of ARIA Labels: If there’s any concern that the relationship between the eyebrow and the main heading might not be clear, you can use ARIA attributes to explicitly define roles and relationships. However, this is typically not necessary if the headings are properly structured.

    3. Consistency and Clarity: Maintain consistent structure throughout your document or site to avoid confusing users, especially those using screen readers. The eyebrow should consistently use a lower heading level than the main content heading across all similar components.

    4. CSS Styling: Use CSS to style these elements according to their visual importance without affecting their semantic importance. The eyebrow can be styled to be visually less prominent despite using a higher heading level tag like <h3> or <h4>.

    5. Skipping Levels: Avoid skipping heading levels (e.g., jumping from <h2> directly to <h4> without an <h3> in between), as this can confuse screen reader users. However, in your case, using an <h3> or <h4> for the eyebrow and <h2> for the main heading does not involve skipping levels unnecessarily.

    By following these guidelines, you can ensure that your document is accessible while maintaining the visual hierarchy and design intent of your components.

    Login or Signup to reply.
  2. 0

    It can certainly be acceptable, but with caution.

    Navigating by heading is one of the preferred way to navigate with a screen reader.

    • You can navigate from heading to heading, linearly, regardless of their level, in DOM order. Doing so, there is no problem, the H3 before the H2 will be found.
    • You can also navigate by headings of a given level, skipping all headings of lower levels. In this case, with your structure, there is a risk to completely miss the H3 when going through H2s.

    So, if missing the H3 isn’t that important and don’t prevent from understanding the content in general, why not.
    But if the H3 shouldn’t be missed, putting it before the H2 is a very bad idea.

    IF the H3 is before the H2 just because of visual design and hadn’t really to be read before the H2, you should consider your choice very carefully. You can probably change the structure to put that H3 after the H2 and adapt your CSS accordingly.
    If the H3 is after the H2, there is a lot less risks to miss it, and so it’s much better for accessibility.

    So, to wrap up: acceptable probably yes, recommended, certainly not.

    Finally, note however that skipping levels, i.e. going directly from H2 to H4 without H3 is definitely incorrect. This is normally flagged by any decent automated tool.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search