DEV Community: wiscer

Screen Reader Experience Mitigation on Gemini

wiscer — Sat, 07 Mar 2026 13:35:14 +0000

7 March 2026 — PageLive Project

Summary

This article describes how PageLive addresses the barriers identified in the companion Screen Reader Experience Analysis on Gemini. PageLive is a Chrome extension that operates at the browser layer, compensating for accessibility gaps without modifying the Gemini application itself. Not all barriers are fully resolved; where PageLive provides only partial mitigation, this is noted explicitly.

1. Scope

This article corresponds directly to the findings in the Screen Reader Experience Analysis on Gemini. Findings are referenced by their original numbering. Mitigations were tested using NVDA on Chrome on a Windows desktop.

PageLive can be installed for free on the PageLive chrome webstore page.

2. Mitigations

2.1 Response Completion Is Not Announced

Analysis Severity: Barrier
Mitigation Status: Addressed

PageLive monitors the page for new assistant responses and announces their availability to the screen reader. The user is notified when generation has completed and new content is ready to read, without needing to navigate to the chat area or guess whether output is still in progress.

For cases where the user wishes to retrieve a response on demand, pressing Ctrl + Shift + Enter reads the most recent Gemini response without changing navigation context. This is useful when the user has moved focus elsewhere and does not wish to traverse back to the chat area manually.

2.2 Formulas and Symbols Are Not Read by the Screen Reader

Analysis Severity: Blocker
Mitigation Status: Addressed

PageLive processes formula and symbol content within Gemini responses and exposes it in a form that the screen reader can read. Without PageLive, these elements are absent from the accessibility tree and produce no output. With PageLive, the user receives the content of formulas and symbols as part of normal response reading.

2.3 Dialog Appearance Is Not Announced

Analysis Severity: Barrier
Mitigation Status: Addressed

PageLive announces when dialogs open or close within Gemini, providing event-driven status feedback. The user is informed that a dialog has appeared without needing to navigate to discover it.

2.4 No Means of Reviewing Chat Flow in Long Conversations

Analysis Severity: Barrier
Mitigation Status: Addressed

PageLive introduces ContentMap, opened with Ctrl + M, which presents a structured summary of the prompts and responses in the current conversation. The user can navigate the list of items and press Enter on any entry to jump directly to that position in the chat history.

This provides an orientation mechanism equivalent in function to what sighted users derive from scanning the visual layout of the conversation, without requiring sequential traversal of the entire chat.

2.5 Missing Keyboard Shortcuts for Frequently Used Actions

Analysis Severity: Friction
Mitigation Status: Addressed

PageLive introduces keyboard shortcuts for the actions identified as missing in the analysis:

Action	Shortcut
Jump to chat input	`Shift + Esc`
Start a new chat	`Ctrl + Alt + O`
Delete the current chat	`Ctrl + Shift + Backspace`
Announce the last response	`Ctrl + Shift + Enter`
Open Page Info for chat navigation context	`Alt + /`

The delete shortcut opens a confirmation dialog, allowing the user to confirm or cancel before the action is completed. The Page Info dialog, opened with Alt + /, provides active chat metadata and a means of moving focus directly to the current chat in the sidebar list by pressing Enter on the chat title control.

3. Summary of Mitigations

#	Finding	Analysis Severity	Mitigation Status
2.1	Response completion not announced	Barrier	Addressed
2.2	Formulas and symbols not read by screen reader	Blocker	Addressed
2.3	Dialog appearance not announced	Barrier	Addressed
2.4	No means of reviewing chat flow in long conversations	Barrier	Addressed
2.5	Missing keyboard shortcuts for common actions	Friction	Addressed

4. Further Reading

This article is part of the PageLive project's documentation for Gemini. The findings referenced throughout this article are documented in full in the companion Screen Reader Experience Analysis on Gemini. For a full list of keyboard shortcuts and features PageLive provides for Gemini, see the PageLive for Gemini documentation.

— End of Article —

Disclaimers

This article was produced as part of the PageLive project, which develops keyboard shortcut and screen reader support for AI chat interfaces. The author develops PageLive, the extension described in this document.

PageLive can be installed for free on the PageLive chrome webstore page.

The findings, severity classifications, and testing observations referenced in this article are the author's own, based on manual testing with NVDA on Chrome. AI assistance was used solely to shape the writing style of this document.

Screen Reader Experience Analysis on Gemini

wiscer — Sat, 07 Mar 2026 13:29:21 +0000

7 March 2026 — PageLive Project

Summary

This report documents the difficulties a screen reader user encounters when using Gemini. Testing was conducted using NVDA on Chrome on a Windows desktop. While the findings are based on NVDA, the barriers described are expected to affect users of other screen readers, including JAWS, in similar ways. While Gemini is usable with a screen reader, several interactions require significant extra effort or guesswork that sighted users do not face.

1. Scope and Testing Environment

This analysis evaluates the screen reader experience on Gemini as encountered during manual testing. The scope is limited to interactions that are part of routine use: composing and reading conversations, navigating between chats, and accessing application controls.

Findings are not evaluated against WCAG criteria. The focus is on the practical experience of a screen reader user during everyday tasks.


Screen Reader	NVDA 2025.3.3.54605
Browser	Chrome 145.0.7632.117
Platform	Windows Desktop
Interface Tested	gemini.google.com web application

Findings are classified by their impact on task completion:

Blocker — The task cannot be completed.
Barrier — The task can be completed, but requires significant additional effort, guesswork, or repeated keystrokes that are not required of sighted users.
Friction — The task works as expected, but the experience is degraded in a way that compounds over extended use.

2. Findings

2.1 Response Completion Is Not Announced

Severity: Barrier

When Gemini finishes generating a response, no announcement is made to the screen reader. The response content is not placed in a live region, so the screen reader does not notify the user that new content is available or that generation has completed.

As a result, the user has no reliable way to know when it is appropriate to begin reading. The user must manually navigate to the chat area, attempt to locate the new response, and determine through repeated keystrokes whether generation has finished or is still in progress. This interaction occurs on every single exchange, making it the most consequential barrier in routine use.

2.2 Formulas and Symbols Are Not Read by the Screen Reader

Severity: Blocker

When a Gemini response contains mathematical formulas or symbolic notation, the screen reader does not read these elements. They are invisible in the accessibility tree, meaning the user receives no indication that content is present at those positions in the response.

A user relying on a screen reader cannot access any part of a response that contains formulas or symbols. For conversations involving mathematics, science, or other notation-heavy topics, this renders significant portions of Gemini's output completely inaccessible.

2.3 Dialog Appearance Is Not Announced

Severity: Barrier

When dialogs open within Gemini, the screen reader does not announce their appearance and focus is not moved into them. The user receives no indication that anything has changed on screen and must discover through navigation that a dialog has appeared.

2.4 No Means of Reviewing Chat Flow and Navigation Within Long Conversations

Severity: Barrier

Gemini does not provide a structured means for a screen reader user to review the flow of a conversation or navigate directly to a specific prompt or response within a long chat. The user must traverse the entire chat history sequentially to locate a previous exchange, with no mechanism to jump to a known position.

For sighted users, the visual layout of the conversation provides immediate orientation. For screen reader users, long conversations require a proportionally greater traversal effort with no compensating navigational aid.

2.5 Missing Keyboard Shortcuts for Frequently Used Actions

Severity: Friction

The following actions do not have keyboard shortcuts in Gemini:

Jump to the chat input field
Start a new chat
Delete the current chat
Announce the last response

Each of these actions is available through the interface but requires the user to locate the relevant control through navigation. For a sighted user, these controls are immediately visible. For a screen reader user, the location of a button is not always remembered between sessions, and finding it requires traversal through surrounding content.

The absence of shortcuts does not prevent these actions. However, the cumulative effect of repeated traversal meaningfully degrades the experience of extended use.

3. Summary of Findings

#	Finding	Severity
2.1	Response completion not announced	Barrier
2.2	Formulas and symbols not read by screen reader	Blocker
2.3	Dialog appearance not announced	Barrier
2.4	No means of reviewing chat flow in long conversations	Barrier
2.5	Missing keyboard shortcuts for common actions	Friction

4. Further Reading

This article is part of the PageLive project's documentation for Gemini. A companion article, Screen Reader Experience Mitigation on Gemini, describes how PageLive addresses the barriers identified above. For a full list of keyboard shortcuts and features PageLive provides for Gemini, see the PageLive for Gemini documentation.

— End of Article —

Disclaimers

This analysis was conducted as part of the PageLive project, which develops keyboard shortcut and screen reader support for AI chat interfaces. The author develops PageLive, a Chrome extension that addresses several of the barriers described in this report. A companion Screen Reader Experience Mitigation documents the approaches PageLive applies to each finding.

PageLive can be installed for free on the PageLive chrome webstore page.

The findings, severity classifications, and testing observations in this report are the author's own, based on manual testing with NVDA on Chrome. AI assistance was used solely to shape the writing style of this document.

Screen Reader Experience Mitigation on Grok

wiscer — Sat, 07 Mar 2026 12:52:38 +0000

7 March 2026 — PageLive Project

Summary

This article describes how PageLive addresses the barriers identified in the companion Screen Reader Experience Analysis on Grok. PageLive is a Chrome extension that operates at the browser layer, compensating for accessibility gaps without modifying the Grok application itself. Not all barriers are fully resolved; where PageLive provides only partial mitigation, this is noted explicitly.

1. Scope

This article corresponds directly to the findings in the Screen Reader Experience Analysis on Grok. Findings are referenced by their original numbering. Mitigations were tested using NVDA on Chrome on a Windows desktop.

PageLive can be installed for free on the PageLive chrome webstore page.

2. Mitigations

2.1 Response Completion Is Not Announced

Analysis Severity: Barrier
Mitigation Status: Addressed

For cases where the user wishes to retrieve a response on demand, pressing Ctrl + Shift + Enter reads the most recent Grok response without changing navigation context. This is useful when the user has moved focus elsewhere and does not wish to traverse back to the chat area manually.

2.2 The "Show All" Button in the All Chats Dialog Is Not Accessible

Analysis Severity: Blocker
Mitigation Status: Not Addressed

The inaccessibility of the "Show All" button is a limitation of the Grok application itself. PageLive operates at the browser layer and does not reconstruct or replace the All Chats dialog. The actions revealed by this button — including Switch Theme and Change Language — remain inaccessible to screen reader users.

2.3 Missing Keyboard Shortcuts for Frequently Used Actions

Analysis Severity: Friction
Mitigation Status: Addressed

PageLive introduces keyboard shortcuts for the actions identified as missing in the analysis:

Action	Shortcut
Jump to chat input	`Shift + Esc`
Start a new chat	`Ctrl + Alt + O`
Delete the current chat	`Ctrl + Shift + Backspace`
Announce the last response	`Ctrl + Shift + Enter`
Open Page Info for chat navigation context	`Alt + /`

Toggle sidebar and open chat list shortcuts are not currently provided by PageLive. Navigation to other chats still requires traversal from the point where focus lands in the sidebar.

3. Summary of Mitigations

#	Finding	Analysis Severity	Mitigation Status
2.1	Response completion not announced	Barrier	Addressed
2.2	"Show All" button in All Chats dialog not accessible	Blocker	Not Addressed
2.3	Missing keyboard shortcuts for common actions	Friction	Partially Addressed

4. Further Reading

This article is part of the PageLive project's documentation for Grok. The findings referenced throughout this article are documented in full in the companion Screen Reader Experience Analysis on Grok. For a full list of keyboard shortcuts and features PageLive provides for Grok, see the PageLive for Grok documentation.

— End of Article —

Disclaimers

PageLive can be installed for free on the PageLive chrome webstore page.

Screen Reader Experience Analysis on Grok

wiscer — Sat, 07 Mar 2026 12:36:49 +0000

7 March 2026 — PageLive Project

Summary

This report documents the difficulties a screen reader user encounters when using Grok. Testing was conducted using NVDA on Chrome on a Windows desktop. While the findings are based on NVDA, the barriers described are expected to affect users of other screen readers, including JAWS, in similar ways. While Grok is usable with a screen reader, several interactions require significant extra effort or guesswork that sighted users do not face.

1. Scope and Testing Environment

This analysis evaluates the screen reader experience on Grok as encountered during manual testing. The scope is limited to interactions that are part of routine use: composing and reading conversations, navigating between chats, and accessing application controls.

Findings are not evaluated against WCAG criteria. The focus is on the practical experience of a screen reader user during everyday tasks.


Screen Reader	NVDA 2025.3.3.54605
Browser	Chrome 145.0.7632.117
Platform	Windows Desktop
Interface Tested	grok.com web application

Findings are classified by their impact on task completion:

Blocker — The task cannot be completed.
Barrier — The task can be completed, but requires significant additional effort, guesswork, or repeated keystrokes that are not required of sighted users.
Friction — The task works as expected, but the experience is degraded in a way that compounds over extended use.

2. Findings

2.1 Response Completion Is Not Announced

Severity: Barrier

When Grok finishes generating a response, no announcement is made to the screen reader. The response content is not placed in a live region, so the screen reader does not notify the user that new content is available or that generation has completed.

2.2 The "Show All" Button in the All Chats Dialog Is Not Accessible

Severity: Blocker

The All Chats dialog in Grok contains a "Show All" button that reveals additional application actions beyond the default view. By default, only the "Create New Chat" action is visible. Activating "Show All" exposes further actions including Switch Theme, Change Language, and others.

The "Show All" button is neither perceivable nor operable by a screen reader. The button is not exposed in the accessibility tree, meaning the screen reader does not announce its presence and the user has no means of activating it through keyboard navigation.

As a result, the actions revealed by this button — Switch Theme, Change Language, and any others — are permanently inaccessible to screen reader users. The task of discovering and using these actions cannot be completed.

2.3 Missing Keyboard Shortcuts for Frequently Used Actions

Severity: Friction

The following actions do not have keyboard shortcuts in Grok:

Delete the current chat
Toggle the sidebar
Open the chat list to allow chat switching
Start a new chat
Announce the last response
Jump to the chat input field

The absence of shortcuts does not prevent these actions. However, the cumulative effect of repeated traversal meaningfully degrades the experience of extended use, particularly given the number of actions affected.

3. Summary of Findings

#	Finding	Severity
2.1	Response completion not announced	Barrier
2.2	"Show All" button in All Chats dialog not accessible	Blocker
2.3	Missing keyboard shortcuts for common actions	Friction

4. Further Reading

This article is part of the PageLive project's documentation for Grok. A companion article, Screen Reader Experience Mitigation on Grok, describes how PageLive addresses the barriers identified above. For a full list of keyboard shortcuts and features PageLive provides for Grok, see the PageLive for Grok documentation.

— End of Article —

Disclaimers

PageLive can be installed for free on the PageLive chrome webstore page.

Screen Reader Experience Mitigation on claude.ai

wiscer — Thu, 05 Mar 2026 13:03:30 +0000

3 March 2026 — PageLive Project

Summary

This article describes how PageLive addresses the barriers identified in the companion Screen Reader Experience Analysis on claude.ai. PageLive is a Chrome extension that operates at the browser layer, compensating for accessibility gaps without modifying the claude.ai application itself. Not all barriers are fully resolved; where PageLive provides only partial mitigation, this is noted explicitly.

1. Scope

This article corresponds directly to the findings in the Screen Reader Experience Analysis on claude.ai. Findings are referenced by their original numbering. Mitigations were tested using NVDA on Chrome on a Windows desktop.

PageLive can be installed for free on the PageLive chrome webstore page.

2. Mitigations

2.1 Response Completion Is Not Announced

Analysis Severity: Barrier
Mitigation Status: Addressed

For cases where the user wishes to retrieve a response on demand, pressing Ctrl + Shift + Enter reads the most recent response without changing navigation context. This is useful when the user has moved focus elsewhere and does not wish to traverse back to the chat area manually.

2.2 The "Keyboard Shortcuts" Dialog Is Not Accessible

Analysis Severity: Blocker
Mitigation Status: Partially Addressed

2.2.1 Dialog appearance not announced — Addressed. PageLive announces when the Keyboard Shortcuts dialog opens and closes, providing event-driven status feedback. The user is informed that the dialog has appeared without needing to navigate to discover it.

2.2.2 Dialog content not reachable — Not Addressed. The underlying inaccessibility of the dialog's content is a limitation of the claude.ai application itself. PageLive operates at the browser layer and does not reconstruct or replace the dialog. The list of keyboard shortcuts within the dialog remains unreachable through the virtual cursor.

Users who require this information are directed to the PageLive for Claude documentation page, which lists all available shortcuts in an accessible format.

2.3 The "More Options" Menu Does Not Announce Its Appearance

Analysis Severity: Barrier
Mitigation Status: Not Addressed

PageLive does not currently intercept the "More Options" popup menu in the chat list sidebar. The menu appearance remains unannounced, and the user still has no confirmation that a menu has appeared after pressing the button.

This remains an open barrier for screen reader users who need to access per-chat actions such as Star and Rename.

2.4 The Sidebar Lacks Sufficient Landmarks for Direct Navigation

Analysis Severity: Barrier
Mitigation Status: Partially Addressed

PageLive provides the Page Info dialog, opened with Alt + /, which surfaces active chat metadata and quick navigation context. From within the Page Info dialog, pressing Enter on the chat title control moves focus directly to the current chat in the sidebar list. This provides a reliable, repeatable path to the chat list without requiring the user to traverse the sidebar from the top.

This mitigation applies specifically to navigating to the currently active chat. Navigating to other chats in the list still requires traversal from the point where focus lands.

2.5 Missing Keyboard Shortcuts for Frequently Used Actions

Analysis Severity: Friction
Mitigation Status: Addressed

PageLive introduces keyboard shortcuts for the three actions identified as missing in the analysis:

Action	Shortcut
Jump to chat input	`Shift + Esc`
Start a new chat	`Ctrl + Alt + O`
Delete the current chat	`Ctrl + Shift + Backspace`

The delete shortcut opens a confirmation dialog, allowing the user to confirm or cancel before the action is completed.

2.6 Chat List Items Do Not Expose Metadata

Analysis Severity: Friction
Mitigation Status: Partially Addressed

The Page Info dialog, opened with Alt + /, provides metadata for the currently active chat. This reduces the reliance on the chat title alone when assessing a conversation. Metadata exposure for all items in the chat list, rather than only the active chat, is not currently provided.

3. Summary of Mitigations

#	Finding	Analysis Severity	Mitigation Status
2.1	Response completion not announced	Barrier	Addressed
2.2	Keyboard Shortcuts dialog not accessible	Blocker	Partially Addressed
2.3	"More Options" menu appearance not announced	Barrier	Not Addressed
2.4	Sidebar lacks landmarks for chat list navigation	Barrier	Partially Addressed
2.5	Missing keyboard shortcuts for common actions	Friction	Addressed
2.6	Chat list items lack metadata	Friction	Partially Addressed

4. Further Reading

This article is part of the PageLive project's documentation for claude.ai. The findings referenced throughout this article are documented in full in the companion Screen Reader Experience Analysis on claude.ai. For a full list of keyboard shortcuts and features PageLive provides for claude.ai, see the PageLive for Claude documentation.

— End of Article —

Disclaimers

PageLive can be installed for free on the PageLive chrome webstore page.

Screen Reader Experience Analysis on claude.ai

wiscer — Wed, 04 Mar 2026 07:37:34 +0000

3 March 2026 — PageLive Project

Summary

This report documents the difficulties a screen reader user encounters when using claude.ai. Testing was conducted using NVDA on Chrome on a Windows desktop. While the findings are based on NVDA, the barriers described are expected to affect users of other screen readers, including JAWS, in similar ways. While claude.ai is usable with a screen reader, several interactions require significant extra effort or guesswork that sighted users do not face.

1. Scope and Testing Environment

This analysis evaluates the screen reader experience on claude.ai as encountered during manual testing. The scope is limited to interactions that are part of routine use: composing and reading conversations, navigating between chats, and accessing application controls.

Findings are not evaluated against WCAG criteria. The focus is on the practical experience of a screen reader user during everyday tasks.


Screen Reader	NVDA 2025.3.3.54605
Browser	Chrome 145.0.7632.117
Platform	Windows Desktop
Interface Tested	claude.ai web application

Findings are classified by their impact on task completion:

Blocker — The task cannot be completed.
Barrier — The task can be completed, but requires significant additional effort, guesswork, or repeated keystrokes that are not required of sighted users.
Friction — The task works as expected, but the experience is degraded in a way that compounds over extended use.

2. Findings

2.1 Response Completion Is Not Announced

Severity: Barrier

When claude.ai finishes generating a response, no announcement is made to the screen reader. The response content is not placed in a live region, so the screen reader does not notify the user that new content is available or that generation has completed.

2.2 The "Keyboard Shortcuts" Dialog Is Not Accessible

Severity: Blocker

The "Keyboard Shortcuts" dialog in claude.ai presents two separate barriers when accessed with a screen reader.

2.2.1 Dialog appearance is not announced. When the dialog is opened, the screen reader does not announce that a dialog has appeared, and focus is not moved into the dialog. The user receives no indication that anything has changed on screen.

2.2.2 Dialog content is not reachable. When the user navigates to the bottom of the page using the virtual cursor, the screen reader reads only the dialog's heading — "Keyboard Shortcuts" — and does not expose the list of shortcuts contained within. The content of the dialog is effectively inaccessible.

These two barriers combine to make the Keyboard Shortcuts dialog non-functional for screen reader users. The meaningful task — reading the available keyboard shortcuts — cannot be completed. A feature that is specifically intended to support keyboard navigation cannot itself be navigated by keyboard users relying on a screen reader.

2.3 The "More Options" Menu in the Chat List Does Not Announce Its Appearance

Severity: Barrier

Each item in the chat list sidebar contains a "More Options" button. When activated, a popup menu appears containing actions such as Star, Rename, and others. The menu implements a focus trap, meaning keyboard focus is correctly contained within it once the user is inside. However, the appearance of the menu is not announced by the screen reader, and the user is not informed of how to close it.

The result is that after pressing the button, the user receives no confirmation that anything has occurred. The user must discover — through navigation — that a menu has appeared, learn its contents, and determine independently that pressing Escape will close it. A sighted user receives immediate visual confirmation of all three.

2.4 The Sidebar Lacks Sufficient Landmarks for Direct Navigation

Severity: Barrier

Navigation between chats requires access to the chat list in the sidebar. The sidebar contains a landmark that allows the user to jump to its top, but no landmark or heading structure is provided to allow direct navigation to the chat list itself.

Available landmarks during testing were limited to a jump to the top of the sidebar, a banner landmark in the chat section, and a notifications landmark. None of these allow the user to navigate directly to the chat list. A user who wishes to switch chats must traverse through the sidebar from the top, passing over controls unrelated to the chat list on each visit.

2.5 Missing Keyboard Shortcuts for Frequently Used Actions

Severity: Friction

The following actions do not have keyboard shortcuts in claude.ai:

Jump to the chat input field
Start a new chat
Delete the current chat

The absence of shortcuts does not prevent these actions. However, the cumulative effect of repeated traversal — compounded with the other barriers documented above — meaningfully degrades the experience of extended use.

2.6 Chat List Items Do Not Expose Metadata

Severity: Friction

Chat list items correctly expose the title of each chat to the screen reader. No additional metadata — such as the number of responses in a conversation, the date of the last message, or the model used — is provided.

A user who cannot visually scan the chat list must rely on the title alone to identify and select the correct conversation. Additional metadata would reduce the effort required to distinguish between similarly named chats and to assess whether a conversation is worth reopening.

3. Summary of Findings

#	Finding	Severity
2.1	Response completion not announced	Barrier
2.2	Keyboard Shortcuts dialog not accessible	Blocker
2.3	"More Options" menu appearance not announced	Barrier
2.4	Sidebar lacks landmarks for chat list navigation	Barrier
2.5	Missing keyboard shortcuts for common actions	Friction
2.6	Chat list items lack metadata	Friction

4. Further Reading

This article is part of the PageLive project's documentation for claude.ai. A companion article, Screen Reader Experience Mitigation on claude.ai, describes how PageLive addresses the barriers identified above. For a full list of keyboard shortcuts and features PageLive provides for claude.ai, see the PageLive for Claude documentation.

— End of Article —

Disclaimers

PageLive can be installed for free on the PageLive chrome webstore page.

Auto Hot Key to automate Keystrokes in Windsurf IDE

wiscer — Fri, 29 Nov 2024 12:40:25 +0000

Using Keyboard Shortcuts to Enhance Productivity in Windsurf IDE

As a non-visual developer (screen reader user), I rely heavily on keyboard shortcuts and keybindings. This article provides a workaround for inputting keystrokes in the Windsurf IDE.

Breadcrumbs in VSCode IDE

I primarily use VSCode IDE because it is highly accessible for screen reader users. One of the shortcuts I use most frequently is Breadcrumbs Focus.

Shortcut: Ctrl + Shift + .
Description: Focus and select breadcrumbs; breadcrumbs.focusAndSelect

Screenshot of creadcrumbs in VSCode

Breadcrumbs are located at the upper part of the text editor. I use this shortcut every 5–10 minutes because:

It provides a quick snapshot of the code hierarchy, whether within a class or an HTML tree.
It helps navigate between methods within the file efficiently.

Windsurf IDE

Windsurf IDE is an accessible, AI-powered IDE built on top of VSCode, inheriting many of its shortcuts. However, the shortcut for breadcrumbs.focusAndSelect does not work in Windsurf.

The `breadcrumbs.focus` Shortcut

In Windsurf, I discovered an alternative shortcut:

Shortcut: Ctrl + Shift + ;
Description: Focus on breadcrumbs; breadcrumbs.focus

However, in Windsurf, this shortcut does not automatically focus on the original breadcrumbs. Instead, it defaults to a new visual element on the right side of the breadcrumbs containing "Explain," "Refactor," and "Add Docstring" links.

To replicate the functionality of breadcrumbs.focusAndSelect, I have to:

Press Ctrl + Shift + ; to focus on the new links.
Use the left arrow to move focus to the original breadcrumbs.
Press the down arrow to select and display the code tree.

Screenshot of creadcrumbs in VSCode

Since I frequently use this functionality, automating these steps into a single keystroke would save a lot of hassle.

AutoHotkey: A Solution

To streamline the process, I use AutoHotkey, a free tool for customizing keyboard shortcuts.

I mapped the sequence to NumpadIns followed by the right arrow, as they are conveniently close on my keyboard.

AutoHotkey Script

; Map NumpadIns + Right Arrow 
; to simulate breadcrumbs.focusAndSelect in Windsurf
NumpadIns & Right::
Send ^+;  ; Send Ctrl+Shift+;
Sleep 100  ; Pause for 100 milliseconds
Send {Left}  
Sleep 100  
Send {Down}  
return

Complete Setup

Follow these steps to set up the shortcut:

Download AutoHotkey: Download AHK.
Create a Script File:
- Open a text editor, such as Notepad.
- Paste the script above.
- Save the file with a .ahk extension (e.g., breadcrumbs.ahk). Ensure there is no hidden .txt suffix.
Run the Script: Double-click the .ahk file to activate the script.

For a detailed guide, refer to the AutoHotkey Tutorial.

This solution significantly simplifies navigating breadcrumbs in Windsurf IDE and enhances accessibility for screen reader users.

Update on Key Conflict

The assignment of NumPadIns in the AutoHotKey script conflicted with its role as the NVDA modifier key. As a result, when the script runs, NVDA can no longer respond to the NumPadIns key. This happens because AutoHotKey intercepts the NumPadIns key press, preventing NVDA from processing it.
To resolve this issue, I replaced NumPadIns with the NumPadAdd key in the script. Here is the updated script

; Map NumpadAdd + Right Arrow 
; to simulate breadcrumbs.focusAndSelect in Windsurf
NumpadAdd & Right::
Send ^+;  ; Send Ctrl+Shift+;
Sleep 100  ; Pause for 100 milliseconds
Send {Left}  
Sleep 100  
Send {Down}  
return

VSCode shortcuts / keybinding for Non Visual Users

wiscer — Fri, 06 Sep 2024 11:27:27 +0000

In this article, I’ll be sharing a selection of VSCode shortcuts and keybindings that I frequently use and find
particularly useful as a screen reader (non-visual) developer.

While memorizing every keybinding available in VSCode can
be overwhelming, focusing on a core set of shortcuts can greatly enhance efficiency and ease of use. To make this guide practical, I’ve highlighted keybindings that are most likely to be beneficial for screen reader users. The list below will have marks on shortcuts which I think essential.

The default keybindings are sourced from the official VSCode documentation as of September 3, 2024. I hope this resource will help you streamline your workflow by focusing on the most useful and frequently used shortcuts.

NOTE: The essential shortcuts will ended by 👍

General

Ctrl+Shift+P, F1 👍: Show Command Palette
Ctrl+P 👍: Quick Open, Go to File…
Ctrl+Shift+N: New window/instance
Ctrl+Shift+W 👍: Close window/instance
Ctrl+, 👍: User Settings
Ctrl+K Ctrl+S: Keyboard Shortcuts

Basic editing

Ctrl+X 👍: Cut line (empty selection)
Ctrl+C 👍: Copy line (empty selection)
Alt+ ↑/↓
: Move line up/down
Shift+Alt+ ↑/↓
: Copy line up/down
Ctrl+Shift+K 👍: Delete line
Ctrl+Enter 👍: Insert line below
Ctrl+Shift+Enter 👍: Insert line above
Ctrl+Shift+\ 👍: Jump to matching bracket
Ctrl+ ]/[: Indent/outdent line. This is useful when I want to make sure there is no whitespaces at start.
Home/End 👍: Go to beginning / end of line
Ctrl+Home 👍: Go to beginning of file
Ctrl+End 👍: Go to end of file
Ctrl+ ↑/↓: Scroll line up/down
Alt+ PgUp/PgDn: Scroll page up/down
Ctrl+Shift+[: Fold (collapse) region
Ctrl+Shift+]: Unfold (uncollapse) region
Ctrl+K: Ctrl+[ Fold (collapse) all subregions
Ctrl+K: Ctrl+] Unfold (uncollapse) all subregions
Ctrl+K Ctrl+0: Fold (collapse) all regions
Ctrl+K Ctrl+J: Unfold (uncollapse) all regions
Ctrl+K Ctrl+C: Add line comment
Ctrl+K Ctrl+U: Remove line comment
Ctrl+/ 👍: Toggle line comment
Shift+Alt+A 👍: Toggle block comment
Alt+Z 👍: Toggle word wrap

Navigation

Ctrl+T: Show all Symbols
Ctrl+G 👍: Go to Line...
Ctrl+P 👍: Go to File...
Ctrl+Shift+O 👍: Go to Symbol...
Ctrl+Shift+M 👍: Show Problems panel
F8 👍: Go to next error or warning
Shift+F8 👍: Go to previous error or warning
Ctrl+Shift+Tab 👍: Navigate editor group history
Alt+ ←/→
: Go back / forward
Ctrl+M 👍: Toggle Tab moves focus

Search and replace

Ctrl+F 👍: Find
Ctrl+H 👍: Replace
F3 / Shift+F3
: Find next/previous
Alt+Enter: Select all occurences of Find match
Ctrl+D: Add selection to next Find match
Ctrl+K Ctrl+D: Move last selection to next Find match
Alt+ C/R/W
: Toggle case-sensitive / regex / whole word

Multi-cursor and selection

Alt+Click: Insert cursor
Ctrl+Alt+ ↑/↓: Insert cursor above / below
Ctrl+U: Undo last cursor operation
Shift+Alt+I 👍: Insert cursor at end of each line selected
Ctrl+L 👍: Select current line
Ctrl+Shift+L: Select all occurrences of current selection
Ctrl+F2 👍: Select all occurrences of current word
Shift+Alt+→: Expand selection
Shift+Alt+←: Shrink selection
Shift+Alt + (drag mouse): Column (box) selection
Ctrl+Shift+Alt+ (arrow key): Column (box) selection
Ctrl+Shift+Alt+ PgUp/PgDn: Column (box) selection page up/down

Rich languages editing

Ctrl+Space, Ctrl+I 👍: Trigger suggestion
Ctrl+Shift+Space 👍: Trigger parameter hints
Shift+Alt+F 👍: Format document
Ctrl+K Ctrl+F 👍: Format selection
F12 👍: Go to Definition
Alt+F12 👍: Peek Definition
Ctrl+K F12 👍: Open Definition to the side
Ctrl+. 👍: Quick Fix
Shift+F12 👍: Show References
F2 👍: Rename Symbol
Ctrl+K Ctrl+X 👍: Trim trailing whitespace
Ctrl+K M: Change file language

Windows Terminal with Screen Reader

wiscer — Mon, 08 Jul 2024 04:53:25 +0000

When I first started using a screen reader, one of the biggest challenges I faced was operating terminal applications like Powershell. It took me quite some time to become comfortable navigating and using these terminal apps.

This article shares tips on operating Powershell and other terminal applications using the NVDA screen reader (Desktop keyboard layout), based on my personal experience. It is a work-in-progress article that will be updated over time.

Reading Text in the Terminal

In the terminal, the cursor is always at the bottom. To read text, use the Navigator Object. For example, to read the previous line use Numpad 7for Desktop Layout. Full description about the Navigator Object navigation can be found in NVDA Command Key Quick Reference page.

Copying Text

To copy a range of text in the terminal, follow these steps:

Mark the start of the text to be copied:
- Use the Navigator Object to move to the starting point of the text you want to copy.
- Press Caps Lock + F9.
Mark the end of the text:
- Use the Navigator Object to move to the endpoint of the text selection.
- Press Caps Lock + F10 twice. (Hold the Caps Lock and then quickly press F10 twice.)

After completing these steps, the selected text will be copied to the clipboard.

How to Use VSCode Logpoint with Keyboard Shortcuts

wiscer — Tue, 02 Jul 2024 01:47:50 +0000

Introduction

This article demonstrates how to efficiently utilize VSCode Logpoints using only keyboard shortcuts. This method is particularly beneficial for users who rely on screen readers or prefer keyboard-centric workflows.

Understanding VSCode Logpoint

VSCode Logpoints allow developers to dynamically insert logging messages into their code without modifying the source code itself. This feature is invaluable for debugging and understanding code execution flow.

Setting Up Custom Shortcut for Logpoints

Since there is no default shortcut or menu item for adding Logpoints, follow these steps to define a custom shortcut:

Open the keybinding editor with Ctrl + K Ctrl + S.
Type Logpoint into the search box and press Tab to navigate to the Debug:Add Logpoint result. Press Enter to activate.
Enter your desired keyboard shortcut, for example, Ctrl + L Ctrl + P, and confirm by pressing Enter.

Example File

To illustrate the usage of Logpoints, consider the following JavaScript file:

let a = 1;
let b = plus_4(a);
plus_9(b);
console.log("End of file");

function plus_4(x) {
    console.log("plus 4");
    return x + 4;                               
}

function plus_9(x) {
    console.log("Plus 9");
    return x + 9;
}

Adding Logpoints to Replace `console.log`

Replacing repetitive console.log statements with Logpoints enhances debugging efficiency:

Navigate to the line containing console.log.
Use the custom shortcut (Ctrl + L Ctrl + P) to add a Logpoint. Enter a descriptive message when prompted, e.g., "Reached end of file", and press Enter.

Repeat these steps for each console.log statement in your code.

Running in Debug Environment

To execute the JavaScript file with Logpoints:

Open the debug panel with Ctrl + Shift + D.
Navigate to Javascript Debug Terminal using Tab and activate it.
Run the script using:

  node index.js

Logpoint messages will be displayed in the terminal.

Note for screen reader users: Switch to screen reader compatibility mode with F2 to read the terminal output. Use arrow keys to navigate through lines and press F1 to return to normal mode.

Using Logpoints eliminates the need for repetitive console.log cleanup during debugging sessions, streamlining your workflow.

Removing Logpoints

To remove a Logpoint, position the cursor on the relevant line and press F9, similar to removing breakpoints.

Conclusion

Using VSCode Logpoints significantly improves debugging efficiency compared to traditional console.log methods. It saves time by reducing code clutter and repetitive cleanup tasks, making debugging more focused and productive.

We hope this article helps streamline your development process with VSCode Logpoints. Happy coding!

Thanks for reading.

Linux WSL for Development Environment

wiscer — Fri, 11 Nov 2022 04:00:00 +0000

Linux WSL for Development Environment

WSL, stands for Windows Subsystem for Linux, is a sub system within Windows OS allowing users to install one or many Linux distributions.

Environment Used in this Article

In this article the following environment / applications are used :
Windows 11, WSL2, Ubuntu 20.04 LTS, Windows Terminal, NVM, and Node.js.

This article and all of the videos are made with NVDA screen reader.

Flexibility

Since I became a screen reader user, due to eye problems, I moved to Windows from Linux Ubuntu.
I am now depend on Windows based NVDA screen reader to use the computer.
Developing on Windows machines means that there will be different environment between development and deployment machines (mostly Linux).

WSL allows me to have a more 'screen reader friendly' environment (Windows desktop)
while having the same environment with the deployment machines (Linux server).

Clean Installation

The next benefit of using WSL is that we will have clean installation since all development tools / modules will be on LinuxWSL.
We will have a much more 'clean' Windows installation.

We can install more than one Linux distributions on one Windows machine.
We can also reset each installed Linux, meaning we can easily have fresh Linux installation on our Windows machine.
To demonstrate 'clean installation' we will install Node.js on Ubuntu and will reset the Ubuntu as below.

Install Ubuntu WSL

To show available Linux distros online, open Windows Terminal / Powershell and run :

wsl --list --online

To install Ubuntu 20.04 use -d <NAME> as below :

wsl --install -d Ubuntu-20.04

After executing the command above, wait and follow instructions on screen.
Upon completion we need to search for Ubuntu in the Windows Start menu and execute the installed Ubuntu.
This will start Ubuntu initialization, and then we will be asked to supply username and password.
Up until this point the Ubuntu installation process has been completed.

To display available wsl commands and options, run command below:

wsl --help

If you are interested on watching realtime demonstration videos on how to install Ubuntu WSL on Windows 11,
you can listen / watch it on 2 videos below.

Video 1: How to install Ubuntu WSL on Windows 11 (using NVDA).

Video 2: How to install Ubuntu WSL on Windows 11 (using NVDA).

Ubuntu Terminal in Windows Terminal

Follow steps below to run Ubuntu Terminal:

Run Windows Terminal. By default, Windows Terminal will run Powershell.
Press Ctrl + Shift +Space to show list of available CLI applications.
Use up and down arrow to focus on 'Ubuntu'. Then press Enter.
Ubuntu terminal should be opened right now. To test, run lsb_release -a to display the Ubuntu version.

Video: Start Ubuntu WSL Terminal in Windows Terminal (using NVDA)

Install NVM

NVM, stands for Node Version Manager, is a tool to manage Node.js versions in a machine.
NVM can be used to install, remove, and set which version of the currently installed Node.js in a computer.

To install NVM, open Ubuntu Terminal and execute command below.
Command below will pipe the stdout from curl to bash:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash

Visit NVM Github page for more detail info.
Demonstration video, about how to install NVM, is available below.

Install Node.js

To test if nvm is already installed, run nvm --version on your Ubuntu Terminal.
If nvm is not recognized by Ubuntu, close the Terminal and try again in a new Terminal.

To install the latest node version, run below command on Ubuntu Terminal.
node is an alias for 'node latest version'.

nvm install node

To install node with a specific version, put he version like below:

nvm install 14.7.0

To display list of available downable version of node.js, run:

nvm ls-remote

I mostly install LTS versions for have a more stable Node.js. To display only LTS versions run :

nvm ls-remote --lts

To install the latest LTS:

nvm install 'lts/*'

To install the latest version of a specific codename LTS:

nvm install lts/hydrogen

The following command can be used to install LTS version:

nvm install --lts
nvm install --lts=argon
nvm install 'lts/*'
nvm install lts/hydrogen

To select version of node.js to be used, use the command use:

nvm use 20.04

Up until this point we already have Node.js installed on our Ubuntu WSL. That means we can develop apps in Linux environment on our Windows machine. If you are using VSCode as IDE, you can install extension to access WSL system file.

This is only a demo of using Linux WSL as our development environment.
We can also install other tools for other programming languages.

Video: How to Install NVm (Node Version Manager) and Node.js in Windows 11

Reset Ubuntu

Once we feel to have a clean dev environment, we can reset the Ubuntu from start. After reset the Ubuntu we will be prompted to input username and password again before start using Ubuntu.

Follow steps below to reset Ubuntu:

On Windows, search and open Settings.
On the navigation (left side) use up/down arrow to select Apps and then press Enter.
Press Tab to move focus to selected Apps section.
Press Tab to move focus to Apps and Features then press Enter.
Press Tab several times until find Apps list, which contains list of applications. Prior to the Apps list there is a search box to filter the apps.
Use up / down arrow to look for 'Ubuntu' app.
Press Tab once to focus on the overflow button.
Press Enter on the Advanced Options.
Press Tab multiple times to move focus to Reset grouping. Afterward press Tab 2 more times to focus on the Reset button, then press Enter.
After Ubuntu app has been reset, go to Windows Start Menu to search and run the Ubuntu app.
Run the Ubuntu app then provide the prompted username and password. Ubuntu is now ready to be used again from the fresh start.

Video: Reset Ubuntu WSL in Windows 11 using NVDA

Conclusion and Docker

WSL, Windows Subsystem for Linux, is a breakthrough technology for developers to have multiple and different ecosystem in one machine.
This option is much practical for software developers compare to use technology such as virtual machine,
since developers mostly only want separation down to OS layer and no separation required onn physical layers (memory allocation).

Next, we are going to install Docker wich offers more portability and modularity.
Docker natively runs on Linux. That is why we need to install WSL prior to installing Docker in Windows.

Hope this post useful. Cheers!

VSCode - How to Jump between Points in a File

wiscer — Mon, 19 Sep 2022 08:46:24 +0000

This article contains tips to jump between points (combination of line & column number) in a single file in VSCode for screen reader users (blind, visually impaired, etc).

This article is based on personal experience.

Background

I often face situation where I have to jump from 1 point to another line back and forth in a single file. It is a bit challenging for me since now I am a screen reader user.

As an example, in JSON file below I need to look for skus in products to replace sku (xxx) in the cart array. Imagine scenarios with much more products and more cart items. It will require me to traverse through the products for each cart item.

For this tutorial let's just say carts, that we need to fill in as a work point. And sku field , that we will look for, as a lookup point.

Sighted Users

This is how a sighted user typically will complete the task:

Get the name of the first cart item. Cursor is at work point.
Scroll to products.
Scan through the products until find the matching name (lookup point).
Copy the sku.
Scroll back to the first item of cart (work point).
Replace xxx with the copied sku.
Repeat from the beginning for the second item in cart.

The steps above are pretty simple because a sighted user only need to scroll down/up without having to repeatedly press keys to navigate.

Screen Reader Users

The Challenge

SC users (Screen reader users), on the other hand, do not use scrolling devices. They only use keyboards to give input to computer. SC users have to press key up / down to 'scroll' the pages.

During the navigation process, SC users have to press up/down key to move cursor 1 line to read each line until reaching the intended 'section'. It will require much longer time to complete simple task such as above, compared to sighted users.

Below are tips I used to workaround the challenge.

Let's consider an initial condition for each tips where the cursor is at "name" : "Milk" (line 4).

Use `PgUp` and `PgDn` Keys

Users can use PgUp, to move up 1 page, and PgDn to move down 1 page. Until approximately near the intended lines, the lookup point, user can use arrow up / down to read each line to get to the lookup point.

The challenge SC users may have with this method is to remember how many times they have to press PgUp or PgDn keys to jump back and forth betwen work point to lookup point. The distance between work point and lookup point may change everytime lines are inserted or deleted between those 2 points.

Use Line Numbers

Another way to jump is by remember the line number of the work point and line number near the lookup point.

To jump to a certain line number in VSCode : - Press `Ctrl` + ` G` to open a modal. - Type in the destination line number, then press `Enter`.

With this method SC users have to remember the line numbers and they will change everytime a line is inserted or deleted between work point and lookup point.

Find 'dummy' anchors

This was the method I preferred compared to the previous ones. We can use dummy anchors to mark the work point and lookup point. Dummy anchor, in my own term, is a sequence of characters that not existed in the file.

For example we can type `aaa` 1 line above work point and `bbb` near the lookup point. I use `aa` and `bbb` because I now there are no such substring in the related file and it just faster to type those characters. Then I use VSCode 'find' tool, press `Ctrl` + `F`, to jump between work point and lookup point.

The downside of this method is we have to remember to remove those dummy anchors after being used, and we have to move those dummy anchors if we want to change the jumping points. This is still not the ideal solution to match the scrolling speed used by sighted users.

Use multiple 'editor Group'

This is the ideal method I found out a while ago.

'Editor group' is group of 1 or multiple files or tabs. One of the benefit of usin multiple editors is to compare same file of different version (commit) side by side. We can also view the exactly same file version in multiple editor group at the same time. Any changes we make to file `xxx` in any editor group will instantly reflected in the same file `xxx` in other editor group.

When we start VSCode, by default, we will only have 1 editor group (Editor group 1). Pressing `Ctrl` + `2` will open empty editor group 2, `Ctrl` + `3` will open empty editor group 3, and so on.

Below are the steps to jump between work point and lookup point back and forth :

Press Ctrl + \ to open new editor group with the exact files currently being opened. The cursor will also at the same point (work point), but editor group 2 is active now.
Move the cursor to lookup point, copy the required sku.
Press Ctrl + 1. This will move focus to editor group 1 with the cursor at the same position (work point).
Paste the sku.
Press Ctrl + 2 to focus on the editor group 2. Cursor on the editor groop 2 is still at the lookup point.
Press Ctrl + 1 if we want to focus back to editor group 1.

We can use this method to jump between multiple points back and forth.

This method, IMHO, is faster than the 'scrolling' method commonly used by sighted users. To close editor group2, just close all the file in the editor group 2. Press `Ctrl` + `w` to close the currently focused file.

Conclusion

I just found out about the 'multiple editor groups' method few weeks ago. I am still trying to make that method a habit. By far using multiple editor groups to jump between points really increase my productivity.

I had been looking for a perfect way to jump between multiple points for a long time. By sharing my experience I hope this article could help some people, both sighted and screen reader users.

Good luck !

DEV Community: wiscer

Screen Reader Experience Mitigation on Gemini

Summary

1. Scope

2. Mitigations

2.1 Response Completion Is Not Announced

2.2 Formulas and Symbols Are Not Read by the Screen Reader

2.3 Dialog Appearance Is Not Announced

2.4 No Means of Reviewing Chat Flow in Long Conversations

2.5 Missing Keyboard Shortcuts for Frequently Used Actions

3. Summary of Mitigations

4. Further Reading

Disclaimers

Screen Reader Experience Analysis on Gemini

Summary

1. Scope and Testing Environment

2. Findings

2.1 Response Completion Is Not Announced

2.2 Formulas and Symbols Are Not Read by the Screen Reader

2.3 Dialog Appearance Is Not Announced

2.4 No Means of Reviewing Chat Flow and Navigation Within Long Conversations

2.5 Missing Keyboard Shortcuts for Frequently Used Actions

3. Summary of Findings

4. Further Reading

Disclaimers

Screen Reader Experience Mitigation on Grok

Summary

1. Scope

2. Mitigations

2.1 Response Completion Is Not Announced

2.2 The "Show All" Button in the All Chats Dialog Is Not Accessible

2.3 Missing Keyboard Shortcuts for Frequently Used Actions

3. Summary of Mitigations

4. Further Reading

Disclaimers

Screen Reader Experience Analysis on Grok

Summary

1. Scope and Testing Environment

2. Findings

2.1 Response Completion Is Not Announced

2.2 The "Show All" Button in the All Chats Dialog Is Not Accessible

2.3 Missing Keyboard Shortcuts for Frequently Used Actions

3. Summary of Findings

4. Further Reading

Disclaimers

Screen Reader Experience Mitigation on claude.ai

Summary

1. Scope

2. Mitigations

2.1 Response Completion Is Not Announced

2.2 The "Keyboard Shortcuts" Dialog Is Not Accessible

2.3 The "More Options" Menu Does Not Announce Its Appearance

2.4 The Sidebar Lacks Sufficient Landmarks for Direct Navigation

2.5 Missing Keyboard Shortcuts for Frequently Used Actions

2.6 Chat List Items Do Not Expose Metadata

3. Summary of Mitigations

4. Further Reading

Disclaimers

Screen Reader Experience Analysis on claude.ai

Summary

1. Scope and Testing Environment

2. Findings

2.1 Response Completion Is Not Announced

2.2 The "Keyboard Shortcuts" Dialog Is Not Accessible

2.3 The "More Options" Menu in the Chat List Does Not Announce Its Appearance

2.4 The Sidebar Lacks Sufficient Landmarks for Direct Navigation

2.5 Missing Keyboard Shortcuts for Frequently Used Actions

2.6 Chat List Items Do Not Expose Metadata

3. Summary of Findings

4. Further Reading

Disclaimers

Auto Hot Key to automate Keystrokes in Windsurf IDE

Using Keyboard Shortcuts to Enhance Productivity in Windsurf IDE

Breadcrumbs in VSCode IDE

Windsurf IDE

The breadcrumbs.focus Shortcut

AutoHotkey: A Solution

AutoHotkey Script

Complete Setup

Update on Key Conflict

The `breadcrumbs.focus` Shortcut

Adding Logpoints to Replace `console.log`

Use `PgUp` and `PgDn` Keys