starred/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-05-30 23:40:40 +02:00
Code Issues 1.0k Packages Projects Releases 10 Wiki Activity

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

New Issue
Open
opened 2026-04-25 00:06:39 +02:00 by adam · 2 comments
adam commented 2026-04-25 00:06:39 +02:00
Owner
Copy Link
Copy Source

Originally created by @Timtam on GitHub (Nov 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 GitHub (Nov 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.
adam added the enhancement label 2026-04-25 00:06:39 +02:00
adam commented 2026-04-25 00:06:39 +02:00
Author
Owner
Copy Link
Copy Source

@nichwall commented on GitHub (Jan 7, 2025):

Adding on to this, a tooltip shows up to the left of the volume button which covers the "playback speed" option, which makes it difficult to change the playback speed if the mouse moves over the volume control at all. Maybe the volume slider could be replaced with a pop-up similar to the "playback speed" option, with a slider and buttons for +/- 1 and 10?

The playback speed does not have a visible tooltip, which could also be removed for the volume control.

Screenshots of current implementation:
Normal view
Tool-tip view
Playback Speed Menu

@nichwall commented on GitHub (Jan 7, 2025): Adding on to this, a tooltip shows up to the left of the volume button which covers the "playback speed" option, which makes it difficult to change the playback speed if the mouse moves over the volume control at all. Maybe the volume slider could be replaced with a pop-up similar to the "playback speed" option, with a slider and buttons for +/- 1 and 10? The playback speed does not have a visible tooltip, which could also be removed for the volume control. Screenshots of current implementation: ![Normal view](https://github.com/user-attachments/assets/d4c49cb6-93ab-436e-9ddf-72bac2470b2c) ![Tool-tip view](https://github.com/user-attachments/assets/a1a0f20b-7466-4998-a27b-f0d5b6bdeaf1) ![Playback Speed Menu](https://github.com/user-attachments/assets/a6f3beb2-e232-4454-a607-4e309d456a27)
adam commented 2026-04-25 00:06:39 +02:00
Author
Owner
Copy Link
Copy Source

@advplyr commented on GitHub (Jan 7, 2025):

I just moved the tooltip so it is below the volume icon for the next release.
image

As for this issue I took a look at how youtube handles this since the functionality is the same as ours.
They are setting the width of the volume slider to 0 instead of hiding it. I guess that is still available to screen readers?

As a sidenote I noticed they are using role=slider which isn't a valid value for role.

@advplyr commented on GitHub (Jan 7, 2025): I just moved the tooltip so it is below the volume icon for the next release. ![image](https://github.com/user-attachments/assets/342ef1a5-909b-4d9e-955b-91b578508785) As for this issue I took a look at how youtube handles this since the functionality is the same as ours. They are setting the width of the volume slider to 0 instead of hiding it. I guess that is still available to screen readers? As a sidenote I noticed they are using `role=slider` which isn't a valid value for role.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
authentication
backlog
bug
chapter editor
config-issue
ebooks
encoding/embedding
enhancement
help wanted
listening sessions & progress
planned
possible plugin
progress sync
pull-request
Mirrored from GitHub Pull Request
 sorting/filtering/searching
unable to reproduce
upload
users & permissions
waiting
No Label enhancement
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#2380
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?