An error occurred while fetching folder content.
Jeremy Prevost
authored
Adds accessible nav elements for nested pages Why are these changes being introduced: * The current links to show/hide the nested pages use a visual only svg image with no accessible affordance provided so screenreaders will not be able to provide appropriate context for users as to what they should expect when clicking these links * You can see the problem by running a tool like ANDI on the current main branch of this repository and then running it again on this branch. ANDI shows what a screenreader would read. * You can also use a tool like Voiceover to hear the importance of what this introduces to users that use that technology. Before this change, Voiceover would read all of these navigation links as "link image just-the-docs" but with this change it will read `link image toggle links in <categoryName> category` Relevant ticket(s): * This was discussed as part of the larger WCAG compliance ticket https://github.com/just-the-docs/just-the-docs/issues/566 How does this address that need: * This adds an `aria-label` to the link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label Document any side effects to this change: It appears it might be prefereable to use `aria-labelledby` whenever possible, but from what I can tell these links are just the visual cue of the svg with no other affordance given to users to understand what they'll do so there is nothing to point `aria-labelledby` at. An `svg` title was considered, but in reading more about it it seemed like `aria-label` was more appropriate as it puts the label on the `a` rather than the `svg` which feels more accurate. * https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby Co-authored-by:Matt Wang <matt@matthewwang.me>
Name | Last commit | Last update |
---|---|---|
.. |