make voice out in page a bit better

breunigs · Feb 6, 2024 · 4944d56 · 4944d56
1 parent c235de4
commit 4944d56
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 17 deletions.
diff --git a/assets/js/video_player.js b/assets/js/video_player.js
@@ -487,8 +487,12 @@ function selectPlaybackRate(event) {
   videoPlaybackRate = rate;
 
   const prev = document.querySelector("#playbackRate a.active");
-  if (prev) prev.classList.remove("active");
+  if (prev) {
+    prev.classList.remove("active");
+    prev.setAttribute("aria-checked", "false");
+  }
   event.target.classList.add("active");
+  event.target.setAttribute("aria-checked", "true");
 }
 
 function togglePlayPause() {

diff --git a/data/articles/blog/2024-01-17-billwerder-billdeich.ex b/data/articles/blog/2024-01-17-billwerder-billdeich.ex
@@ -55,16 +55,16 @@ defmodule Data.Article.Blog.BillwerderBilldeich do
   def text(assigns) do
     ~H"""
     <h4>Alter Zustand</h4>
-    <p>Nahe der Kreuzung mit dem <.m bounds="10.178891,53.495736,10.180625,53.496624">Ladenbeker Furtweg</.m> sind beidseitig <.ref>Hochbordradwege</.ref> mit 1,62m Breite vorhanden. Ab dem <.m bounds="10.17719,53.495566,10.179319,53.496422">Karlshof</.m> dann nur noch auf der Nordseite und ab <.m bounds="10.173997,53.495469,10.178606,53.497003">Auf der Bojenwiese</.m> fährt man mit dem Rad im <.ref>Mischverkehr</.ref>.</p>
+    <p>Nahe der Kreuzung mit dem <.v bounds="10.178891,53.495736,10.180625,53.496624" lon={10.179998} lat={53.496269} dir="backward" ref={@ref}>Ladenbeker Furtweg</.v> sind beidseitig <.ref>Hochbordradwege</.ref> mit 1,62m Breite vorhanden. Ab dem <.v bounds="10.17719,53.495566,10.179319,53.496422" lon={10.178909} lat={53.496176} dir="backward" ref={@ref}>Karlshof</.v> dann nur noch auf der Nordseite und ab <.v bounds="10.173997,53.495469,10.178606,53.497003" lon={10.177833} lat={53.496091} dir="backward" ref={@ref}>Auf der Bojenwiese</.v> fährt man mit dem Rad im <.ref>Mischverkehr</.ref>.</p>
 
-    <p>Zur Querung des <.m bounds="10.178981,53.495181,10.181253,53.497075">Ladenbeker Furtweg</.m> steht nur auf der Südseite eine <.ref>Bedarfsampel</.ref> zur Verfügung, die mit dem Fahrrad in beide Richtungen benutzt werden darf. </p>
+    <p>Zur Querung des <.v bounds="10.178981,53.495181,10.181253,53.497075" lon={10.179998} lat={53.496269} dir="backward" ref={@ref}>Ladenbeker Furtweg</.v> steht nur auf der Südseite eine <.ref>Bedarfsampel</.ref> zur Verfügung, die mit dem Fahrrad in beide Richtungen benutzt werden darf. </p>
 
     <h4>Planung</h4>
-    <p>Im Zuge des <.a href="https://www.oberbillwerder-hamburg.de/">neuen Stadtteils Oberbillwerder</.a> soll der <.m bounds="10.173549,53.495181,10.180836,53.497342">Billwerder Billdeich</.m> als Erschließungsstraße ausgebaut werden.</p>
+    <p>Im Zuge des <.a href="https://www.oberbillwerder-hamburg.de/">neuen Stadtteils Oberbillwerder</.a> soll der <.v lon={10.17728} lat={53.495994} dir="backward" ref={@ref} bounds="10.173549,53.495181,10.180836,53.497342">Billwerder Billdeich</.v> als Erschließungsstraße ausgebaut werden.</p>
 
-    <p><.m bounds="10.174484,53.495546,10.179912,53.49658" highlight="Billwerder Billdeich">Entlang der Strecke</.m> sind beidseitig 1,85m breite <.ref>Kopenhagener Radwege</.ref> geplant. Hinzu kommen zwei KFZ-Spuren mit je 3,25m und ein einseitiger Gehweg im Süden mit rund 2,15m Breite. An einmündenden Straßen wird die Radweg jeweils auf Fahrbahnniveau abgesenkt um Linksabbiegen zu ermöglichen. Ausnahme: Linksabbiegen in den Karlshof vom Radweg wurde nicht vorgesehen.</p>
+    <p><.v lon={10.17728} lat={53.495994} dir="backward" ref={@ref} bounds="10.174484,53.495546,10.179912,53.49658" highlight="Billwerder Billdeich">Entlang der Strecke</.v> sind beidseitig 1,85m breite <.ref>Kopenhagener Radwege</.ref> geplant. Hinzu kommen zwei KFZ-Spuren mit je 3,25m und ein einseitiger Gehweg im Süden mit rund 2,15m Breite. An einmündenden Straßen wird die Radweg jeweils auf Fahrbahnniveau abgesenkt um Linksabbiegen zu ermöglichen. Ausnahme: Linksabbiegen in den Karlshof vom Radweg wurde nicht vorgesehen.</p>
 
-    <p>Die <.m bounds="10.173187,53.494855,10.177752,53.497388">Verkehrsführung zum neuen Stadtteil</.m> wird als abknickende Vorfahrt gestaltet. Die Mittelinsel in der Kurvenmitte bietet KFZ-, Rad- und Fußverkehr eine Aufstellfläche, um in zwei Zügen abzubiegen bzw. zu queren. Auf der nördlichen Seite ist eine Anbindung an die <.v bounds="10.173187,53.494855,10.177752,53.497388" lon={10.17526} lat={53.496162} dir="backward" ref="FR4">Freizeitroute 4</.v> vorgesehen. Auf der Innenseite der Kurve im Süden verläuft der Radweg leicht von der Fahrbahn abgesetzt.</p>
+    <p>Die <.v lon={10.175045} lat={53.496145} dir="backward" ref={@ref} bounds="10.173187,53.494855,10.177752,53.497388">Verkehrsführung zum neuen Stadtteil</.v> wird als abknickende Vorfahrt gestaltet. Die Mittelinsel in der Kurvenmitte bietet KFZ-, Rad- und Fußverkehr eine Aufstellfläche, um in zwei Zügen abzubiegen bzw. zu queren. Auf der nördlichen Seite ist eine Anbindung an die <.v bounds="10.173187,53.494855,10.177752,53.497388" lon={10.17526} lat={53.496162} dir="backward" ref="FR4">Freizeitroute 4</.v> vorgesehen. Auf der Innenseite der Kurve im Süden verläuft der Radweg leicht von der Fahrbahn abgesetzt.</p>
 
     <p>In <.m bounds="10.170376,53.493575,10.176305,53.496884">Richtung Neubaugebiet</.m>, auf der angedeuteten neuen Straße, sollen die Radwege mit 2,5m breiter werden. Auch der Gehweg wird mit 2,75m breiter.</p>
 

diff --git a/data/articles/static/startpage.ex b/data/articles/static/startpage.ex
@@ -207,7 +207,7 @@ defmodule Data.Article.Static.Startpage do
     <ul>
       <li><.a href="https://fahrrad.hamburg">fahrrad.hamburg</.a> – Die offizielle Seite der Stadt, mit vielen Funktionen</li>
       <li><.a href="https://www.arnewitte.de/">arnewitte.de</.a> – Blog zu Verkehrsplanung, Mobilität und Stadtentwicklung</li>
-      <li><.a href="https://hamburgize.com/">hamburgize.com</.a> – Blog zu Fahrradthemen</li>
+      <li><.a href="http://hamburgize.com/">hamburgize.com</.a> – Blog zu Fahrradthemen</li>
       <li><.a href="https://www.youtube.com/@FahrradstadtHH">Fahrradstadt Hamburg</.a> – Videokanal zum Fahrradalltag</li>
       <li><.a href="https://www.nahverkehrhamburg.de/">nahverkehrhamburg.de</.a> – Nachrichten zu Nahverkehrsthemen der Region</li>
     </ul>

diff --git a/data/images/quality_compare.webp b/data/images/quality_compare.webp
diff --git a/lib/veloroute_web/live/frame_live.html.heex b/lib/veloroute_web/live/frame_live.html.heex
@@ -18,6 +18,7 @@
   <%# phx-ignore-attr needed to toggle loading indicator from JS %>
   <div id="videoPoster" phx-ignore-attr="class">
     <video
+      aria-description="Video zeigt Radfahrt der Route. Ohne Ton."
       id="videoInner"
       muted
       playsinline
@@ -43,9 +44,9 @@
     </div>
     <button style="display: none" id="skipBackward5" type="button" title="5 Sekunden zurückspulen"></button>
     <div id="duration">
-      <span id="current"><%= Video.Timestamp.as_html(@video_start) %></span><span>
+      <span id="current" title="Videoposition"><%= Video.Timestamp.as_html(@video_start) %></span><span>
       /
-      </span><span id="max"><%= Video.Timestamp.as_html(@video_length_ms) %></span>
+      </span><span id="max" title="Videolänge"><%= Video.Timestamp.as_html(@video_length_ms) %></span>
     </div>
     <button style="display: none" id="skipForward5" type="button" title="5 Sekunden vorspulen"></button>
     <button id="reverse" type="button" title={if @video_reversible, do: "Fahrtrichtung umdrehen", else: "Video in die andere Fahrtrichtung leider nicht verfügbar"} class={if !@video_reversible, do: "disabled"}><%= if @video_reversible, do: "Umdrehen" %></button>
@@ -59,11 +60,11 @@
 
         <div class="column" id="playbackRate">
           <strong>Wiedergabe</strong>
-          <a data-rate="2.0">2.0 – schnell</a>
-          <a data-rate="1.5">1.5</a>
-          <a class="active" data-rate="1.0">1.0 – normal</a>
-          <a data-rate="0.75">0.75</a>
-          <a data-rate="0.5">0.5 – langsam</a>
+          <a role="checkbox" aria-checked="false" data-rate="2.0">2.0 – schnell</a>
+          <a role="checkbox" aria-checked="false" data-rate="1.5">1.5</a>
+          <a role="checkbox" aria-checked="true" class="active" data-rate="1.0">1.0 – normal</a>
+          <a role="checkbox" aria-checked="false" data-rate="0.75">0.75</a>
+          <a role="checkbox" aria-checked="false" data-rate="0.5">0.5 – langsam</a>
         </div>
       </div>
     </div>
@@ -76,7 +77,7 @@
   <%= if @current_page == Data.Article.Static.Startpage do %>
     <span class="header"><%= Settings.sitebar_name() %></span>
   <% else %>
-    <.link patch="/" class="header" title="zurück zur Startseite"><%= Settings.sitebar_name() %></.link>
+    <.link patch="/" class="header" title="zurück zur Startseite" aria-label="zurück zur Startseite von veloroute.hamburg"><%= Settings.sitebar_name() %></.link>
   <% end %>
   <div id="content" phx-hook="ScrollReset">
     <%= if Map.get(@flash, "info") == 404 do %>

diff --git a/lib/veloroute_web/live/map.ex b/lib/veloroute_web/live/map.ex
@@ -49,17 +49,19 @@ defmodule VelorouteWeb.Live.Map do
 
     ~H"""
     <div>
-      <div phx-update="ignore" phx-ignore-attr="class" id={@id} data-style={@active_style_id}>
+      <div aria-description="Straßenkarte, die ausgewählte Radrouten anzeigt" phx-update="ignore" phx-ignore-attr="class" id={@id} data-style={@active_style_id}>
         <%= @preview_image %>
       </div>
 
       <div id="layerSwitcher">
-        <button></button>
+        <button title="Routen und Kartenhintergründe auswählen"></button>
         <div class="maplibregl-ctrl-group">
           <%= for layer <- @layers do %>
             <button
               value={layer.name}
               class={"layer #{if layer.active, do: "active"}"}
+              aria-checked={if layer.active, do: "true", else: "false"}
+              role="checkbox"
               phx-target={@myself}
               phx-click={
                 Phoenix.LiveView.JS.push("toggle-layer")
@@ -71,6 +73,8 @@ defmodule VelorouteWeb.Live.Map do
             <button
               value={style.id}
               class={"style #{if style.active, do: "active"}"}
+              aria-checked={if style.active, do: "true", else: "false"}
+              role="checkbox"
               phx-target={@myself}
               phx-click="switch-style"><%= style.name %></button>
           <% end %>