Skip to content

Accessibility guidelines #309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Accessibility guidelines #309

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
54a3f1f
Fixes misspelled word.
ViniciusALS Jan 24, 2025
b4b4318
Improves clarity by adding commas where missing
ViniciusALS Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions Accessibility-Guidelines.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@ If the component is introducing colors make sure all colors pass the required co

### Keyboard navigation

Every actionable element in your component needs to be keyboard navigable, or there needs to be a great keyboard alternative. No functionality should only be accessed by mouse. Focus movement in your experience should go in a naturaly visual way. Focus can also be moved using arrow keys to save on tabs tops - `ActionBar` is doing that right now.
Every actionable element in your component needs to be keyboard navigable, or there needs to be a great keyboard alternative. No functionality should only be accessed by mouse. Focus movement in your experience should go in a natura visual way. Focus can also be moved using arrow keys to save on tabs tops - `ActionBar` is doing that right now.

### Aria labels

When an element gets focus, a screen reader will read something if the element has an `aria-label` attribute set. Set an informative `aria-label` attribute on the element that gets focus. `aria-label` should be informative but concise. Always make sure to put the most important information to the front of the `aria-label` so if users skip the announcement they first hear the important stuff. When there are multiple things to express in the aria label `,` separate them. For example, here's an `aria-label` of one Breakpoint: `main.js 12, ~/Development/vscode/src/main.js`. First the most important information: filename and line number, and then comma separated additional details.
When an element gets focus, a screen reader will read something if the element has an `aria-label` attribute set. Set an informative `aria-label` attribute on the element that gets focus. `aria-label` should be informative but concise. Always make sure to put the most important information to the front of the `aria-label` so if users skip the announcement they first hear the important stuff. When there are multiple things to express in the aria label `,` separate them. For example, here's an `aria-label` of one Breakpoint: `main.js 12, ~/Development/vscode/src/main.js`. First, the most important information: filename and line number, and then comma separated additional details.

### Aria alerts

Ideally aria announcements are done as focus moves in VS Code, however in some experiences that is not possible (e.g. parameter hints). In those cases you our helper method `aria.alert` to announce. This should be used as a workaround, since we can not control when the screen reader announces these alerts.
Ideally, aria announcements are done as focus moves in VS Code, however in some experiences that is not possible (e.g. parameter hints). In those cases you our helper method `aria.alert` to announce. This should be used as a workaround, since we can not control when the screen reader announces these alerts.

### Aria roles
It’s best to use a native HTML control if possible, but roles are available when we are building custom components.
Expand Down