Open Marconiusiii opened 1 year ago
isidorn
commented
1 year ago Thanks for providing this feedback. VS Code is built using Electron and Web technologies and that is the reason why Screen Readers treat it sometimes as a Web Page.
If in the future we decide to change to native code we will make sure to take this feedback into account. Thanks for understanding.
gtritchie
commented
8 months ago One specific technique I've observed that contributes to this problem is that many buttons in the UI (e.g. toolbar buttons) have an icon added via a ::before pseudoelement, and this can cause VoiceOver to treat the button as a group. This doesn't happen in Safari (which is of no help for an Electron app), nor does it happen on the Windows screen readers I've tried.
This makes the buttons announce as groups, which adds to the verbosity and is confusing (it's a group, so you can navigate into it with VoiceOver, but the Unicode characters used for icons can't be pronounced so VoiceOver says nothing).
An example are the Maximize Panel and Close Panel buttons at the end of the Terminal toolbar:
Navigating to the close button with the VoiceOver cursor reads: "Close Panel, Button, Group". It seems like a little thing, but there are buttons in the UI that ARE groups and contain nested widgets, thus a screen reader user trying to understand the interface can't assume this is completely ignorable.
A "simple" fix (nothing is ever simple) is to add empty alt-text to the pseudo-element content. So for the Close Panel widget, change
.codicon-panel-close:before {
content: '\ea76';
}to
.codicon-panel-close:before {
content: '\ea76' / "";
}This stops the button from being treated as a group. The "not so simple" part is that alt-text in pseudoelement content isn't supported on Firefox or Safari and others so would need to be tested in those browsers to make sure it's harmless for web-based VSCode.
https://developer.mozilla.org/en-US/docs/Web/CSS/content#browser_compatibility
isidorn
commented
8 months ago @gtritchie thanks for sharing this idea. I think it is worth trying this out @meganrogge
gtritchie
commented
8 months ago @meganrogge, FYI, I tried out this approach of using the / "" suffix to add empty alt-text, and although it works great in Chrome/Electron, in both Safari on macOS and Firefox (tried on both Mac and Windows) it causes the icons to fail to render, so the buttons are essentially invisible. So that's a non-starter.
Type: Performance Issue
If I wanted a web-based editor, I would have stayed on a website. I did not expect VS Code to provide a poorly design web-based interface in the native app on my Mac. It seems like every single element has an aria-descrivedby or title element mimicking the control within, causing VoiceOver to find every object on the screen three times since each container group is labelled. It's extremely difficult navigating the interface as a blind VoiceOver user, and you are absolutely not leveraging any native MacOS Accessibility API functions other than attempting to build a pseudo-accessible web experience on the desktop. You've even added a feature that asks if I am using a screen reader, and toggling that on seems to offer no additional support or functionality, and the interface remains as unusable and unintuitive as it was before toggling that option on. You should try building this editor using native code and not try shoehorning web design or a web experience into it because it is ultimately just not successful at all in terms of providing an accessible experience for a blind coder. You really need to work on your attention to usability with actual blind developers and users. I think I'll just stick with Xcode and TextEdit.
VS Code version: Code 1.78.0 (Universal) (252e5463d60e63238250799aef7375787f68b4ee, 2023-05-03T20:11:00.813Z) OS version: Darwin x64 22.4.0 Modes: Sandboxed: Yes
System Info
|Item|Value| |---|---| |CPUs|Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz (8 x 2000)| |GPU Status|2d_canvas: enabledcanvas_oop_rasterization: disabled_off
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
metal: disabled_off
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|1, 2, 2| |Memory (System)|16.00GB (3.24GB free)| |Process Argv|--crash-reporter-id 7ff69e31-74c2-42f4-b729-d15a780215d4| |Screen Reader|yes| |VM|0%|
Process Info
``` CPU % Mem MB PID Process 18 147 2370 code main 0 66 2373 gpu-process 0 33 2375 utility-network-service 0 229 2376 window [1] (Visual Studio Code) 0 82 2385 shared-process 0 49 2388 ptyHost 0 0 2398 -bin/tcsh 0 0 2421 /bin/ps -ax -o pid=,ppid=,pcpu=,pmem=,command= 0 49 2386 fileWatcher [1] 0 82 2387 extensionHost [1] 0 115 2405 window [2] (Issue Reporter) ```Workspace Info
``` ; ```Extensions: none