Hi,
When I take the CSS course in the Responsive Web Design certification using the latest version of JAWS 2022 and Chrome, I turn on accessibility mode in the editor. When I up and down arrow with forms mode on like one is supposed to do when editing with JAWS, I repeatedly hear spoken “Editor, , end editor”. In the past six months I have been on FreeCodeCamp, I have not come across this. What should I do?
Thank you,
Mike
Hey Mike, did this start happening immediately after you upgraded to JAWS 2022? Or did it initially work properly with JAWS 2022 and then at some point after the upgrade you started hearing the extra “Editor” stuff.
I am able to replicate this with JAWS 2022 as well but JAWS 2021 is not having this issue.
Update: This issue is not occurring with NVDA/Chrome.
The culprit causing this issue in JAWS 2022 is the aria-roledescription attribute in the textarea element:
<textarea data-mprt="6" class="inputarea monaco-mouse-cursor-text" wrap="off" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" aria-label="Editor content;Press Alt+F1 for Accessibility Options." tabindex="0" role="textbox" aria-roledescription="editor" aria-multiline="true" aria-haspopup="false" aria-autocomplete="both" ></textarea>
If I change the value of aria-roledescription to something else then JAWS will announce that instead. And if I get rid of it completely then this issues goes away.
According to one very well known accessibility expert, this attribute should be avoided and one of the reasons is excessive verbosity:
My guess is that JAWS 2022 is handling the attribute differently than earlier versions since JAWS 2021 does not have this issue. Personally, I don’t see a need for this attribute in the first place but I’m not sure if FCC has any control over it or if it is baked into the editor.
It looks like this is baked into the editor. It is being set on line 71 in the file node_modules/monaco-editor/esm/vs/editor/browser/controller/textAreaHandler.js:
this.textArea.setAttribute('aria-roledescription', nls.localize('editor', "editor"));
Not sure where the ultimate blame lies here. It does seem like JAWS 2022 is now handling the attribute differently than previous versions but I’m not sure this attribute needs to be there in the first place and is just causing unnecessary problems.
I’ll see if I can find any more information on this and if not then will probably end up opening bugs with both JAWS and the monaco editor and let them fight it out.
Hi Bruce,
Thank you for taking the time to investigate this. I’ve been pasting the code from the editor into Notepad++ for now, making the changes, and then pasting it back into the Free Code Camp editor.
For my future reference, did you investigate this by right clicking on the editor in your browser, and inspecting the HTML associated with it?
Thank you,
Mike
Yes, I used the browser’s dev tools inspector to play with the aria-roledescription attribute.
@MikeW2021 Thank you, for taking the time to open this.
@bbsmooth I am unfamiliar with JAWS. Is this something that we can fix within freeCodeCamp/freeCodeCamp? Or, is this a change in this JAWS (extension?) app?
Hi Shaun,
Thank you for responding. JAWS is a program for the blind developed by Freedom Scientific. Bruce has this spot on. Please observe him. Thank you for your support.
Mike
I’m guessing we can fix this ourselves by just removing the aria-roledescription attribute on the textarea in the editor after it loads on the page. I was going to look into the code and figure out where the best spot to do that would be but perhaps someone who is more familiar with the code base would have a better idea of where to do this? Perhaps I should open a github issue and we can go from there?
There is a change in the way JAWS is handling this attribute since this is only occurring in the 2022 version and not previous versions. My research is showing that aria-roledescription is not used all that often and isn’t even necessarily required since it just causes the screen reader to announce a different role than the default role of the textarea. So a role will still be announced without this attribute present, it will just be the default role for the textarea, which I’m guessing most people who use screen readers will be fine with. And since the textarea has an aria-label that includes the word “editor” I’m not sure how much you gain by adding aria-roledescription set to “editor” as well.
I’m in the process of doing some exhaustive testing and plan on opening a bug with FreedomScientific to make them aware that JAWS is seems to be handling this attribute differently now and it is too verbose. I will probably open an issue on the monaco-editor repo to let them know as well.
All that sounds great. Thank you, Bruce.
I have opened an issue with FreedomScientific:
JAWS 2022 overly verbose with aria-roledescription on textarea
I’m assuming this is going to take a while for them to fix. In the meantime, I’m still thinking that the best option is to manually remove the aria-roledescription attribute from the textarea after the monaco editor loads on the page.
Removing the aria role description also sounds good to me.
I have opened the following issue for this in the FCC github repo:
JAWS 2022 overly verbose with aria-roledescription attribute in monaco editor
We can continue any discussion there.
@MikeW2021 Hey Mike, just wanted to let you know that this issue has officially been confirmed as a bug in JAWS 2022. So congratulations, I guess, on being the first person to report it.
Also, I do have a fix for this in place on my local copy of FCC (it just removes the aria-roledescription attribute from the editor). Now I am in the process of trying to figure out what’s the best way to roll it out. I suppose this attribute could be providing some benefit to certain users and they might not want to lose it, so it might not be best to just remove it globally without providing a way for users to re-enable it if needed. Do you have any thoughts on this?
Hi Bruce,
Thank you for all the research and testing you have put into this, to confirm that this is a bug with jaws 2022.
I wouldn’t globally remove the aria role, without testing across multiple screen readers and browsers, to see if there are benefits that it could be providing to other users.
Thank you,
Mike
At this time, my biggest suggestion for people using Jaws 2022 is to copy the code out of the free code camp editor into a more accessible editor like Notepad++, do the exercises there, and then paste the completed code back into the editor. When they get back into the free code camp editor, they could do control A to select all, and then paste over everything else in the editor. That’s what I would do, if using a different screen reader at this time wasn’t an option.
Hey @MikeW2021, my fix for the JAWS roledescription bug has finally made it into production! I’d love it if you could give it a try and give your feedback. There is no official documentation for it yet so I’ll just explain what to do here.
While in the FCC editor use the following key combination to toggle the aria-roledescription attribute off and on:
Ctrl + Alt + J.
This setting should persist as you work your way through the challenges.
This setting can also be reached through the F1 menu (it’s called ‘Toggle aria-roledescription’).
Hi,
Apologies for the late reply.
Your changes work wonders, and persist from challenge to challenge.
The only feedback I have is that many JAWS users, including me, use the keyboard shortcut CTRL+ALT+J, to start JAWS. You might want to consider changing the shortcut in Free Code Camp to something like CTRL+ALT+A, where A stands for “accessibility”.
Thank you,
Mike
Thank you for the feedback @MikeW2021 . I didn’t know about CTRL + ALT + J for starting JAWS. I used the letter J because I was thinking of this as the “JAWS bug fix”. But there is no reason it can’t be something else. What are your thoughts on using the letter R instead (to represent roledescription)? The two other keys could be any combination of the CTRL, ALT, SHIFT keys.
I think CTRL+SHIFT+R sounds great. I practiced pushing that combination, and I like how the right shift key is right above the right CTRL key.