do not mis-use aria-label; use aria-hidden and CSS content clipping instead

3 files changed, 21 insertions, 17 deletions

diff --git a/templates/app.html.ep b/templates/app.html.ep
index 07c78bf..852d8a8 100644
--- a/templates/app.html.ep
+++ b/templates/app.html.ep
@@ -84,38 +84,40 @@
       </div>
 %   }
 %   if ($departure->{sched_departure}) {
-      <span class="dest" aria-label="nach <%= $departure->{destination} %>">
+      <span class="dest">
+        <span class="visually-hidden">nach</span>
 %=      $departure->{destination}
       </span>
 %   }
 %   else {
-      <span class="origin" aria-label="von <%= $departure->{origin} %>">
+      <span class="origin">
+        <span class="visually-hidden">von</span>
 %=      $departure->{origin}
       </span>
 %   }
     <span class="time <%= ($show_realtime and $departure->{delay} and not
       $departure->{is_cancelled}) ? 'delayed' : q{} %>">
 %     if ($departure->{delay} and not $departure->{is_cancelled}) {
-%       my $aria_delay = sprintf("Verspätung %d Minuten", $departure->{delay});
 %       if ($show_realtime) {
 %         if ($departure->{delay} > 0) {
-            <span class="delaynorm" aria-label="<%= $aria_delay %>">(+<%= $departure->{delay} %>)</span>
+            <span class="delaynorm" aria-hidden="true">(+<%= $departure->{delay} %>)</span>
 %         }
 %         else {
-            <span class="undelaynorm" aria-label="<%= $aria_delay %>">(<%= $departure->{delay} %>)</span>
+            <span class="undelaynorm" aria-hidden="true">(<%= $departure->{delay} %>)</span>
 %         }
 %       }
 %       else {
 %         if ($departure->{delay} > 0) {
-            <span class="delay" aria-label="<%= $aria_delay %>">(+<%= $departure->{delay} %>)</span>
+            <span class="delay" aria-hidden="true">(+<%= $departure->{delay} %>)</span>
 %         }
 %         else {
-            <span class="undelay" aria-label="<%= $aria_delay %>">(<%= $departure->{delay} %>)</span>
+            <span class="undelay" aria-hidden="true">(<%= $departure->{delay} %>)</span>
 %         }
 %       }
 %     }
 %     elsif ($departure->{missing_realtime}) {
-        <span class="no-realtime" aria-label="Echtzeitdaten fehlen"><i class="material-icons" aria-hidden="true">gps_off</i></span>
+        <span class="visually-hidden">Echtzeitdaten fehlen</span>
+        <span class="no-realtime" aria-hidden="true"><i class="material-icons">gps_off</i></span>
 %     }
 %     if (param('detailed')) {
 %       my $arrow = '→';
@@ -139,11 +141,12 @@
 %   if (($departure->{scheduled_platform} and $departure->{platform} and
 %       $departure->{scheduled_platform} ne $departure->{platform})
 %       or $departure->{changed_platform}) {
-      <span class="platform changed-platform" aria-label="Gleis <%= $departure->{platform} %>">
+      <span class="platform changed-platform">
 %   }
 %   else {
-      <span class="platform" aria-label="Gleis <%= $departure->{platform} %>">
+      <span class="platform">
 %   }
+    <span class="visually-hidden">Gleis</span>
 %=  $departure->{platform}
     </span>
 %   if ($departure->{info} and length $departure->{info}) {
@@ -152,7 +155,8 @@
       </span>
 %   }
 %   else {
-      <span class="route" aria-label="Über <%= $route_str %>">
+      <span class="route">
+      <span class="visually-hidden">über</span>
 %=    $route_str
       </span>
 %   }
diff --git a/templates/layouts/app.html.ep b/templates/layouts/app.html.ep
index e6b03ae..664db64 100644
--- a/templates/layouts/app.html.ep
+++ b/templates/layouts/app.html.ep
@@ -18,7 +18,7 @@
 	<meta http-equiv="refresh" content="<%= $self->stash('refresh_interval') %>"/>
 % }
 
-	% my $av = 'v55'; # asset version
+	% my $av = 'v56'; # asset version
 	% if (session('theme') and session('theme') eq 'dark' or param('dark')) {
 		%= stylesheet "/static/${av}/css/dark.min.css", id => 'theme'
 	% }
@@ -84,15 +84,15 @@
 			% }
 			<ul id="nav-mobile" style="float: right;">
 				<li class="waves-effect waves-light">
-					<a onClick="javascript:toggleTheme()"><i class="material-icons" aria-label="Farbschema invertieren">invert_colors</i></a>
+					<a onClick="javascript:toggleTheme()"><span class="visually-hidden">Farbschema invertieren</span><i class="material-icons" aria-hidden="true">invert_colors</i></a>
 				</li>
 				% if (stash('hide_opts')) {
-					<li><a href="/"><i class="material-icons" aria-label="Hauptseite">edit</i></a></li>
+					<li><a href="/"><span class="visually-hidden">Hauptseite</span><i class="material-icons" aria-hidden="true">edit</i></a></li>
 				% }
 				% else {
-					<li><a href="#stationinput"><i class="material-icons" aria-label="Menü">edit</i></a></li>
+					<li><a href="#stationinput"><span class="visually-hidden">Menü</span><i class="material-icons" aria-hidden="true">edit</i></a></li>
 				% }
-				<li><a href="/_autostop"><i class="material-icons" aria-label="Stationen in der Umgebung suchen">my_location</i></a></li>
+				<li><a href="/_autostop"><span class="visually-hidden">Stationen in der Umgebung suchen</span><i class="material-icons" aria-hidden="true">my_location</i></a></li>
 			</ul>
 		</div>
 	</nav>
diff --git a/templates/layouts/legacy.html.ep b/templates/layouts/legacy.html.ep
index ce4d507..2d2af1d 100644
--- a/templates/layouts/legacy.html.ep
+++ b/templates/layouts/legacy.html.ep
@@ -17,7 +17,7 @@
 	<meta http-equiv="refresh" content="<%= $self->stash('refresh_interval') %>"/>
 % }
 
-	% my $av = 'v55'; # asset version
+	% my $av = 'v56'; # asset version
 	%= stylesheet "/static/${av}/css/default.css"
 	%= stylesheet "/static/${av}/css/material-icons.css"
 	%= stylesheet "/static/${av}/css/jquery-ui.min.css"