Workshop Barrierefreiheit bearbeitet von Matthias Scharwies 17.09.2018 06:35 Das SELF-Treffen in Dortmund hatte einen Höhepunkt: einen Workshop zur Barrierefreiheit. In diesem sollte praktisch erarbeitet werden, was Barrierefreiheit denn wirklich für die Praxis bedeutet. Da der Referent Domingos de Oliveira leider kurzfristig erkrankt war, sprang kurzfristig SELFHTML-Mitglied Marc Haunschild ein. Er besorgte sich schnell eine Funktastatur für seinen Laptop und zeigte uns, wie Webseiten für alle benutz- und bedienbar werden können<!-- more --> # Sprachausgabe Im ersten Teil ging es darum, dass Webseiten nicht nur auf dem Bildschirm angezeigt, sondern auch vorgelesen werden können. Dabei gibt es zur Ausgabe zwei Möglichkeiten: * [Screenreader](https://wiki.selfhtml.org/wiki/Screenreader), eigens dafür geschaffene Programme wie z.B. der <abbr title="NonVisual Desktop Access.">NVDA</abbr> oder JAWS für Windows, die sich die Nutzer installieren müssen. MacOS bringt mit VoiceOver einen solchen Screenreader von Haus aus mit. * [Sprachausgabe](https://wiki.selfhtml.org/wiki/Sprachausgabe) direkt im Browser, z.B. die Vorlese-Funktion von MacOS/iOS Anfangs stellte er seinen Editor brackets vor, der in Zusammenspiel mit Google Chrome sowohl den Code als auch das aktuelle Ergebnis im Browser ohne Speichern und Neuladen anzeigt. Anhand einer Beispielseite demonstrierte Marc Haunschild, das ein iPhone Webseiten vorlesen kann. Bedingung für eine verständliche Sprachausgabe ist natürlich, dass die Webseite eine [Sprachangabe](https://wiki.selfhtml.org/wiki/Internationalisierung) enthält: ~~~html <html lang="de"> ~~~ Neben der korrekten Angabe der verwendeten Sprache mit dem lang-Attribut ist eine bestimmungsgemäße Verwendung von HTML-Markup nötig. Unter anderem um Beziehungen herzustellen, z. B. zwischen den Spalteninhalten einer Tabelle zur Überschrift im Tabellenkopf. Nur so können sie zugeordnet werden. Eine [caption](https://wiki.selfhtml.org/wiki/HTML/Tabellen/caption) als Tabellenüberschrift oder Zusammenfassung informiert Nutzer über den Inhalt: ~~~html <table> <caption>Stadt-Land-Fluss</caption> <thead> <tr> <th>Stadt</th> <th>Land</th> <th>Fluss</th> </tr> </thead> <tbody> <tr> <td>Aachen</td> <td>Angola<td> <td>Amazonas</td> </tr> <tr> <td>Berlin</td> <td>Belgien</td> <td>Bamazonas</td> </tr> </tbody> <table> ~~~ Sogar der Rechtsschreibfehler in der letzten Tabellenzelle wurde als solcher erkannt und angekündigt. Fazit: Um Webseiten mittels Sprachausgabe auszugeben, benötigt der Webentwickler keine weitere Auszeichnungen. Eine klare und semantische HTML-Struktur ist in vielen Fällen ausreichend! # Bedienbarkeit für alle Eine barrierefreie Webseite ist für alle benutz- und bedienbar. Daher muss sie mit einer Maus, aber auch ohne, also z.B. per Tastatur bedient werden können, damit Benutzer, die nicht präzise mit der Hand steuern können, mittels Tabulatortaste navigieren können. Anhand der Seite [ble.de](https://www.ble.de/DE/Startseite/startseite_node.html) konnte Marc demonstrieren, dass gute, barrierearme Webseiten nicht nur mit der Maus, sondern auch mit der Tab-Taste „durchgetabbt“ werden können. Dafür ist eine gute Kennzeichnung der fokussierten Elemente nötig. Auch wenn dies zum Standardverhalten der Browser gehört, wird dies oft von Webdesignern „normalisiert“. Tipp: Kennzeichnen Sie den Fokus, durchaus auch anders als den :hover-Zustand. Ein Skip-Link ermöglicht es, die Navigation zu überspringen, ohne alle Links durchtabben zu müssen. Da Blinde und in ihrer Sehfähigkeit Eingeschränkte genau wie Sehende zuerst die Überschriften und Anreisser überfliegen, ist auch hier eine treffende Auszeichnung nötig. Änderungen im DOM wie eine Erfolgsmeldung beim Absenden eines Formulars müssen so ausgezeichnet werden, dass auch sie durch Screenreader vorgelesen werden. Hierzu kennzeichnen Sie die Ausgabe als live-Region. Sie wird vom Screenreader sofort ausgegeben: ~~~html <p aria-live="polite">Danke für Ihre Nachricht.</p> ~~~ # Untertitel zum besseren Verständnis Das Abspielen von Videos ist mit HTML5 überhaupt kein Problem mehr. Dabei sollte aber wie bei Grafiken auch immer an einen passenden Alternativtext gedacht werden, der es Nutzern mit eingeschränkter Sehfähigkeit ermöglicht, den Inhalt vollständig zu erfassen. Marc stellte uns vor, wie der able-Player mit einem leeren div-Element und einem data-transcript-div-Attribut im video-Tag [Untertitel im eigenen Container](https://ableplayer.github.io/ableplayer/demos/video6.html) darstellen kann. Der able-Player überträgt Kapitel, Unterschriften und Beschreibungen in das leere div, das mit CSS entsprechend dem Layout der Seite angepasst werden kann. ~~~html <video id="video1" preload="auto" poster="../media/wwa.jpg" data-able-player="" data-transcript-div="transcript"> <source type="video/mp4" src="../media/wwa.mp4" data-desc-src="../media/wwa_described.mp4"> <source type="video/webm" src="../media/wwa.webm" data-desc-src="../media/wwa_described.webm"> <track kind="captions" src="../media/wwa_captions_en.vtt" srclang="en" label="English"> <track kind="subtitles" src="../media/wwa_captions_de.vtt" srclang="de" label="Deutsche"> <track kind="subtitles" src="../media/wwa_captions_es.vtt" srclang="es" label="Espanol"> <track kind="subtitles" src="../media/wwa_captions_ja.vtt" srclang="ja" label="日本語" lang="ja"> <track kind="descriptions" src="../media/wwa_description_de.vtt" srclang="de"> <track kind="descriptions" src="../media/wwa_description_en.vtt" srclang="en"> <track kind="descriptions" src="../media/wwa_description_es.vtt" srclang="es"> <track kind="descriptions" src="../media/wwa_description_ja.vtt" srclang="ja"> <track kind="chapters" src="../media/wwa_chapters_de.vtt" srclang="de"> <track kind="chapters" src="../media/wwa_chapters_en.vtt" srclang="en"> <track kind="chapters" src="../media/wwa_chapters_es.vtt" srclang="es"> </video> ~~~ Nach vier Stunden voller Beispiele hatten wir viele Anregungen und Ideen für unsere eigenen Projekte. Beim Aufräumen merkte Marc, dass wir die Funk-Tastatur gar nicht benötigt hatten. Vielen Dank für diesen sehr interessanten und faktenreichen Workshop.
Workshop Barrierefreiheit bearbeitet von Rolf B 04.01.2024 15:36 <p>Das SELF-Treffen in Dortmund hatte einen Höhepunkt: einen Workshop zur Barrierefreiheit. In diesem sollte praktisch erarbeitet werden, was Barrierefreiheit denn wirklich für die Praxis bedeutet.</p> <p>Da der Referent Domingos de Oliveira leider kurzfristig erkrankt war, sprang kurzfristig SELFHTML-Mitglied Marc Haunschild ein. Er besorgte sich schnell eine Funktastatur für seinen Laptop und zeigte uns, wie Webseiten für alle benutz- und bedienbar werden können<!--more--></p> <h2>Sprachausgabe</h2> <p>Im ersten Teil ging es darum, dass Webseiten nicht nur auf dem Bildschirm angezeigt, sondern auch vorgelesen werden können.</p> <p>Dabei gibt es zur Ausgabe zwei Möglichkeiten:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/Screenreader">Screenreader</a>, eigens dafür geschaffene Programme wie z.B. der <abbr title="NonVisual Desktop Access.">NVDA</abbr> oder JAWS für Windows die sich die Nutzer installieren müssen. MacOS bringt mit VoiceOver einen solchen Screenreader von Haus aus mit.</li> <li><a href="https://wiki.selfhtml.org/wiki/Sprachausgabe">Sprachausgabe</a> direkt im Browser, z.B. die Vorlese-Funktion von MacOS/iOS</li> </ul> <p>Anfangs stellte er seinen Editor brackets vor, der in Zusammenspiel mit Google Chrome sowohl den Code als auch das aktuelle Ergebnis im Browser ohne Speichern und Neuladen anzeigt. Anhand einer Beispielseite demonstrierte Marc Haunschild, das ein iPhone Webseiten vorlesen kann. Bedingung für eine verständliche Sprachausgabe ist natürlich, dass die Webseite eine <a href="https://wiki.selfhtml.org/wiki/Internationalisierung">Sprachangabe</a> enthält:</p> <pre><html la</p> ang="de"> </pre> <p>Neben der korrekten Angabe der verwendeten Sprache mit dem lang-Attribut ist eine bestimmungsgemäße Verwendung von HTML-Markup nötig. Unter anderem um Beziehungen herzustellen, z.B. zwischen den Spalteninhalten einer Tabelle zur Überschrift im Tabellenkopf. Nur so können sie zugeordnet werden. Eine <a href="https://wiki.selfhtml.org/wiki/HTML/Tabellen/caption">caption</a> als Tabellenüberschrift oder Zusammenfassung informiert Nutzer über den Inhalt:</p> <pre><</p> t;table> <caption>Stadt-Land-Fluss</caption> <thead> <tr> <th>Stadt</th> <th>Land</th> <th>Fluss</th> </tr> </thead> <tbody> <tr> <td>Aachen</td> <td>Angola</td> <td>Amazonas</td> </tr> <tr> <td>Berlin</td> <td>Belgien</td> <td>Bamazonas</td> </tr> </tbody> </table> </pre> <p>Sogar der Rechtsschreibfehler in der letzten Tabellenzelle wurde als solcher erkannt und angekündigt.</p> <p>Fazit: Um Webseiten mittels Sprachausgabe auszugeben, benötigt der Webentwickler keine weitere Auszeichnungen. Eine klare und semantische HTML-Struktur ist in vielen Fällen ausreichend!</p> <h2>Bedienbarkeit für alle</h2> <p>Eine barrierefreie Webseite ist für alle benutz- und bedienbar. Daher muss sie mit einer Maus, aber auch ohne, also z.B. per Tastatur bedient werden können, damit Benutzer, die nicht präzise mit der Hand steuern können, mittels Tabulatortaste navigieren können.</p> <p>Anhand der Seite <a href="https://www.ble.de/DE/Startseite/startseite_node.html">ble.de</a> konnte Marc demonstrieren, dass gute, barrierearme Webseiten nicht nur mit der Maus, sondern auch mit der Tab-Taste "durchgetabbt" werden können. Dafür ist eine gute Kennzeichnung der fokussierten Elemente nötig. Auch wenn dies zum Standardverhalten der Browser gehört, wird dies oft von Webdesignern "normalisiert".</p> <p>Tipp: Kennzeichnen Sie den Fokus, durchaus auch anders als den :hover-Zustand.</p> <p>Ein Skip-Link ermöglicht es, die Navigation zu überspringen, ohne alle Links durchtabben zu müssen. Da Blinde und in ihrer Sehfähigkeit Eingeschränkte genau wie Sehende zuerst die Überschriften und Anreisser überfliegen, ist auch hier eine treffende Auszeichnung nötig.</p> <p>Änderungen im DOM wie eine Erfolgsmeldung beim Absenden eines Formulars müssen so ausgezeichnet werden, dass auch sie durch Screenreader vorgelesen werden. Hierzu kennzeichnen sie die Ausgabe als live-Region. sie wird vom Screenreader sofort ausgegeben:</p> <pre><p aria-live="pol</p> lite">Danke für Ihre Nachricht.</p></pre> <h2>Untertitel zum besseren Verständnis</h2> <p>Das Abspielen von Videos ist mit HTML5 überhaupt kein Problem mehr. Dabei sollte aber wie bei Grafiken auch immer an einen passenden Alternativtext gedacht werden, der es Nutzern mit eingeschränkter Sehfähigkeit ermöglicht, den Inhalt vollständig zu erfassen.</p> <p>Marc stellte uns vor, wie der able-Player mit einem leeren div-Element und einem data-transcript-div-Attribut im video-Tag <a href="https://ableplayer.github.io/ableplayer/demos/video6.html">Untertitel im eigenen Container </a>darstellen kann. Der able-Player überträgt Kapitel, Unterschriften und Beschreibungen in das leere div, dass mit CSS entsprechend dem Layout der Seite angepasst werden kann.</p> <pre><vid</p> deo id="video1" preload="auto" poster="../media/wwa.jpg" data-able-player="" data-transcript-div="transcript" > <source type="video/mp4" src="../media/wwa.mp4" data-desc-src="../media/wwa_described.mp4"> <source type="video/webm" src="../media/wwa.webm" data-desc-src="../media/wwa_described.webm"> <track kind="captions" src="../media/wwa_captions_en.vtt" srclang="en" label="English"> <track kind="subtitles" src="../media/wwa_captions_de.vtt" srclang="de" label="Deutsche"> <track kind="subtitles" src="../media/wwa_captions_es.vtt" srclang="es" label="Espanol"> <track kind="subtitles" src="../media/wwa_captions_ja.vtt" srclang="ja" label="日本語" lang="ja"> <track kind="descriptions" src="../media/wwa_description_de.vtt" srclang="de"> <track kind="descriptions" src="../media/wwa_description_en.vtt" srclang="en"> <track kind="descriptions" src="../media/wwa_description_es.vtt" srclang="es"> <track kind="descriptions" src="../media/wwa_description_ja.vtt" srclang="ja"> <track kind="chapters" src="../media/wwa_chapters_de.vtt" srclang="de"> <track kind="chapters" src="../media/wwa_chapters_en.vtt" srclang="en"> <track kind="chapters" src="../media/wwa_chapters_es.vtt" srclang="es"> </video></pre> <p>Nach vier Stunden voller Beispiele hatten wir viele Anregungen und Ideen für unsere eigenen Projekte. Beim Aufräumen merkte Marc, dass wir die Funk-Tastatur gar nicht benötigt hatten. Vielen Dank für diesen sehr interessanten und faktenreichen Workshop.</p>
nicht angemeldet nicht angemeldet
