a11y: Add aria labels to train list elements

2 files changed, 38 insertions, 37 deletions

diff --git a/templates/app.html.ep b/templates/app.html.ep
index 5ceec12..9b7f8ab 100644
--- a/templates/app.html.ep
+++ b/templates/app.html.ep
@@ -79,7 +79,7 @@
 %   }
 %   elsif ($departure->{train_no}) {
 %     if (exists $ice_type->{$departure->{train_no}} and $ice_type->{$departure->{train_no}}[1]) {
-        <span class="trainsubtype"><%= $ice_type->{$departure->{train_no}}[1] %></span>
+        <span class="trainsubtype" aria-hidden="true"><%= $ice_type->{$departure->{train_no}}[1] %></span>
 %     }
       <span class="trainno"><%= $departure->{train_no} %></span>
 %   }
@@ -102,70 +102,71 @@
 %     }
       </div>
 %   }
-%   if ($departure->{info} and length $departure->{info}) {
-      <span class="info">
-%=    $departure->{info}
-      </span>
+    <span class="dest <%= $extraclasses %>" aria-label="nach <%= $departure->{destination} %>">
+%=  $departure->{destination}
+    </span>
+    <span class="time <%= ($show_realtime and $departure->{delay} and not
+      $departure->{is_cancelled}) ? 'delayed' : q{} %> <%= $extraclasses %>">
+%   if (param('detailed')) {
+%     my $arrow = '→';
+%     if (not $departure->{sched_arrival}) {
+%       $arrow = '↦';
+%     }
+%     elsif (not $departure->{sched_departure}) {
+%       $arrow = '⇥';
+%     }
+%     if ($show_realtime) {
+%=      ($departure->{arrival} // q{}) . $arrow . ($departure->{departure} // q{})
+%     }
+%     else {
+%=      ($departure->{sched_arrival} // q{}) . $arrow . ($departure->{sched_departure} // q{})
+%     }
 %   }
 %   else {
-      <span class="route">
-%=    $route_str
-      </span>
+%=    $departure->{time}
 %   }
-    <span class="dest <%= $extraclasses %>">
-%=  $departure->{destination}
     </span>
     <span class="countdown <%= $extraclasses %>">
 %   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">(+<%= $departure->{delay} %>)</span>
+          <span class="delaynorm" aria-label="<%= $aria_delay %>">(+<%= $departure->{delay} %>)</span>
 %       }
 %       else {
-          <span class="undelaynorm">(<%= $departure->{delay} %>)</span>
+          <span class="undelaynorm" aria-label="<%= $aria_delay %>">(<%= $departure->{delay} %>)</span>
 %       }
 %     }
 %     else {
 %       if ($departure->{delay} > 0) {
-          <span class="delay">(+<%= $departure->{delay} %>)</span>
+          <span class="delay" aria-label="<%= $aria_delay %>">(+<%= $departure->{delay} %>)</span>
 %       }
 %       else {
-          <span class="undelay">(<%= $departure->{delay} %>)</span>
+          <span class="undelay" aria-label="<%= $aria_delay %>">(<%= $departure->{delay} %>)</span>
 %       }
 %     }
 %   }
 %   if (($departure->{scheduled_platform} and $departure->{platform} and
 %       $departure->{scheduled_platform} ne $departure->{platform})
 %       or $departure->{changed_platform}) {
-      <span class="platform changed-platform">
+      <span class="platform changed-platform" aria-label="Gleis <%= $departure->{platform} %>">
 %   }
 %   else {
-      <span class="platform">
+      <span class="platform" aria-label="Gleis <%= $departure->{platform} %>">
 %   }
 %=  $departure->{platform}
     </span>
     </span>
-    <span class="time <%= ($show_realtime and $departure->{delay} and not
-      $departure->{is_cancelled}) ? 'delayed' : q{} %> <%= $extraclasses %>">
-%   if (param('detailed')) {
-%     my $arrow = '→';
-%     if (not $departure->{sched_arrival}) {
-%       $arrow = '↦';
-%     }
-%     elsif (not $departure->{sched_departure}) {
-%       $arrow = '⇥';
-%     }
-%     if ($show_realtime) {
-%=      ($departure->{arrival} // q{}) . $arrow . ($departure->{departure} // q{})
-%     }
-%     else {
-%=      ($departure->{sched_arrival} // q{}) . $arrow . ($departure->{sched_departure} // q{})
-%     }
+%   if ($departure->{info} and length $departure->{info}) {
+      <span class="info">
+%=    $departure->{info}
+      </span>
 %   }
 %   else {
-%=    $departure->{time}
+      <span class="route" aria-label="Über <%= $route_str %>">
+%=    $route_str
+      </span>
 %   }
-    </span>
     </li>
 
 % }
diff --git a/templates/layouts/app.html.ep b/templates/layouts/app.html.ep
index 6485a22..4b594ac 100644
--- a/templates/layouts/app.html.ep
+++ b/templates/layouts/app.html.ep
@@ -76,12 +76,12 @@
 					<a onClick="javascript:toggleTheme()"><i class="material-icons" aria-label="Farbschema invertieren">invert_colors</i></a>
 				</li>
 				% if (stash('hide_opts')) {
-					<li><a href="/"><i class="material-icons">edit</i></a></li>
+					<li><a href="/"><i class="material-icons" aria-label="Hauptseite">edit</i></a></li>
 				% }
 				% else {
-					<li><a href="#stationinput"><i class="material-icons">edit</i></a></li>
+					<li><a href="#stationinput"><i class="material-icons" aria-label="Menü">edit</i></a></li>
 				% }
-				<li><a href="/_auto"><i class="material-icons">my_location</i></a></li>
+				<li><a href="/_auto"><i class="material-icons" aria-label="Stationen in der Umgebung suchen">my_location</i></a></li>
 			</ul>
 		</div>
 	</nav>