search

docsifyjs / docsify

🃏 A magical documentation site generator.
https://docsify.js.org
MIT License
27.47k stars 5.67k forks source link

Accessibility - current page in sidebar should have aria-current="page" #2226

Closed kburk1997 closed 10 months ago

kburk1997 commented 1 year ago

Feature request

Problem or desire

Currently, screen readers such as VoiceOver, JAWS, or NVDA cannot differentiate between selected and non-selected links.

Proposal

Use aria-current="page" on the selected link, and leave non-selected links as-is

Implementation

DOM tree: Screenshot of DOM tree with active link highlighted. Active link has aria-current="page"

VoiceOver screen recordings:

Without aria-current:

https://github.com/docsifyjs/docsify/assets/11298269/873fdfe3-6a95-43d5-a417-7d34799b10b0

With aria-current:

https://github.com/docsifyjs/docsify/assets/11298269/87b43a78-8c36-4c63-a71c-9b0f880a1d1a

Reference: MDN - aria-current

jhildenbiddle commented 11 months ago

Thanks for creating the issue, @kburk1997!

I've created a draft PR here: #2254. In that PR you will find a preview link which will allow you to review the changes:

CleanShot 2023-10-17 at 08 59 27@2x

Before I mark this PR as ready for review by the maintainers, I would love to get your thoughts and/or feedback.

Thanks!