docsifyjs / docsify

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

Fix: Accessibility roles and aria labels #2304

Closed jhildenbiddle closed 10 months ago

jhildenbiddle commented 10 months ago

Summary

Improves site accessibility by assigning proper roles and aria attributes to elements by implementing all non-breaking recommendations from #2295.

Note: You may have to unmute the videos below to hear VoiceOver audio.

Before

https://github.com/docsifyjs/docsify/assets/442527/67f4febc-447d-4caf-8762-a129ac9e5d83

After

https://github.com/docsifyjs/docsify/assets/442527/87868a2b-41f4-4908-8ad5-807ce3aff746

Related issue, if any:

2295

What kind of change does this PR introduce?

Accessibility Fix Feature

Does this PR introduce a breaking change?

No

Tested in the following browsers:

vercel[bot] commented 10 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docsify-preview ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 17, 2023 1:28pm
jhildenbiddle commented 10 months ago

Are there any other elements that could possibly need aria labels?

See #2254.

There is another issue I'd like to resolve, but I don't think it will be possible without a breaking change...

The hyphens used in our sidebar navigation are rendered as ::before pseudo content. As far as screen readers are concerned, this is content that should be read just like any other content on the screen. For example:

Quick start
- Initialize
- Writing content
- Preview your site
- Manual initialization
- Loading dialog

The result is that links are announced as follows using macOS VoiceOver:

"Link. Quick start", "Hyphen. Link. Initialize", "Hyphen. Link. Writing Content." "Hyphen. Link. Preview your site."

Ideally, the hyphen would don't be announced.

I don't think this is a big deal though, especially if we intend to update our UI in the relatively near future. My preference is to merge these changes without introducing breaking changes and address the hyphen issue when we tackle UI updates.