Accessibility: aria region around skiplink is superfluous

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I’m using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

In issue #6252, an aria region with the label “skip to main content” was placed around the “skip to main content” ‘skiplink’ which appears at the top of every docusaurus-generated page.

This was done in response to automated accessibility testing tools reporting that all page content should be contained in an aria region.

I agree that the skiplink should be contained in an aria region, but creating a dedicated aria region for the skiplink is a regression from a screen reader user’s perspective.

Aria reagions are used to divide the page into multiple blocks of content in order to facilitate easy navigation between such blocks of content by screen reader users. Note that I say blocks, not single elements. If a page were cluttered with regions containing only one or two elements, the value of using aria live regions (i.e. the ability to quickly skip a lot of clutter and ‘skim’ the page on a high level) is quickly lost.

More importantly, superfluous regions (particularly those with long labels) contribute to information overload which is a major issue when working with a complex website using a screen reader. To understand the problem I’ll quote my screen reader’s speech output:

• No region: “link skip to main content”
• With region: “skip to main content region link skip to main content [line break] out of region”

In summary: this region not only doubles the number of words I have to listen to, but also introduces a line break to my “view” of the page.

Long story short:

• The dedicated region around the ‘skip link’ should be removed
• The skip link should be placed in the banner region

Reproducible demo

No response

Steps to reproduce

Use any docusaurus-generated page with a screen reader

Expected behavior

Skiplink is contained within the aria banner region

Actual behavior

Skiplink has a dedicated aria region, complicating navigation and causing screen readers to read a lot of superfluous information

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used:
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

• I’d be willing to fix this bug myself.

[BenDMyers]

I’m definitely on the side of favoring real experiences over automated tools.

I’ve been diving into issues on the axe-core repo since my last comment, and it seems like axe-core already tries to intuit which links are skip links and exempt them from the regions rule as is. I think their heuristics generally depend on the skiplinks having an in-page fragment for an href. I’m not entirely sure why @JoshuaKGoldberg got a warning about this, but I wonder if the fallback hash changes from #6411/#8204 since might have made it so Docusaurus skiplinks would now pass Axe checks if revalidated. If so, that’s a major vector of automated accessibility scans you wouldn’t have to worry about.

Chances are, other non-Axe automated accessibility scanning tools might still flag this as false positives, but I think the churn would be much less since Axe is so popular.

[timveld]

Interesting discussion.

Most screen reader users will not notice the difference between the skiplink being “on its own” or in the header region. And I see no strong objective ground (in WCAG or elsewhere) for favoring one option over the other. So I think we just have to make a design choice.

Looking at other websites, most websites put the skiplink “on its own” (e.g. gov.uk, microsoft.com). Deque.com does put it in the header, but they seem to be an exception to the generally accepted best practice. This is all the more dubious given the quote from Deque university mentioned above, which includes the words “excepting skiplinks”.

As this confusion is the result of Deque’s rule and their apparent inconsistent application of that rule, I agree with the suggestion of asking Deque for their input. Therefore, I will contact Deque and ask them to reply in this thread (or I will summarize the reply I get from them here).