Code editor not sufficiently accessible to visually impaired campers

[QuincyLarson]

Issue Description

Several of our campers with visual impairments have reported not being able to use our coding editor. I think our editor was reasonably accessible up until recently. I've asked them to come here and further describe the issues they're experiencing in trying to use our code editor.

[zersiax]

Ok, so there's two parts to this:

The problem

Screenreaders cannot properly interact with the content of the multiline edit field provided to enter your code. This is due to the CodeMirror editor doing some black magic to the dom in that location, making the text not actually be a part of the dom anymore, rendering it unreadable for screenreaders. I don't know the details of said black magic.
I've alerted people about this right when we started the bonfires project, @terakilobyte wil remember this. I think he was working on this for a while but if he managed a fix, it never really materialized in the FCC codebase.

##Solution/workaround

The creators of CodeMirror, frankly, don't really seem to care all that much about this problem. The only work towards a fix I have seen so far is this repo:
https://github.com/bgrins/codemirror-accessible

What blind people currently do is copy-paste the contents of the multiline edit field to another editor, make their edits, paste it back in, press control+enter and hunt across the page, because I don't think the editor makes use of semantic HTML to separate the parts of the editor (test description, editor itself, editor controls, error list etc.), leaving arrowing across the page the only way to get to the various important spots on the page.

Alternatives?

Maybe. The only editors I've seen that do something similar and do a better job are the following ones:

• In FCC's earlier iterations, we had a stanford CS101 course as part of the curriculum. Not sure if that is still in. The editor used on those pages is actually quite accessible.
• the Visual Studio Code editor by Microsoft ran into this issue and managed to fix it within their electron-based application, the code to that is open source to my knowledge.

These are two places you could look at for inspiration because I don't really know how you could make this accessible, I don't know enough about CodeMirror's inner workings to comment.
As a quick fix, you could even make a multiline edit field that is off-screen yet still in the DOM order appear rather than the codeMirror editor to screenreader users by using some ARIA attributes and have a submit button below that copies the contents of that field into the codeMirror instance. I'm afraid thats all I can think of.
If you want to make the interaction smoother after that, turn the region on the page that reports errors into a polite, or even assertive, live region and add some semantic structural elements.

[brandenbyers]

I remember looking into this when @terakilobyte was first implementing codemirror. As @zersiax, there aren't many resources beyond the one that is posted above. Codemirror, as previously stated when the FCC editor was bein created, just isn't very accessible and wasn't built with accessibility in mind.

[BerkeleyTrue]

@zersiax @brandenbyers Have either of you tried draftjs? This would be the logical next choice for us, although it isn't ready for primetime just yet.

[zersiax]

Not really ...the little demo on the about page seems promising in the fact it reads what's in the edit field. The controls seem to be clickable text rather than semantic buttons or links which imho is HTML 101 that devs keep doing wrong, but at least the editor can be used properly so it would be an improvement

[zersiax]

Soooo ...folks ...any news on a fix for this one? I was considering polishing up my JS some more on FCC and didn't just because I just don't want to muck about with the editor. It's actually making me not want to work on the challenges now, even though I think they could really benefit me. Can we at least get my suggestion above implemented? That would already make it 5 times less bothersome

[QuincyLarson]

@zersiax I will talk with @BerkeleyTrue about this. Our goal is to either fix Codemirror itself, or to move over to Draft.js once it's ready. We may need to actually run a project where we fork it and focus on code editing, since they don't seem to have started such an effort yet.

[systimotic]

I'm closing this in favour of the newer #12431