Accessibility with screen readers


#1

I’m blind, and I use the NVDA screen reader on my computer running Windows 8.1 and the VoiceOver screen reader on iOS 12.1. Right now this is a problem when it comes to using Glitch (and other devtools such as Firefox’s Scratchpad and Chrome’s JS editor as well). I’ve been communicating with someone on the Glitch team using the Messenger app for iOS about the current accessibility of the Glitch platform and they asked me to make a feature ideas topic discussing this to a wider audience. So here’s the main problem I’m having with the site in its current iteration:

On my computer:

When I try to edit text in the text box presenting files, I can’t navigate through the text when I’m inside the box, and the text appears below the textbox, and so I can’t select it either, which means I can’t use the help feature in Glitch, or hear which character I just erased, because NVDA says “blank.” Also, when I’m outside of the editor and can actually read (but not edit) the text, I can only edit the first 11 lines. I may have a workaround for this for now (remix projects I’m interested in and then download them as ZIP archives). As for editing, for now another workaround might be to go back into the textbox and Ctrl-A to select all and then Ctrl-C to copy, and paste it in an editor like Atom or Notepad++ (two that come to mind that I actually can use). And then I’d have to paste it back into Glitch, which would defeat the purpose of the help, invite and join systems especially if people are collaborating in real time. As far as I know, Glitch uses an earlier version of CodeMirror which does a lot of trickery that tries to emulate the features of popular text editors and fools NVDA into thinking there isn’t any text in the box no matter what I type. NVDA says the letter I type, but when I try to navigate back to that letter, or go up a line, or erase a character with backspace or delete, it just says “blank” as if there’s nothing there.

On my iPhone/iPad:

VoiceOver is smart enough to recognize what CodeMirror is doing, but again it only lets me read just a fraction of the code inside the box.

On both systems:

These are just miscelaneous things I notice with the site as a whole. When in a project (or edit view of a project), when I come across names of files, they don’t show up as links, but just text. Even though I’m smart enough to click on them, other users who are blind might not be because they wouldn’t be able to tell the difference between text and links without the screen reader saying “link” (which is what normally happens at some point when on a link).

The button I clicked to take me to this very textbox was not properly labeled with text such as “Post New Idea.” Also, there is a button before that in the order of buttons that just says “Normal” and I have no idea what it does. Does it bring the font size up or down to normal? Does it take me to this page I’m typing in? This is my first time typing into a Discourse community; do all (or other) Discourses behave like this?

Version 6 of CodeMirror likely won’t be released until next fall, and I’ve tried out that demo and it works great. However, the CodeMirror team doesn’t recommend using it in production sites yet as they say they have more to work on. So in the meantime, is there a way, with the current platform, to make the necessary accessibility changes to Glitch without introducing any breaking changes anywhere else?