Add an `alt` attribute to images, to increase accessibility

airsonic-main/src/main/webapp/WEB-INF/jsp/changeCoverArt.jsp

@@ -110,13 +110,17 @@
     <div style="clear:both;"></div>
     <div id="images"></div>
     <div style="clear:both;"></div>
-    <a href="https://last.fm/" target="_blank" rel="noopener noreferrer"><img src="<c:url value="/icons/lastfm.gif"/>"></a>
+    <a href="https://last.fm/" target="_blank" rel="noopener noreferrer">
+        <img alt="Lastfm icon" src="<c:url value="/icons/lastfm.gif"/>">
+    </a>
     <span class="detail" style="padding-left:1em"><fmt:message key="changecoverart.courtesy"/></span>
 </div>
 
 <div id="template" class="coverart dropshadow" style="float:left;margin-right:2.0em;margin-bottom:2.0em;width:250px;display:none">
     <div>
-        <a class="search-result-link"><img class="search-result-image" style="width:250px;height:250px"></a>
+        <a class="search-result-link">
+            <img alt="Search result" class="search-result-image" style="width:250px;height:250px">
+        </a>
         <div class="search-result-artist caption1"></div>
         <div class="search-result-album caption2"></div>
     </div>

airsonic-main/src/main/webapp/WEB-INF/jsp/coverArt.jsp

@@ -72,13 +72,13 @@ PARAMETERS
         </c:url>
 
         <div style="position: relative; width: 0; height: 0">
-            <img src="<spring:theme code="playOverlayImage"/>" id="${playId}"
+            <img alt="Play overlay" src="<spring:theme code="playOverlayImage"/>" id="${playId}"
                  style="position: relative; top: 8px; left: 8px; z-index: 2; display:none" >
         </div>
 
         <c:if test="${not empty param.albumId}">
           <div style="position: relative; width: 0; height: 0">
-              <img src="<spring:theme code="addOverlayImage"/>" id="${addId}"
+              <img alt="Add overlay" src="<spring:theme code="addOverlayImage"/>" id="${addId}"
                    style="position: relative; top: 8px; left: 48px; z-index: 2; display:none" >
           </div>
         </c:if>

airsonic-main/src/main/webapp/WEB-INF/jsp/javaJukeboxPlayerControlBar.jspf

@@ -11,8 +11,8 @@
                 </td>
             </c:if>
             <td>
-                <img id="startIcon" src="<spring:theme code="castPlayImage"/>" onclick="onJavaJukeboxStart()" style="cursor:pointer">
-                <img id="pauseIcon" src="<spring:theme code="castPauseImage"/>" onclick="onJavaJukeboxStop()" style="cursor:pointer; display:none">
+                <img alt="Start" id="startIcon" src="<spring:theme code="castPlayImage"/>" onclick="onJavaJukeboxStart()" style="cursor:pointer">
+                <img alt="Pause" id="pauseIcon" src="<spring:theme code="castPauseImage"/>" onclick="onJavaJukeboxStop()" style="cursor:pointer; display:none">
             </td>
             <td><span id="playingPositionDisplay" class="javaJukeBoxPlayerControlBarSongTime"/></td>
             <td style="white-space:nowrap;">

airsonic-main/src/main/webapp/WEB-INF/jsp/playQueue.jsp

@@ -696,10 +696,10 @@
                             </div>
                             <div id="castPlayer" style="display: none">
                                 <div style="float:left">
-                                    <img id="castPlay" src="<spring:theme code="castPlayImage"/>" onclick="CastPlayer.playCast()" style="cursor:pointer">
-                                    <img id="castPause" src="<spring:theme code="castPauseImage"/>" onclick="CastPlayer.pauseCast()" style="cursor:pointer; display:none">
-                                    <img id="castMuteOn" src="<spring:theme code="volumeImage"/>" onclick="CastPlayer.castMuteOn()" style="cursor:pointer">
-                                    <img id="castMuteOff" src="<spring:theme code="muteImage"/>" onclick="CastPlayer.castMuteOff()" style="cursor:pointer; display:none">
+                                    <img alt="Play" id="castPlay" src="<spring:theme code="castPlayImage"/>" onclick="CastPlayer.playCast()" style="cursor:pointer">
+                                    <img alt="Pause" id="castPause" src="<spring:theme code="castPauseImage"/>" onclick="CastPlayer.pauseCast()" style="cursor:pointer; display:none">
+                                    <img alt="Mute on" id="castMuteOn" src="<spring:theme code="volumeImage"/>" onclick="CastPlayer.castMuteOn()" style="cursor:pointer">
+                                    <img alt="Mute off" id="castMuteOff" src="<spring:theme code="muteImage"/>" onclick="CastPlayer.castMuteOff()" style="cursor:pointer; display:none">
                                 </div>
                                 <div style="float:left">
                                     <div id="castVolume" style="width:80px;height:4px;margin-left:10px;margin-right:10px;margin-top:8px"></div>
@@ -711,15 +711,15 @@
                             </div>
                         </td>
                         <td>
-                            <img id="castOn" src="<spring:theme code="castIdleImage"/>" onclick="CastPlayer.launchCastApp()" style="cursor:pointer; display:none">
-                            <img id="castOff" src="<spring:theme code="castActiveImage"/>" onclick="CastPlayer.stopCastApp()" style="cursor:pointer; display:none">
+                            <img alt="Cast on" id="castOn" src="<spring:theme code="castIdleImage"/>" onclick="CastPlayer.launchCastApp()" style="cursor:pointer; display:none">
+                            <img alt="Cast off" id="castOff" src="<spring:theme code="castActiveImage"/>" onclick="CastPlayer.stopCastApp()" style="cursor:pointer; display:none">
                         </td>
                     </c:if>
 
                     <c:if test="${model.user.streamRole and not model.player.web}">
                         <td>
-                            <img id="start" src="<spring:theme code="castPlayImage"/>" onclick="onStart()" style="cursor:pointer">
-                            <img id="stop" src="<spring:theme code="castPauseImage"/>" onclick="onStop()" style="cursor:pointer; display:none">
+                            <img alt="Start" id="start" src="<spring:theme code="castPlayImage"/>" onclick="onStart()" style="cursor:pointer">
+                            <img alt="Stop" id="stop" src="<spring:theme code="castPauseImage"/>" onclick="onStop()" style="cursor:pointer; display:none">
                         </td>
                     </c:if>
 

airsonic-main/src/main/webapp/WEB-INF/jsp/right.jsp

@@ -33,7 +33,7 @@
                 html += "<tr><td colspan='2' class='detail' style='padding-top:1em;white-space:nowrap'>";
 
                 if (nowPlaying[i].avatarUrl != null) {
-                    html += "<img src='" + nowPlaying[i].avatarUrl + "' style='padding-right:5pt;width:30px;height:30px'>";
+                    html += "<img alt='Avatar' src='" + nowPlaying[i].avatarUrl + "' style='padding-right:5pt;width:30px;height:30px'>";
                 }
                 html += "<b>" + nowPlaying[i].username + "</b></td></tr>";
 
@@ -51,7 +51,7 @@
                 }
                 html += "</td><td>" +
                         "<a title='" + nowPlaying[i].tooltip + "' target='main' href='" + nowPlaying[i].albumUrl + "'>" +
-                        "<img src='" + nowPlaying[i].coverArtUrl + "' class='dropshadow' height='60' width='60'></a>" +
+                        "<img alt='Cover art' src='" + nowPlaying[i].coverArtUrl + "' class='dropshadow' height='60' width='60'></a>" +
                         "</td></tr>";
 
                 var minutesAgo = nowPlaying[i].minutesAgo;