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!
Was this page helpful?