Describe the Issue
I am a 100% visually impaired user learning to code using the NVDA screen reader on the freeCodeCamp platform. I really appreciate the curriculum and the design of the labs, but I have encountered a few accessibility issues recently that significantly impact the user experience:
- Guitar sound setting is broken: The guitar sound setting is not working. Even with the sound turned on and the volume set to 100, it does not play upon completing a challenge.
- Missing aria-live announcement: When a code challenge is successfully completed, the screen reader does not announce that the code has passed. I have to navigate manually to check the status. Adding an aria-live attribute to the success message would allow it to be announced automatically.
- Code reading issue in the editor: When moving to the next step in a workshop, the screen reader is unable to read the previously written code in the editor. While the code is visually present, the screen reader only identifies the first character when navigating with arrow keys. (For example, if I write console.log("Hi there"); in step 1 and move to step 2, the screen reader only reads "C").
Expected behavior:
1. Success sound and code typing sound should play when enabled.
2. Screen reader should automatically announce when a challenge is passed.
3. The code editor should allow standard line-by-line and character-by-character reading of the existing code using screen reader arrow key navigation.
Affected Page
Workshops
Steps to Reproduce
- Turn on the NVDA screen reader.
- Launch any workshop in freecodecamp.
- make sure to enable the sound from settings.
- Open the editor and press ctrl + e to enable accessibility.
Type the code.
Press ctrl + enter.
Observe the screen reader behaviour. It is not announcing any status message like code is passed or have any errors.
Move to next step.
Again open the editor and navigate with the arrow keys and observe the screen reader behaviour.
The code is present there, but screen reader only reads the first letter.
Expected behavior
- Success sound and code typing sound should play when enabled.
- Screen reader should automatically announce when a challenge is passed.
- The code editor should allow standard line-by-line and character-by-character reading of the existing code using screen reader arrow key navigation.
Screenshots
No response
System
- Device: Windows 11 desktop
- OS: Windows 11
- Browser: Google Chrome
- Version: [e.g. 22]
Additional context
No response
Describe the Issue
I am a 100% visually impaired user learning to code using the NVDA screen reader on the freeCodeCamp platform. I really appreciate the curriculum and the design of the labs, but I have encountered a few accessibility issues recently that significantly impact the user experience:
Expected behavior:
1. Success sound and code typing sound should play when enabled.
2. Screen reader should automatically announce when a challenge is passed.
3. The code editor should allow standard line-by-line and character-by-character reading of the existing code using screen reader arrow key navigation.
Affected Page
Workshops
Steps to Reproduce
Type the code.
Press ctrl + enter.
Observe the screen reader behaviour. It is not announcing any status message like code is passed or have any errors.
Move to next step.
Again open the editor and navigate with the arrow keys and observe the screen reader behaviour.
The code is present there, but screen reader only reads the first letter.
Expected behavior
Screenshots
No response
System
Additional context
No response