diff options
author | Daniel Friesel <derf@finalrewind.org> | 2020-04-21 22:28:49 +0200 |
---|---|---|
committer | Daniel Friesel <derf@finalrewind.org> | 2020-04-21 22:28:49 +0200 |
commit | 878f6e6d2f4fe4cff0c22e24b20e788690199302 (patch) | |
tree | ad646958ffffc9937069862ad7713746ce685a00 /templates/app.html.ep | |
parent | eeedb40bdc0510dec0e2ddca149e82bff7495d0a (diff) |
a11y: Add aria labels to train list elements
Diffstat (limited to 'templates/app.html.ep')
-rw-r--r-- | templates/app.html.ep | 69 |
1 files changed, 35 insertions, 34 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> % } |