Making volume control understandable to screen readers
Hey guys. I'm making a music website, and I've created a button that handles volume control.
When you click on this button, it toggles whether the music is muted or not.
When you scroll on this button, or use the arrow keys, it increases or decreases the volume between 0 and 100.
I've not done much accessibility before (bar some simple
aria-label stuff), so I'm not sure how I communicate my intent to someone using a screen reader. I've had a look at a few components from Radix (I'm using NextJS, but it's not particularly relevant here) but I can't translate what they've done to my use case.
Thanks in advance!4 Replies
Are you using the
audio tag?
I'd assume that tag has a lot of built in accessibility already
Or is it a pure button that controls the volume of all audio on the site?its a custom button
not using the audio tag
You'd need several of the different ARIA attributes and roles to communicate with the Screen Reader an other Assistive Technology.
Maybe a native range input would be better than a custom button.
You can wrap it in labels and spans or divs and use CSS to make it pretty and trigger other native controls like a checkbox to communicate the on/off state of the audio.
They already support keyboard control out of the box and use the proper events to communicate with the user's AT to make the proper announcements.
You'd end up writing a buttload of extra code to make your "custom elements" act the same as any native elements or form control and it'd probably still fail.
Managing UI events and state for assistive tech is very, very complex and easy to mess up. Done wrong this can actually do more harm than good.
MDN has a list on ARIA attributes and roles. Also check the WGAC and WAI guides for samples and how to use them.
If you're on Windows install NVDA. Use VoiceOver on Mac.
Either way learn to use a screen reader so you understand what they announce and how they name stuff. You'll need to learn many keyboard shortcuts 😄
Good luck.
Thank you