docsifyjs / docsify

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

Feat: Add aria attributes to sidebar toggle button and current page link #2254

Closed jhildenbiddle closed 10 months ago

jhildenbiddle commented 11 months ago

Summary

These updates align with accessibility best practices.

  1. Add aria attributes to sidebar toggle to indicate expanded/collapsed state
  2. Add aria attributes to indicate current page

Before

https://github.com/docsifyjs/docsify/assets/442527/afa88f09-8d87-4486-96c6-aea6fac08af4

After

https://github.com/docsifyjs/docsify/assets/442527/222f784e-561e-475b-9935-4acd225f61ea

Tip: Use built-in screen readers for testing on macOS and Windows

macOS VoiceOver

VoiceOver User Guide

  1. Turn VoiceOver on. ⌘ + F5
  2. Open the Rotor CTRL + ⌥ + U
  3. Use the ← and → arrow keys until you reach the "Landmark" list.
  4. Navigate the list using the ↑ and ↓ arrow keys.
  5. Press ↵ or SPACE to select to jump to the current item (rotor closes afterwards).

Windows Narrator

Complete guide to Narrator

  1. Press the Windows key + Ctrl + Enter together to start Narrator. Press these keys again to stop Narrator. On many keyboards, the Windows logo key is located on the bottom row of keys, to the left or right of the Alt key.
  2. Press the Windows key + Ctrl + N to open Narrator settings, and then turn on the toggle under Use Narrator.

Related issue, if any:

658

2226

What kind of change does this PR introduce?

Does this PR introduce a breaking change?

No

Tested in the following browsers:

vercel[bot] commented 11 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 30, 2023 5:28am
jhildenbiddle commented 10 months ago

@Koooooo-7 --

Would you mind approving this PR again? I had to merge develop which cleared your previous approvals. Thx!