From 54a3f1f3afca0fad442e2f559ace99e8bdc225da Mon Sep 17 00:00:00 2001 From: Vinicius A L Souza Date: Fri, 24 Jan 2025 08:54:57 -0300 Subject: [PATCH 1/2] Fixes misspelled word. --- Accessibility-Guidelines.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Accessibility-Guidelines.md b/Accessibility-Guidelines.md index efd86f34fb..006543753e 100644 --- a/Accessibility-Guidelines.md +++ b/Accessibility-Guidelines.md @@ -16,7 +16,7 @@ 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 From b4b4318fdc27aa10f10201ff16906d7fdec3d6c8 Mon Sep 17 00:00:00 2001 From: Vinicius A L Souza Date: Fri, 24 Jan 2025 08:55:39 -0300 Subject: [PATCH 2/2] Improves clarity by adding commas where missing --- Accessibility-Guidelines.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Accessibility-Guidelines.md b/Accessibility-Guidelines.md index 006543753e..aadffec51e 100644 --- a/Accessibility-Guidelines.md +++ b/Accessibility-Guidelines.md @@ -20,11 +20,11 @@ Every actionable element in your component needs to be keyboard navigable, or th ### 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.