Contents of editor can not be reviewed by screen readers

Challenge Say Hello to HTML Elements has an issue. User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2976.0 Safari/537.36. Please describe how to reproduce this issue, and include links to screenshots if possible.

My code:

        <h1>Hello</h1>

Tried both the free open source screen reader NVDA and also the commercial JAWS for Windows. Neither screen reader is able to review the text in the editor by character, word, etc. If you press CTRL + a to select the text then the screen readers are able to read the text. This is currently quite unusable for blind and visually impaired screen reader users.

[jhomme]

Just saw that this is the actual main issue. Since I have four screen readers, assuming I can follow the instructions to get this on my machine, I will be happy to test this.

To cut down on the learning curve if you are interested in obtaining a screen reader to play with, please see below. And this is not meant as offensive in any way at all, but someone with site is not going to use a screen reader quickly on the first try, or even much after that, because the concepts are so foreign to you. I would be more than happy to test any accessibility issues involving anything other than color. just mention me or e-mail me. If I see the message I will make time.

For color contrast, look for a tool called Colour Contrast Analyzer, and see http://www.webaim.org for articles on how to use it.

On PC, the best screen reader and browser combination is going to be NVDA and Firefox, latest stable version. This is because NVDA is a screen reader that depends the most on the accessibility API, and Firefox is the PC browser that exposes the most pure implementatiion of the accessibility API. That’s the short of that ecxplanation.

See http://www.nvda-project.org to download and set up NVDA.

Once you have it set up, for easiest use, go into the Keyboard dialog and set the laptop layout, then go into the Browse mode dialog and turn off the checkbox for “Use screen layout.”

Once you have all that taken care of, you no longer need to listen to NVDA speak to do testing with it as a sighted person. Start it up, open NVDA, choose Tools, then Speech Viewer. Park that window so that you can see the text in it and the content in your browser. Size the window as desired, and then, when you go to the web, use mostly up and down arrow keys to read line by line as if you were arrowing through a Notepad document. Watch the speech viewer window very carefully and you will see text update there. The text in the speech viewer matches what NVDA would say, if it were talking.

All of this knowledge still will only be interesting, but not helpful to you, because honestly, you still do not know what should happen, so I would still be happy to test any accessibility fixes that I learn about here.

Of course, this is for selfish reasons, because I want to be the first blind persn to go all the way through FCC, then I want to use that knowledge to help with accessibility for other blind deelopers, and see more of them become web developers, and help people with all types of disabilities. And who knows, I may even get a better job or make money outside my day job.

[mjanusauskas]

Yes, I would be happy to help with testing and/ QA.

On 1/25/2017 6:39 AM, Timo wrote:

I looked into this a bit. It seems like TeachAccess is using the editor component from exerslide https://github.com/facebookincubator/exerslide/blob/master/packages/exerslide/components/Editor.js. From what I can tell, what it’s doing is copying all the content to the textarea.

Something else I ran into while working on #12828 https://github.com/freeCodeCamp/freeCodeCamp/issues/12828 is CodeMirror’s inputStyle option https://codemirror.net/doc/manual.html#option_inputStyle. This allows us to switch the editor to use contentEditable. I thought browser support for contentEditable http://caniuse.com/#search=contentEd shouldn’t be an issue, but I did find this comment on their discourse https://discuss.codemirror.net/t/inputstyle-contenteditable-we-may-hope-for-browser-spell-checking/608/2, which states that it’s buggy in old browsers. They do state that’s it the default on mobile, however, and it’s been working fine for us there. I think we should be fine using this option (they’ve had it for two years now). The only difference I have been able to spot in my quick test is that the cursor changes colour based on the syntax highlighting. I’m not an expert screen reader user, but from what I can tell this works fine with NVDA.

Should I submit this as a PR?

@mjanusauskas https://github.com/mjanusauskas @zersiax https://github.com/zersiax Do you have any tips on things I should test? Would you be willing to help with QA?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/freeCodeCamp/freeCodeCamp/issues/12431#issuecomment-275097352, or mute the thread https://github.com/notifications/unsubscribe-auth/APDp4oqMSgwyJUBVxfaYDkwWaP23NDqMks5rV0JzgaJpZM4LdzaT.