Skip to content

Need improvement in accessibility #67296

@vrajtank02

Description

@vrajtank02

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:

  1. 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.
  2. 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.
  3. 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

  1. Turn on the NVDA screen reader.
  2. Launch any workshop in freecodecamp.
  3. make sure to enable the sound from settings.
  4. 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

  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.

Screenshots

No response

System

  • Device: Windows 11 desktop
  • OS: Windows 11
  • Browser: Google Chrome
  • Version: [e.g. 22]

Additional context

No response

Metadata

Metadata

Assignees

Labels

platform: learnUI side of the client application that needs familiarity with React, Gatsby etc.scope: a11yThreads for addressing accessibility issues.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions