Semantically Appropriate Markup of Headings for Content Flow and Accessibility

Question

I have a design that has a section that looks like the following:

As with anything, this could be marked up in several ways:

<section>
    <header>
        <p>About Area Title<p>
        <h2>Lorem ipsum[...]</h2>
    </header>

    <p>Lorem ipsum dolor sit amet[...]</p>
    <!-- ... -->
</section>

<!-- OR -->

<section>
    <p>About Area Title<p>
    <h2>Lorem ipsum[...]</h2>
    <p>Lorem ipsum dolor sit amet[...]</p>
    <!-- ... -->
</section>

<!-- OR -->

<section>
    <h2>About Area Title<h2>
    <h3>Lorem ipsum[...]</h3>
    <p>Lorem ipsum dolor sit amet[...]</p>
    <!-- ... -->
</section>

What would be the the best solution (might not be listed above) that not only is semantically correct but still preserves content flow and hierarchy for screen readers, bots, etc.?

There is nothing that you can do to make it more readable by screen readers. If you want to make your site accessible, you might want to check out mdn and they will give you some ideas. — , Mar 03 '21 at 14:18
@TobyHarnish That's incorrect. Using correct markup greatly influences how readable a site is by screen readers — Sean, Mar 03 '21 at 17:09

GrahamTheDev · Accepted Answer · 2021-03-19T18:10:04.457

I have an option for you not in the list.

The reason I would recommend this is because of how screen reader users navigate a page, majority using headings and if you did it with a separate <p> to the heading that information may get missed (I am assuming that the "About Area Title" is significant here.)

<section aria-labelledby="heading-a">
    <h2 id="heading-a">
        <span>About Area Title</span>
        <span class="visually-hidden">:</span>
        Lorem ipsum[...]
    <h2>
    <p>Lorem ipsum dolor sit amet[...]</p>
    <!-- ... -->
</section>

Now the above is assuming that the "About Area Title" bit makes sense as part of the heading for the section (which logically it should in most circumstances).

What we then do is apply styling to both make the <span> smaller and to implement the visually hidden class to hide the : we use as a separator.

The final thing is that it is a good practice to label a section so we just point it at the heading for that section using aria-labelledby and a corresponding ID on the heading.

The following rough example shows you what I mean.

h2{
    font-size: 2.5rem;
}
h2>span{
    font-size: 1rem;
    display: block;
}
.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<section aria-labelledby="heading-a">
    <h2 id="heading-a">
        <span>About Area Title</span>
        <span class="visually-hidden">:</span>
        Lorem ipsum[...]
    </h2>
    <p>Lorem ipsum dolor sit amet[...]</p>
    <!-- ... -->
</section>

To your point, "I am assuming that the 'About Area Title' is significant here", it is and it isn't. It's important in the same way "Chapter 5" is important in a book. It gives you context for where you are within the page, but it doesn't really say anything of note. — Charles Punchatz, Mar 03 '21 at 23:01
It is significant enough then as anything relating to "where you are" should be in the heading, that is it's main purpose, to make navigation easier. In that case the above solution is *almost* certainly your best option. — GrahamTheDev, Mar 04 '21 at 08:13

Semantically Appropriate Markup of Headings for Content Flow and Accessibility

1 Answers1