Headings are read twice by VoiceOver

[unindented]

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

On macOS, the VoiceOver screen reader reads all headings twice, which is very annoying.

Here's a recording using Safari + VoiceOver:

docusaurus_safari_voiceover.mp4

And here's a recording using Chrome + VoiceOver:

docusaurus_chrome_voiceover.mp4

Reproducible demo

No response

Steps to reproduce

1. Go to https://docusaurus.io/docs
2. Activate VoiceOver with Cmd + F5
3. Press <leader> + A (usually Ctrl + Alt + A)

Expected behavior

I'd expect each heading to only be read once.

Actual behavior

Each heading is read twice.

Your environment

Official Docusaurus website.

Self-service

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

[slorber]

Hey

I'm not an accessibility expert, do you have any idea why this happens?

We did some accessibility changes to the headings here: #8336

cc @zmrhaljiri

[unindented]

I'm no expert either, but I've noticed that headings on MDN don't have that problem.

The a11y trees look slightly different. Here's Docusaurus (heading name === static text + link name) :

And here's MDN (heading === link name === static text):

[thats-sarthak]

Is this issue open ?? If yes please assign me

[Josh-Cena]

Please stop asking for issues. We don't assign people. If you want to contribute, just send a PR.

[srapilly]

Heading links have an accessible name of "Direct link to [Heading title]", each link is inside the heading, so the accessible name of each heading for assistive technologies will concatenate the heading name and link name.

I think we could just put the link after the heading in the DOM as a first step(it's still quite verbose) On the MDN website, they just make the heading text as a link which could be a solution, but this makes it harder to select the heading text.

Nice article that explains different solutions with their pros and cons https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/ and related GitHub issue valeriangalliat/markdown-it-anchor#82