-
-
Notifications
You must be signed in to change notification settings - Fork 8.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Inaccessible markdown heading links #8336
Comments
Makes sense, thanks for reporting.
Is this mandatory or an official a11y reco? Many other solutions are not adding the link on the full heading, see for example:
Personally, I don't find the MDN implementation pleasant to look at for a regular user without any disability, and would prefer to keep the existing pattern and just fix the title, is it fine? Note we already have a translated anchor title: <a
className="hash-link"
href={`#${id}`}
title={translate({
id: 'theme.common.headingLinkTitle',
message: 'Direct link to heading',
description: 'Title for link to heading',
})}>
​
</a> Do you have a recommendation for the label so that we do not have to "rewrite" all the existing translations from scratch? (I personally can only translate EN + FR) Is something like "Direct link to heading - {headingLabel}" good enough? |
Thank you for your reply! IMHO it would be a violation of the WCAG success criterion 2.4.4. Link Purpose (In Context) (A), however, the user experience for users of assistive technologies is currently as described, so any approach that results in links having an accessible and meaningful name would be fine. There is a good article about this problematic: https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/. The text you're suggesting for the title is great. The main problem is we cannot use the |
What I see in practice is that tools like VoiceOver will announce better if the link has aria-label rather than using title. Isn't this a good-enough solution? Duplicating the link title in a hidden element feels like a weird solution to me 🤷♂️ Will read that carefully when I have time but if anyone can suggest a good-enough solution that does not involve useless hidden child elements duplication + making the whole text the anchor link, I'd be happy to implement it fast. |
Can you tell exactly how we violate the spec according to you? Unfortunately I don't have much time to read in details the whole docs 😅 |
I didn't suggest duplicating the link title in a hidden element - the approach I suggested is to wrap the link inside the heading to have just one text, optionally with also the <h2 id="fast-track">
<a href="#fast-track" title="Direct link to Fast track">Fast track</a>
</h2> This way you can avoid extra elements and the screen reader announces something like "Heading level two, Fast track, link". The downside of this approach is some users might be confused about heading links. Another approach can be the <h2 id="fast-track">
Fast Track
<a class="hash-link" href="#fast-track" aria-label="Direct link to Fast track">#</a>
</h2> Either of these approaches should be fine. Regarding the specs, in short, they say: "The purpose of each link can be determined from the link text or from the link text together with its programmatically determined link context". While one can argue if the text inside of the heading is a programmatically determined context for the link or not, it's always the best practice for links to have a unique text because of user experience. That's why links with text like "click here" or "read more" are not considered best practice, because users then need to scan the surrounding content to learn about the link context. At the moment, the text of all hash links is just "#". Sorry, I missed your points about the other solutions before:
On https://squidfunk.github.io/mkdocs-material/getting-started/, the HTML structure is: <h2 id="installation">
Installation
<a class="headerlink" href="#installation" title="Permanent link">¶</a>
</h2> The issue here is the link does not have a unique accessible name. Screen readers will try to read the "¶" character, and a few of them, at best, will read only "Permanent link" (but permanent link to what?), because as previously mentioned, On https://vitepress.vuejs.org/guide/what-is-vitepress, the HTML structure is: <h1 id="what-is-vitepress" tabindex="-1">
What is VitePress?
<a class="header-anchor" href="#what-is-vitepress" aria-hidden="true">#</a>
</h1> There are different issues. First of all, Thank you for taking the time looking to this, really. I realize it can be quite tricky and complex. I am currently building a site dedicated to web accessibility using Docusaurus, and I'd greatly appreciate if accessibility issues and difficulties can be handled, or optionally have control over the markup so I can adjust it. |
Thanks for the explanations!
I guess we can move on and just add this new aria-label then, that looks like a good enough solution
Not saying those linked examples are good accessibility examples, just wanted to illustrate other docs sites preferring not having clickable anchor headings.
We also appreciate having a base of users caring about accessibility, as this helps up improve on topics we may not have expertise on 😄
In any case, you should be able to swizzle headings components and implement your own markup, but we should have good accessibility by default. If aria-label is not good enough for you, you can swizzle and make it use heading anchor links instead. |
Thanks a lot, much appreciated! If |
Hi @slorber! Is this something the community can fix or you would like to work on it? |
You can submit a PR if you want 🙌 |
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.Description
Heading hash links in Markdown docs are missing the accessible name. Screen reader users who tab through the page by keyboard and focus on the links hear only "Direct link to heading" (the text inside the
title
attribute of hash links).Also, when users of screen readers populate a list of links on the page, it is showing the following:
Basically, they do not know where the links will take them since there is no meaningful text content.
Reproducible demo
https://docusaurus.io/docs#fast-track
Steps to reproduce
Expected behavior
The hash links should have an accessible name, ideally the heading content, so screen reader users know where the links are pointing to.
The suggestion for the new HTML structure of a sample link:
The implementation of the
#
character can be still made on hover, similarly as on MDN.Actual behavior
The hash links have no accessible name (no unique text content) so screen reader users do not know where the links are pointing to.
The current HTML structure of a sample link:
Your environment
Self-service
The text was updated successfully, but these errors were encountered: