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/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"}