Commit 878f6e6d authored by Birte Kristina Friesel's avatar Birte Kristina Friesel
Browse files

a11y: Add aria labels to train list elements

parent eeedb40b

templates/app.html.ep

+35 −34
Original line number Diff line number Diff line
@@ -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 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 {

      <span class="route">

%=    $route_str

      </span>

%=      ($departure->{sched_arrival} // q{}) . $arrow . ($departure->{sched_departure} // q{})

%     }

%   }

%   else {

%=    $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>

%   }

    </li>



% }

templates/layouts/app.html.ep

+3 −3
Original line number Diff line number Diff line
@@ -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>