summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorDaniel Friesel <derf@finalrewind.org>2020-04-21 22:28:49 +0200
committerDaniel Friesel <derf@finalrewind.org>2020-04-21 22:28:49 +0200
commit878f6e6d2f4fe4cff0c22e24b20e788690199302 (patch)
treead646958ffffc9937069862ad7713746ce685a00
parenteeedb40bdc0510dec0e2ddca149e82bff7495d0a (diff)
a11y: Add aria labels to train list elements
-rw-r--r--templates/app.html.ep69
-rw-r--r--templates/layouts/app.html.ep6
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>