New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Contents of editor can not be reviewed by screen readers #12431
Comments
\cc @FreeCodeCamp/moderators |
Yup, thanks a lot for bringing this up, we are very open to idea to make the website more accessible and supporting screen readers is an important part of this. Opening up to community for suggestions on implementations. |
Comment from the NVDA screen reader lead developer:
…On 1/8/2017 5:11 PM, mrugesh mohapatra wrote:
Yup, thanks a lot for bringing this up, we are very open to idea to
make the website more accessible and supporting screen readers is an
important part of this.
Opening up to community for suggestions on implementations.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#12431 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT>.
|
Comment from the NVDA screen reader lead developer:
This is due to accessibility problems in the code editor being used.
These code editors choose to draw their content in a non-standard way,
rather than using HTML contentEditable (which is the standard way to do
editable content). Unfortunately, there's nothing we can do to support
this; the issue needs to be fixed in the editor.
—
…On 1/8/2017 5:11 PM, mrugesh mohapatra wrote:
Yup, thanks a lot for bringing this up, we are very open to idea to
make the website more accessible and supporting screen readers is an
important part of this.
Opening up to community for suggestions on implementations.
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#12431 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/APDp4ufBLExQL0QJK2q17hvMavLGwSBwks5rQW0kgaJpZM4LdzaT>.
|
@mjanusauskas Hey Mathew! Mind pointing us to the repo if this is opensource for raising a issue report? |
I'm not sure exactly which inaccessible editor is being used.
…On 1/9/2017 12:49 AM, mrugesh mohapatra wrote:
@mjanusauskas <https://github.com/mjanusauskas> Hey Mathew! Mind
pointing us to the repo if this is opensource for raising a issue report?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#12431 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/APDp4iUWcvbQSZedazsn7H3_sOnWCuB7ks5rQdh_gaJpZM4LdzaT>.
|
Well we use https://github.com/codemirror/CodeMirror for the editor, but we would like to know if you could also help us with the repo for NVDA the open source screen reader to check with them as well? |
@raisedadead this is probably it for the open source reader https://github.com/nvaccess/nvda |
Ah, thanks @erictleung! |
Okay, I don't see any issues with the repo that relates to CodeMirror specifically. I guess we should go about, opening issues in both repos, seeking assistance on this? /cc @FreeCodeCamp/moderators |
The previous comment I shared from the NVDA lead developer came from the
issue I opened in their repo. Their position is that there is nothing
that can be done in the screen reader due to the non-standard approach
being used and that the accessibility issue must be addressed in the editor.
…On 1/9/2017 12:18 PM, mrugesh mohapatra wrote:
Okay, I don't see any issues with the repo that relates to CodeMirror
specifically. I guess we should go about, opening issues in both
repos, seeking assistance on this?
/cc @FreeCodeCamp/moderators
<https://github.com/orgs/FreeCodeCamp/teams/moderators>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#12431 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/APDp4oyVgtLfIsZKxB51xxN08OxRhHhXks5rQnoFgaJpZM4LdzaT>.
|
Can you help us with issue no, link, etc., we would love to understand what needs to be implemented? Without a clear technical idea of what's wrong, in the editor, it would be difficult to convince the maintainers of the editor for a fix. Apologies, but without more info, it's tough to proceed with this, given that we would love to support as much accessibility as we can. |
The issue I reported to the NVDA screen reader developers is:
nvaccess/nvda#6707
Thank you for anything you are able to do. I would love to be able to
participate in Free Code Camp once the accessibility issue has been
resolved.
…On 1/9/2017 12:41 PM, mrugesh mohapatra wrote:
Can you help us with issue no, link, etc., we would love to understand
what needs to be implemented? Without a clear technical idea of what's
wrong, in the editor, it would be difficult to convince the
maintainers of the editor for a fix.
Apologies, but without more info, it's tough to proceed with this,
given that we would love to support as much accessibility as we can.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#12431 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/APDp4rtyeVvew2edXgWaxr1eICnDpdKxks5rQn9wgaJpZM4LdzaT>.
|
Some Googling led me to this: http://bgrins.github.io/codemirror-accessible/ |
I'm not sure what editor is being used, or if it is helpful, but the
experience using the html and css courses and code tests on
www.w3schools.com was quite accessible as a screen reader user.
…On 1/9/2017 12:55 PM, Dylan wrote:
Some Googling led me to this:
http://bgrins.github.io/codemirror-accessible/
Might be worth a look
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#12431 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/APDp4p-8xX-xTVF0bqGhOkpAinPMDwNaks5rQoKagaJpZM4LdzaT>.
|
@mjanusauskas Thanks a lot, Mathew. We are looking into this on priority and best of our abilities...we might be delayed a bit, but rest assured will try to come up with some fix as soon as we can... meanwhile we welcome you to check out the wiki articles on our forum at https://forum.freecodecamp.com and the video series to keep continuing with the learning. /cc @QuincyLarson |
I just tried the CodeMirror Accessible demo that @dhcodes linked to. Supposedly it is lower-performance, though I didn't notice any slowdown when working with the ~10k line JavaScript file they had loaded in there. The largest projects I can imagine us having in a single CodeMirror text area would be maybe 1,000 lines, so I don't think the slowdown is all that bad. This said, I'm on a desktop. Perhaps we should see whether we can have a button in the settings that toggles the use of CodeMirror Accessible? |
A very good example of how this type of thing can be made completely
accessible can be found at
https://teachaccess.github.io/tutorial/#/3
…On Mon, Jan 9, 2017 at 1:58 PM, Quincy Larson ***@***.***> wrote:
I just tried the CodeMirror Accessible demo that @dhcodes
<https://github.com/dhcodes> linked to. Supposedly it is
lower-performance, though I didn't notice any slowdown when working with
the ~10k line JavaScript file they had loaded in there. The largest
projects I can imagine us having in a single CodeMirror text area would be
maybe 1,000 lines, so I don't think the slowdown is all that bad.
This said, I'm on a desktop.
Perhaps we should see whether we can have a button in the settings that
toggles the use of CodeMirror Accessible?
CC @BerkeleyTrue <https://github.com/BerkeleyTrue> @zersiax
<https://github.com/zersiax>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#12431 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/APDp4nMFLf9Ou0z2oNBFLPZdcxZwxMoOks5rQpFPgaJpZM4LdzaT>
.
|
I like that resource, it does show a working example ...does it use contentEditable under the hood? |
I suspect so, but am not sure.
Currently the rather tedious work around I am using for each challenge is
to select all content in the CodeMirror editor > paste into NotePad++ >
make necessary edits > Select all and copy > Paste into CodeMirror editor >
submit.
Obviously a very poor and inefficient experience for screen reader users.
…On Sun, Jan 22, 2017 at 4:19 PM, Florian Beijers ***@***.***> wrote:
I like that resource, it does show a working example ...does it use
contentEditable under the hood?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#12431 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/APDp4hHGQh0qVNCHAFDmlUzwq8u8DPIPks5rU9X5gaJpZM4LdzaT>
.
|
After using the mentioned tedious work around to complete the HTML, CSS
and Bootstrap challenges I was disappointed to find that the next
challenge of building a basic tribute web page uses CodePen.
CodePen appears to have similar major accessibility issues with it's
editor. Very frustrating for a screen reader user.
…On 1/22/2017 4:19 PM, Florian Beijers wrote:
I like that resource, it does show a working example ...does it use
contentEditable under the hood?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#12431 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/APDp4hHGQh0qVNCHAFDmlUzwq8u8DPIPks5rU9X5gaJpZM4LdzaT>.
|
@mjanusauskas we suggest Codepen for the integrated text editor and quick rendering. However, I don't think we limit it to just Codepen. To finish your project, all you need to submit is a URL to your project up and running. So feel free to use whatever hosting service to render your projects. An alternative is to use GitHub pages https://pages.github.com/. Note for contributors wanting to help, here's a resource which may help alleviate this issue http://bgrins.github.io/codemirror-accessible/ |
I looked into this a bit. It seems like TeachAccess is using the editor component from exerslide. 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 is CodeMirror's inputStyle option. This allows us to switch the editor to use contentEditable. Should I submit this as a PR? @mjanusauskas @zersiax Do you have any tips on things I should test? Would you be willing to help with QA? |
If anyone needs another example on how this should work I just stumbled across the online Orion IDE which does a heck of a lot of what I would want from a system like this. I doubt its open source though |
@QuincyLarson yeah, send me a link to a sandbox where you have this running? I'll give it a whirl. |
I have just found an open-source HTML code editor that is fully accessible. Could the current one be replaced with this? https://pode.herokuapp.com/ For the CodePen challenges, as CodePen is not accessible, could there be alternate instructions for users of assistive technology to use this website instead? |
Hi,
Please see the below post and the one it leads to. CodePen is doable, and improving. With constructive feedback, they will be better.
https://blog.codepen.io/2016/07/14/blind-accessibility-testers-society-guide-codepen/
On Dec 27, 2017, at 5:17 PM, inscriptioelectronicaaustralia <notifications@github.com> wrote:
I have just found an open-source HTML code editor that is fully accessible. Could the current one be replaced with this? https://pode.herokuapp.com/ For the CodePen challenges, as CodePen is not accessible, could there be alternate instructions for users of assistive technology to use this website instead?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
@zersiax Thanks for chiming in. I'm relived to hear this is just an issue with CodeMirror's accessibility, but that means we'll need to figure out a way to patch that. @inscriptioelectronicaaustralia We will soon support building the projects right on freeCodeCamp, so CodePen's relatively inaccessible interface won't be so much of a problem. We just need to fix the issues with CodeMirror, which is an open source library we can potentially contribute to. |
Quincy, it's good that the projects will soon be able to be built on Free Code Camp. I have just looked at the Code Mirror GitHub threads pertaining to this, and they think that it is a lot of work to make this work with screen readers, so whether people contributing to this thread or them can sort out the problem will lead to a win-win situation for not only us, but also the other websites that use Code Mirror. Looking at the situation hypothetically, are there many missing features from the Pode tool I referenced above that would affect Free Code Camp if it were to be implemented as a replacement for Code Mirror? |
Hi,
Expressing my sinsere appreciation for folks looking into this. I am moving toward actually finishing JavaScript right now, and can’t wait to be able to write real code that helps people, especially FreeCodeCamp.
Jim
From: inscriptioelectronicaaustralia [mailto:notifications@github.com]
Sent: Thursday, December 28, 2017 2:08 AM
To: freeCodeCamp/freeCodeCamp <freeCodeCamp@noreply.github.com>
Cc: Jim Homme <jhomme@benderconsult.com>; Mention <mention@noreply.github.com>
Subject: Re: [freeCodeCamp/freeCodeCamp] Contents of editor can not be reviewed by screen readers (#12431)
Quincy, it's good that the projects will soon be able to be built on Free Code Camp.
I have just looked at the Code Mirror GitHub threads pertaining to this, and they think that it is a lot of work to make this work with screen readers, so whether people contributing to this thread or them can sort out the problem will lead to a win-win situation for not only us, but also the other websites that use Code Mirror.
Looking at the situation hypothetically, are there many missing features from the Pode tool I referenced above that would affect Free Code Camp if it were to be implemented as a replacement for Code Mirror?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub<#12431 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AdDz24NBYQr6hKSp_HsEnOryzgzIkA24ks5tEz5PgaJpZM4LdzaT>.
|
@inscriptioelectronicaaustralia CodeMirror is a widely-used project with tons of features that we use. I'm skeptical that Pode could do everything CodeMirror does. I think the best option is for us to patch CodeMirror. |
Although I do agree that patching CodeMirror is the most , let's call it effective, way of solving the problem, we do have to stay somewhat realistic. |
Quincy, I understand that CodeMirror is clearly the superior solution (I think Pode was made to be extremely simple as it was intended just for beginners), and it would be ideal to make it accessible if that is possible. The reason I asked what features Pode is lacking is that, once the text in CodeMirror edit fields can be read by screen readers, if CodeMirror uses any other visual features to assist in coding, these should also eventually be made accessible if possible. |
@inscriptioelectronicaaustralia @zersiax @jhomme It sounds like from reading codemirror/codemirror5#4604 (comment) that @marijnh is planning to move to content editable, which should make CodeMirror significantly more usable. I commented on the issue asking whether there's anything we could do to help. Worst case scenario, we might be able to build an "accessibility mode" that allows campers to switch from CodeMirror for Pode in the settings, thought that would be an indeterminately large amount of work. Let's wait and see what @marijnh has to say. |
I read marijnh's response, and it seems like it might be a while until we get accessibility. One thing to also take into consideration is that unfortunately, even when people say "a few months", that is rarely the case for accessibility as it too often gets very low priority. I'm not saying that this is what the developers of CodeMirror think, but it is a very disturbing worldwide trend. I have seen examples when people say "a few months", and it turns into a few more months ... then a few more ... and I think you get the picture. |
No one promised anything in a few months, except that work would start on a new approach, which will definitely take a while to build. |
Hi @marijnh Thanks for considering the re-archi of CodeMirror and we sincerely understand the efforts with everything being an open source effort. Being a non-profit ourselves, please let us know, if you would need any coding assistance (pro-bono) from our community devs in this effort, we are around to help you in this effort, in any way we are able. The battle tested knowledge of the CM project (and its contributors) is invaluable and hence we are dedicated to help in this effort, should you guide us with specifics on issue logged over at the CodeMirror repo. Hi @inscriptioelectronicaaustralia
We sincerely understand and share the frustration, and we are prepared to dedicate efforts in any possible solution, but IMHO, helping CM become better at a11y, is the good thing to do. I think that's an effort well spent, as we will not only be helping freeCodeCamp community, but anywhere CM is in use for greater good of a11y everywhere else as well. That said, @zersiax analysis above is correct for the purposes of current state of our code base:
We should start looking at implementing a interim solution, while we check with the CM team for how can we be of concrete help to them. |
The most useful type of contribution would be for screen-reader users and/or accessibility experts from your community to help test our new prototype, once we have it, so that issues can be spotted and addressed early on. We'll do an announcement when we have something to show—if you want to make sure you're notified, you can send me an email with contact data. |
@svinkle I would appreciated your input on this a11y issue. Is the stop-gap suggested something that could work until the
|
If I understand the approach correctly, the CM editor content would load in a Would the CM editor be hidden from view? I assume there would only be the |
Hi @QuincyLarson and everyone involved, Thanks a lot for the feedbacks and considerations, in finding a solution. There is one more consideration that we have hit which I just happened to realise with some discussions with @BerkeleyTrue about a separate topic on CM, before we go ahead with any of the monkey-patching with another textarea. 😓 On beta (our new react front-end) we are not dependent on CodeMirror directly, but on a react component We may have to update that to a different component sometime in future, but that said none of those components in discussion have the a11y support same as in the parent CM on which wrap their functionality. So a monkey-patch may not be trivial. |
@raisedadead Thanks for pointing this out. We will wait for CodeMirror to do their accessibility update, then evaluate the process of monkey patching from there. |
We are happy to announce that we have switched to Monaco editor on our learn platform. It has a11y built in. We absolutely love CodeMirror and thanks to @marijnh for the awesome work that you and the team has done. Its been the de facto editor for all these years. We would still love to use it in future projects, because its just so light and simple. Thanks @zersiax, @mjanusauskas, @inscriptioelectronicaaustralia and Everyone for chiming in and making the platform more accessible. |
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:
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.
The text was updated successfully, but these errors were encountered: