a11y: Links distinguished only by color
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 140
- Forks
- 100
- Avg merge
- 1h 3m
- Merged PRs (30d)
- 30
Description
Bugs
Not 100% sure this is a Paragon issue, but in the default theme hyperlinks in course content are differentiated only by color. Specifically:
Where
The course overview field, rendered on the About page inside div.xblock-student_view-about → div.course-about-overview). Measured on a default Tutor install with the default “Open edX” theme.
Finding
Axe link-in-text-block (serious, WCAG 2.1 A, SC 1.4.1 Use of Color) fails on one node of the Demo Course:
Both of the rule’s conditions fail:
Contrast against surrounding text is 1.72:1 (minimum 3:1) — link #006daa on body text #454545
text-decoration-line: none, so nothing but color distinguishes it
I've added a bug to the Demo Course to override the default as well (https://github.com/openedx/openedx-demo-course/issues/73), but as part of end-to-end testing I'm starting to see more of these.
If this isn't the right place, just let me know and I'll move it!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start at the course overview on the About page, specifically the div.xblock-student_view-about > div.course-about-overview path, and reproduce the Axe link-in-text-block failure with the default Open edX theme. Trace the hyperlink styling and verify that the FAQ link meets the stated contrast and non-color distinction requirements.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100