Search code examples
accessibilityscreen-readers

Using multiple, named section landmarks within main - beneficial or superfluous?


As a non-screenreader user, I feel like adding named sections to a page would increase ease-of-navigation as would bolster any existing heading structures. Landmarks can be quickly cycled through via keyboard by screenreader shortcuts e.g. 'd' in NVDA, providing a good summary of a page.

Example 1 shows a UK government page (which obviously must be highly accessible), where the main content is in a <main> tag containing multiple <section> tags containing headings and lists. The screenshot shows an overlay showing the landmarks - one can see that the search bar has its own landmark, however subsequent sections don't (they can be navigated to by other means, of course). If I navigate this via screen reader, it takes a long time to tab or cycle through the lists of headings (maybe there is a way to skip these that I'm unaware of?)

Example 2 shows the same site but with named regions (via aria-label) which means that each section can be navigated to using landmarks - a screenreader (NVDA for example) reads out "Topics region Topics heading level 2", which does seem superfluous but does seem to make navigation more agile or atleast being able to audit/summarise a site.

My question is whether example 2 is beneficial or, on the flipside, perhaps even detrimental to the a11y experience?

Any thoughts appreciated

Example 1

Example 1 - no named sections

Example 2

Example 2 - named sections


Solution

  • Example 2 is better because of the additional way a screen reader can navigate (by landmark). There is no drawback to example 2 unless there are so many <section> elements that it defeats the purpose of having just a "handful" of landmarks to make it quick to jump to part of the page.

    I'm surprised the <section> elements don't have an aria-label. Without the label, the <section> is not considered a landmark.

    https://w3c.github.io/html-aria/#el-section

    HTML element: <section>

    role=region if the section element has an accessible name

    Otherwise, role=generic

    Why go to the trouble of having a <section> if the user can't benefit from it?

    If I navigate this via screen reader, it takes a long time to tab or cycle through the lists of headings (maybe there is a way to skip these that I'm unaware of?)

    There are lots of <h3> elements and if you are navigating using the H key, then yes it'll take a while to go through all the headings (h1, h2, h3, h4, etc). However, you can also navigate by specific heading levels using 1, 2, 3, etc. So if you want to skip over all the <h3> elements, you can navigate with 2 to quickly jump to each <h2> before all the <h3>'s.