diff --git a/Accessibility-Guidelines.md b/Accessibility-Guidelines.md index efd86f34fb..aadffec51e 100644 --- a/Accessibility-Guidelines.md +++ b/Accessibility-Guidelines.md @@ -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.