-
Couldn't load subscription status.
- Fork 35.8k
Screen Reader Test
Aiday Marlen Kyzy edited this page Mar 3, 2025 · 7 revisions
This page can be used to smoke test the screen reader usage with VS Code. In the following always have screen reader accessibility mode toggled on.
- For macOS use VoiceOver. The gold standard is XCode.
- For windows use NVDA. The golden standard is Visual Studio.
In the following tests use the following example code:
Example Code
export interface IRange { start: number; end: number; } export interface IRangedGroup { range: IRange; size: number; } export namespace Range { /** * Returns the intersection between two ranges as a range itself. * Returns `{ start: 0, end: 0 }` if the intersection is empty. */ export function intersect(one: IRange, other: IRange): IRange { if (one.start >= other.end || other.start >= one.end) { return { start: 0, end: 0 }; } const start = Math.max(one.start, other.start); const end = Math.min(one.end, other.end); if (end - start <= 0) { return { start: 0, end: 0 }; } return { start, end }; } export function isEmpty(range: IRange): boolean { return range.end - range.start <= 0; } export function intersects(one: IRange, other: IRange): boolean { return !isEmpty(intersect(one, other)); } export function relativeComplement(one: IRange, other: IRange): IRange[] { const result: IRange[] = []; const first = { start: one.start, end: Math.min(other.start, one.end) }; const second = { start: Math.max(other.end, one.start), end: one.end }; if (!isEmpty(first)) { result.push(first); } if (!isEmpty(second)) { result.push(second); } return result; } } - Place the cursor on (1, 1). Move cursor down, move cursor up.
- Verify the screen reader reads the full first line.
macOS:
- Verify there is a black box surrounding the line that is read
- Move cursor right to (1, 2) with the right arrow. Verify it reads
e. - Move cursor right to (1, 3) with the right arrow. Verify it reads
x.
windows:
- Verify there is a black box surrounding the line that is read
- Move cursor right to (1, 2) with the right arrow. Verify it reads
x. - Move cursor right to (1, 3) with the right arrow. Verify it reads
p.
- Set the setting
editor.wordWrapColumnto 10 - Set the setting
editor.wordWraptowordWrapColumn - Place the cursor on (1, 1).
- Put cursor down once, verify it reads:
interface - Put cursor down once, verify it reads:
IRange {
macos:
- Consider the keybindings:
- Option + leftArrow to read the previous word
- Option + rightArrow to read the next word
- Place the cursor on (1, 1)
- Jump to the next word. The screen reader should read
export - Jump to the next word. The screen reader should read
interface - Jump to the previous word. The screen reader should read
export
windows:
- Consider the keybindings:
- NVDA + ctrl + leftArrow to read the previous word
- NVDA + ctrl + rightArrow to read the next word
- Place the cursor on (1, 1)
- Jump to the next word. The screen reader should read
interface - Jump to the previous word. The screen reader should read
export
Project Management
- Roadmap
- Iteration Plans
- Development Process
- Issue Tracking
- Build Champion
- Release Process
- Running the Endgame
- Related Projects
Contributing
- How to Contribute
- Submitting Bugs and Suggestions
- Feedback Channels
- Source Code Organization
- Coding Guidelines
- Testing
- Dealing with Test Flakiness
- Contributor License Agreement
- Extension API Guidelines
- Accessibility Guidelines
- Custom ESLint rules
Documentation