[Enhancement]: Rewrite volume control for better accessibility #951

New issue

Open

opened 2025-10-14 18:09:52 -06:00 by navan · 0 comments

navan commented

2025-10-14 18:09:52 -06:00

Owner

Originally created by @Timtam on 11/26/2024

Type of Enhancement

Web Interface/Frontend

Describe the Feature/Enhancement

Accessibility through screen readers is currently not given with the volume control the way it is implemented right now. The only thing screen reader users can see is a button labelled "volume", which, when clicked, mutes / unmutes the audio. Since screen reader users typically aren't using any mouse at all, changing the volume is not possible. I'd therefore request to either rewrite the entire volume control to be a regular slider in the first place, or some similar control. That would be the best solution, as it'd work for sighted and visually impaired people alike. Another alternative would be to provide buttons that are visible to screen readers only to change volume up/down accordingly, although building a screen reader only solution kinda misses the point that accessibility is a thing that affects everyone, not just people using a screen reader.
Oh, and it'd be great if there was a way to actually see the volume level that is currently set, which isn't possible right now. A regular slider would also solve this issue, as a browser-native slider control will get picked up just fine by any screen reader, thus solving both issues at once, easily being able to change the volume and check the currently configured volume.

Why would this be helpful?

ABS currently has some accessibility issues with screen readers, some of them can be fixed with the help of aria, which is what i'm currently trying to do. The volume control isn't accessible at all, since the entire volume control happens with the mouse. That means that visually impaired people who are just using the keyboard can't change the volume setting right now.

Future Implementation (Screenshot)

A slider (plus maybe a mute button) would be just fine I think. I don't know how well that would fit into the current player, so maybe some styling around that would be required too.

Audiobookshelf Server Version

v2.17.2

Current Implementation (Screenshot)

The site-wide player.

*Originally created by @Timtam on 11/26/2024* ### Type of Enhancement Web Interface/Frontend ### Describe the Feature/Enhancement Accessibility through screen readers is currently not given with the volume control the way it is implemented right now. The only thing screen reader users can see is a button labelled "volume", which, when clicked, mutes / unmutes the audio. Since screen reader users typically aren't using any mouse at all, changing the volume is not possible. I'd therefore request to either rewrite the entire volume control to be a regular slider in the first place, or some similar control. That would be the best solution, as it'd work for sighted and visually impaired people alike. Another alternative would be to provide buttons that are visible to screen readers only to change volume up/down accordingly, although building a screen reader only solution kinda misses the point that accessibility is a thing that affects everyone, not just people using a screen reader. Oh, and it'd be great if there was a way to actually see the volume level that is currently set, which isn't possible right now. A regular slider would also solve this issue, as a browser-native slider control will get picked up just fine by any screen reader, thus solving both issues at once, easily being able to change the volume and check the currently configured volume. ### Why would this be helpful? ABS currently has some accessibility issues with screen readers, some of them can be fixed with the help of aria, which is what i'm currently trying to do. The volume control isn't accessible at all, since the entire volume control happens with the mouse. That means that visually impaired people who are just using the keyboard can't change the volume setting right now. ### Future Implementation (Screenshot) A slider (plus maybe a mute button) would be just fine I think. I don't know how well that would fit into the current player, so maybe some styling around that would be required too. ### Audiobookshelf Server Version v2.17.2 ### Current Implementation (Screenshot) The site-wide player.