Skip to content

fix(a11y): convey course progress to screen reader users#67839

Open
Jose-Renny wants to merge 2 commits into
freeCodeCamp:mainfrom
Jose-Renny:fix/a11y-course-progress-screen-reader
Open

fix(a11y): convey course progress to screen reader users#67839
Jose-Renny wants to merge 2 commits into
freeCodeCamp:mainfrom
Jose-Renny:fix/a11y-course-progress-screen-reader

Conversation

@Jose-Renny
Copy link
Copy Markdown

@Jose-Renny Jose-Renny commented Jun 6, 2026

Checklist:

Closes #67770

Summary

This PR fixes an accessibility regression in the Learn UI where course progress was no longer conveyed to screen reader users.

Prevously, screen reader users could understand progress for a lesson or block, but after the recent UI changes the progress bar became effectively visual-only. This update adds accessible progress semantics so assistive technologies can announce the course progress again.

Changes

  • add role="progressbar" to the course progress UI
  • add aria-label using the block title and progress meta text
  • add aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext
  • add tests to verify progress is exposed to screen readers in both standard and minified modes

@Jose-Renny Jose-Renny requested review from a team as code owners June 6, 2026 16:05
@github-actions github-actions Bot added the platform: learn UI side of the client application that needs familiarity with React, Gatsby etc. label Jun 6, 2026
@gikf gikf added scope: a11y Threads for addressing accessibility issues. status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending. labels Jun 6, 2026
@github-actions github-actions Bot added deprioritized PR reviews are deprioritized; lacks productive input and ignores codebase best practices. and removed deprioritized PR reviews are deprioritized; lacks productive input and ignores codebase best practices. labels Jun 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

platform: learn UI side of the client application that needs familiarity with React, Gatsby etc. scope: a11y Threads for addressing accessibility issues. status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Course progress steps are not conveyed to the screen reader users

2 participants