Looking for a good way for a sighted developer to get a feel for how accessible their website is. This discussion is open to any platform: VO on MacOS or iOS, even ideas for JAWS and NVDA would be welcome.
This comes up from time to time. Just yesterday, one of my writer friends asked if I could help them make sure their author personality website is accessible. Well, yes, I could. But it got me thinking. How would a fully sighted person, someone who knows nothing about screen readers, check their websites independently, or, for that matter, their apps.
I know, I know. There are free WCAG accessibility tools online. But I'm looking for something more direct. What I have in mind is a text dump of how VO (or any screen reader) would read a web page. So, all the redundant announcement of controls, all the JPG file names for images, all the unlabeled buttons and menus would be there in plain text, ideally one phrase per line. And then a fully sighted developer would be able to review that text dump to remove clutter, reduce redundancy, and ensure controls are described clearly and easy to find. All without asking me for help or ever turning on a screen reader.
Better yet, every time I come across a website with poor accessibility, I could use such technology to quickly capture what VO speaks and simply email it to them in their contact form, saving me the time of writing a lengthy email that would invariably fall short of enumerating all the problems.
Yes, there's more to accessibility than how a screen reader reads an app or website. But a tool like this, combined with an online WCAG tool, would help developers take accessibility to the next level. We can never expect developers to create accessible websites and apps if they don't have access to this kind of information.
I mean, there's got to be a tool like this, right?
For starters, on MacOS, I opened a problem website in a browser, pressed VO+A, then pressed VO+Shift+C. But this copied only the last spoken HTML element to the clipboard, not the entire website. So, obviously, I need a better solution.
Thoughts?
Comments
Caption and Braille Panels
When VoiceOver is enabled on macOS, by default it displays a window that always remains on top of everything else and can't be interacted with called Caption Panel, whose function is precisely display whatever VoiceOver is announcing at any given time. Couple this with its mute function and the sighted can fully experience what we hear without actually having to hear the speech synthesizer or audio icons. This window can also be moved and resized by pressing Fn+VO+Shift+F10 or Fn+VO+Shift+0 on TouchBar MacBook Pros, and even toggled by pressing Fn+VO+Command+F10 or Fn+VO+Command+0 on TouchBar MacBook Pros. Similarly there's another panel for Braille which I think is disabled by default using the same key combinations as the Caption Panel but instead replacing F10 and 0 with F9 and 9 respectively.
An even better option is to have them enable Tile Visuals by pressing Fn+VO+F10 or Fn+VO+0 on TouchBar MacBook Pros, which hides everything except the VoiceOver cursor and the Caption and Braille Panels, making it easier to understand how content is conveyed to us, though they still get visual positional information which is not readily available to us. If you want the ability to log the navigation experience into a text file, I might be able to conjure an AppleScript to do it but it won't be today since there's a lot on my plate right now.
Edited to replace 10 with 0 in all key combinations since 10 isn't an actual key, add the key combination to toggle Tile visuals, and replace some references to enable with toggling instead to properly convey the semantics of those key combinations.
Speech History add-on for NVDA
Hi Paul,
Try the Speech History add-on for NVDA.
https://github.com/jscholes/nvda-speech-history
It's for an earlier version of NVDA, 2024, but it'll probably still work. As for JAWS, I really don't know how you'd do this. But if a website is coded correctly with WCAG in mind, it'll work with both JAWS and NVDA.
Here is the description of the add-on.
This add-on allows you to review the most recent strings spoken by NVDA, by default using Shift+F11 and Shift+F12. Additionally, you can copy any spoken item to the clipboard by pressing F12. Use the settings panel for the add-on to increase or decrease the maximum number of stored history entries, and decide whether whitespace should be trimmed from the start or end of text. Use NVDA's Input Gestures dialog to change the supplied keystrokes.
I don't know how many strings of text it'll actually save at once, but it's worth a shot.