Some Fixes that will help screen reader users with the interface

The coding experience on Free Code Camp is the most accessible interactive tutorial I have seen on the internet for screen reader users. You guys did an excellent job and I’ve been sending Free Code Camp to everyone.
I have been going through the examples and there are a couple things that would really help the experience for screen reader users:

  1. Please give the code editor an element with a role on the page. I would suggest an input role of some kind or a role=“application”. Do whatever looks good, but there is currently no editor actually on the page for screen reader users and the only way we can get to it is by tabbing and most screen reader users use the arrow keys rather than tabbing when browsing webpages like this.
  2. It would be amazing if there was a list of key commands that one can view. Google uses ctrl+/ to view key commands.
  3. It would save a lot of time if while in the editor we could press a key command and view a modal of the current lesson and press another key command to view a modal of hints. Currently we need to exit out of the editor (which is where we begin when the page loads), hit the shift+h key, and arrow down the code, arrow down about 10 times, hit tab to get back into the editor and find where we need to be in the code. It’s not needed, but it would make the UX a lot better. Then the process would be press key command, read the instructions, press escape and be right back in the editor where they were before. Same for the list of tasks. This will be really useful once the code gets more difficult.
  4. There are 3 blank lines on the page. I believe they are:
  • <a href=""><img src="" height="38px"></a> (according to the first HTML tutorial, this img needs an alt attribute)
  • There are 2 blank elements in between the hints and the frame that just say “clickable” and I’m pretty sure they have something to do with the long list of divs around the editor.
  1. It would be very nice if there was a key command to get into the editor or heading above the editor.
  2. It would be very nice if there was a heading above the code rendering frame saying what it is.
  3. It would be very nice if ctrl+up and ctrl+down arrows moved to the previous or next double line break (\n\n). It makes moving through code much faster.
  4. It would be very useful if one could customize the key commands on the site or the editor (basically have a keymap and have a setting to change those key mappings site-wide under settings).
    Thank you,
1 Like

I would open an issue with all of this (just transfer all of this as is) to the FreeCodeCamp repo on GitHub:

This is really awesome, btw

Done, the Github issue is: