Conversation
| <hr class="d-none d-md-block my-2 ms-3" /> | ||
| <div class="collapse bd-toc-collapse" id="tocContents"> | ||
| <nav id="TableOfContents"> | ||
| <nav id="TableOfContents" aria-labelledby="docs-tocs"> |
There was a problem hiding this comment.
I'm not entirely sure, but just from reading the code, it looks like:
- On mobile (
d-md-none), we display a button with the text 'On this page'. - On desktop (
d-none d-md-block), we display a<strong>element with the same text.
The aria-labelledby attribute points to the <strong> element, which is hidden on mobile.
Doesn't that mean screen reader users on mobile won't get the correct label, since the referenced element isn't visible?
There was a problem hiding this comment.
I don't have any issue on my side using NVDA on Firefox/Chrome. If you prefer I can add an aria-label
There was a problem hiding this comment.
It looks a bit odd in the code, but hey—if it works, it works! 😄
@patrickhlauke, curious to hear your thoughts on this approach?
There was a problem hiding this comment.
a priori, that looks kosher to me
There was a problem hiding this comment.
just tested just with Chrome/VO/iOS and yes, it works fine there too (I believe this is that special behaviour where aria-labelledby/aria-describedby do still have access to element content, even when it's display:none'd
3 participants
Description
Add a label to the
<nav>.Motivation & Context
Some a11y improvements according to https://www.w3.org/WAI/tutorials/page-structure/labels/.
Type of changes
Checklist
npm run lint)Live previews
Related issues
NA