owen/lms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve accessibility for screen reader users

Browse Source 
- Marked UI regions with ARIA landmarks
- Added text labels to icon-only buttons
- Added ARIA state semantics to track star buttons
- Added static alt text to cover art images
This commit is contained in:
Tuukka Ojala
2025-12-12 20:29:01 +02:00
parent 0c5883928e
commit d129bd766b
10 changed files with 46 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
approot/artist.xml
+1 -1
View File
@@ -15,7 +15,7 @@
${</if-has-biography>}
<div class="btn-group">
${play-btn class="btn btn-primary"}
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"/>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" aria-label="${tr:Lms.more}"/>
<ul class="dropdown-menu">
<li>${play-next class="dropdown-item"}</li>
<li>${play-last class="dropdown-item"}</li>
approot/main.xml
+2 -2
View File
@@ -3,11 +3,11 @@
<message id="Lms.main.template">
${navbar}
<div class="container">
<main class="container">
${contents}
${notifications class="toast-container Lms-notification-container p-3"}
${modal}
</div>
</main>
${player class="fixed-bottom bg-dark Lms-player"}
</message>
approot/mediaplayer.xml
+6 -6
View File
@@ -5,9 +5,9 @@
<message id="Lms.MediaPlayer.template">
<audio id="lms-mp-audio">
</audio>
<div class="container">
<div class="container" role="region" aria-label="${tr:Lms.Player.now-playing}">
<div class="p-1 my-1 position-relative">
<input id="lms-mp-seek" class="Lms-player-seek-common Lms-player-seek" type="range" min="0" max="100" step="1" value="0"/>
<input id="lms-mp-seek" class="Lms-player-seek-common Lms-player-seek" type="range" min="0" max="100" step="1" value="0" aria-label="${tr:Lms.Player.seek}"/>
<div class="progress Lms-player-seek-common bg-secondary rounded">
<div id="lms-mp-progress" class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
</div>
@@ -15,13 +15,13 @@
<div class="d-flex align-items-center">
<div class="py-2 pe-2 d-inline-flex">
<button id="lms-mp-previous" class="btn btn-sm btn-outline-primary border-0">
<button id="lms-mp-previous" class="btn btn-sm btn-outline-primary border-0" aria-label="${tr:Lms.Player.previous}">
<i class="fa fa-fw fa-step-backward"/>
</button>
<button id="lms-mp-playpause" class="btn btn-outline-primary border-0">
<button id="lms-mp-playpause" class="btn btn-outline-primary border-0" aria-label="${tr:Lms.Player.play-pause}">
<i class="fa fa-fw fa-play"/>
</button>
<button id="lms-mp-next" class="btn btn-sm btn-outline-primary border-0">
<button id="lms-mp-next" class="btn btn-sm btn-outline-primary border-0" aria-label="${tr:Lms.Player.next}">
<i class="fa fa-fw fa-step-forward"/>
</button>
</div>
@@ -39,7 +39,7 @@
</div>
<div class="p-2 d-none d-md-flex align-items-center Lms-player-volume-container">
<i id="lms-mp-volume" class="fa fa-fw fa-volume-up link-primary me-1"></i>
<input id ="lms-mp-volume-slider" class="form-range" type="range" min="0" max="1" step="0.01" value="0.8"/>
<input id ="lms-mp-volume-slider" class="form-range" type="range" min="0" max="1" step="0.01" value="0.8" aria-label="${tr:Lms.Player.volume}"/>
</div>
<div class="py-2 ps-2">
${playqueue-btn class="btn btn-outline-primary border-0"}
approot/messages.xml
+11
View File
@@ -15,6 +15,7 @@
<message id="Lms.loading">Loading...</message>
<message id="Lms.login">Login</message>
<message id="Lms.logout"><i class="fa fa-fw fa-sign-out" aria-hidden="true"></i> Logout</message>
<message id="Lms.more">More...</message>
<message id="Lms.ok">Ok</message>
<message id="Lms.password">Password</message>
<message id="Lms.password-bad-login-combination">Bad login / password combination</message>
@@ -197,6 +198,7 @@
<message id="Lms.Explore.all">All</message>
<message id="Lms.Explore.artists">Artists</message>
<message id="Lms.Explore.bitrate">Bitrate</message>
<message id="Lms.Explore.cover-art">Cover art</message>
<message id="Lms.Explore.codec">Codec</message>
<message id="Lms.Explore.download">Download</message>
<message id="Lms.Explore.duration">Duration</message>
@@ -207,6 +209,7 @@
<message id="Lms.Explore.most-played">Most played</message>
<message id="Lms.Explore.musicbrainz-artist">MusicBrainz Artist</message>
<message id="Lms.Explore.musicbrainz-release">MusicBrainz Release</message>
<message id="Lms.Explore.play-item">Play {1}</message>
<message id="Lms.Explore.play">Play</message>
<message id="Lms.Explore.play-last">Play last</message>
<message id="Lms.Explore.play-next">Play next</message>
@@ -221,6 +224,7 @@
<message id="Lms.Explore.releases">Albums</message>
<message id="Lms.Explore.search">Search</message>
<message id="Lms.Explore.star">Star</message>
<message id="Lms.Explore.star-item">Star {1}</message>
<message id="Lms.Explore.starred">Starred</message>
<message id="Lms.Explore.track-info">Track information</message>
<message id="Lms.Explore.track-lyrics">Lyrics</message>
@@ -309,6 +313,13 @@
<!--Player-->
<message id="Lms.Player.transcoding-active">Transcoding active</message>
<message id="Lms.Player.now-playing">Now playing</message>
<message id="Lms.Player.previous">Previous</message>
<message id="Lms.Player.play-pause">Play / pause</message>
<message id="Lms.Player.next">Next</message>
<message id="Lms.Player.seek">Seek</message>
<message id="Lms.Player.volume">Volume</message>
<!--Playqueue-->
<message id="Lms.PlayQueue.clear">Clear</message>
approot/release.xml
+1 -1
View File
@@ -18,7 +18,7 @@
${clusters class="mb-2"}
<div class="btn-group">
${play-btn class="btn btn-primary"}
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"/>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" aria-label="${tr:Lms.more}"/>
<ul class="dropdown-menu">
<li>${play-next class="dropdown-item"}</li>
<li>${play-last class="dropdown-item"}</li>
approot/releases.xml
+1 -1
View File
@@ -6,7 +6,7 @@
<div class="d-flex justify-content-between align-items-start mb-3">
<div class="btn-group me-1">
${play-btn class="btn btn-primary"}
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"/>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" aria-label="${tr:Lms.more}"/>
<ul class="dropdown-menu">
<li>${play-next class="dropdown-item"}</li>
<li>${play-last class="dropdown-item"}</li>
approot/tracks.xml
+1 -1
View File
@@ -7,7 +7,7 @@
<div class="d-flex justify-content-between align-items-start mb-3">
<div class="btn-group me-1">
${play-btn class="btn btn-primary"}
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"/>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" aria-label="${tr:Lms.more}"/>
<ul class="dropdown-menu">
<li>${play-next class="dropdown-item"}</li>
<li>${play-last class="dropdown-item"}</li>