Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Improve the accessibility of Code Radio app

See original GitHub issue

Affected page

https://coderadio.freecodecamp.org/

To Reproduce

I made a quick scan using the axe DevTools browser add-on and found that the page has some critical accessibility issues.

We have 5 errors when the music is not played.

And 9 when the music is playing (this has to do with the color contrast of the visualizer and the indicator).

To Resolve

Remove aria-label from the canvas element
Add aria-label to the button element for song history
Add aria-label to the select element used for stream selection
Remove user-scalable=no from the meta tag as well as set its maximum-scale to a value that is not less than 5. (axe requires the value to not be less than 2, but Lighthouse sets the bar at 5)
Revisit the color contrast of the elements in question

Issue Analytics

State:
Created 2 years ago
Comments:24 (15 by maintainers)

Top GitHub Comments

2reactions

ahmadabdolsahebcommented, Jul 1, 2021

How about this

[history] [----------------------------] [play/pause] [volume] [get help(question mark)] [chat]

get help menu would have the keyboard shortcuts and report an issue( should go to the forum under the support category. )

1reaction

bbsmoothcommented, Dec 30, 2021

Are you still looking for help with accessibility enhancements for the radio? I’m currently preparing for the Web Accessibility Specialist certification offered by the IAAP and would be happy to help out.