Technische Barrierefreiheit
Dieses Kapitel richtet sich an IT-Fachpersonen. Die Gewährleistung der technischen Barrierefreiheit setzt die Einhaltung der "Web Content Accessibility Guidelines" (WCAG) voraus.
- Verwenden Sie eine korrekte semantische Struktur: HTML-Tags wie <header>, <main>, <footer>, <nav>, <article> und <section> helfen dabei, den Inhalt klar und verständlich zu strukturieren.
- Verwenden Sie eine logische Überschriften-Hierarchie: Verwenden Sie die Titel-Tags in der richtigen Reihenfolge (<h1> für die Hauptüberschrift, gefolgt von <h2>, <h3> usw.). Dies hilft, leicht durch den Inhalt zu navigieren.
- Verwenden Sie gut strukturierte Listen: Die Tags <ul>, <ol> und <li> müssen zur Darstellung von Listen korrekt verwendet werden.
- Fügen Sie den Bildern einen aussagekräftigen Alternativtext hinzu: Jedes Bild sollte ein Alternativ-Text haben, der die Darstellung beschreibt. Dies ermöglicht es Screenreadern, die Bilder für sehbehinderte Nutzende zu beschreiben.
- Beschreiben Sie dekorative Bilder: Sie müssen ebenfalls einen leeren Alt-Text haben (Beispiel: <img src=" image.jpg" alt=" Eine Katze sitzt am Fenster">)
- Verwenden Sie explizite Labels: Jedes Formularfeld muss ein Label (<label>) haben. Dieses Label muss mithilfe des for-Attributs mit dem Feld verknüpft werden (Beispiel: <label for="email">E-Mail-Adresse: </label> <input type="email" id=" ">
- Fehlermeldungen anzeigen: Fehlermeldungen sollten klar und leicht verständlich sein. Geben Sie z. B. bei Eingabefehlern klar an, wo und wie sie korrigiert werden können.
- Für ausreichenden Kontrast sorgen: Stellen Sie sicher, dass der Kontrast zwischen Text und Hintergrund für sehbehinderte Nutzende ausreichend ist (empfohlenes Kontrastverhältnis: mindestens 4,5: 1 für normalen Text).
- Verlassen Sie sich nicht nur auf die Farbe: Wichtige Informationen sollten nicht ausschliesslich durch Farbe vermittelt werden. Verwenden Sie auch Symbole, Icons oder Textbeschriftungen, um Aktionen oder Status zu signalisieren.
- Verwenden Sie explizite Links: Links sollten klare Beschreibungen ihres Ziels enthalten (Beispiel: <a href="/inscription">Registrieren Sie sich für unseren Newsletter</a>). Vermeiden Sie vage Formulierungen wie "Klicken Sie hier".
- Tastaturnavigation gewährleisten: Stellen Sie sicher, dass alle wichtigen Aktionen (Navigation, Absenden von Formularen usw.) vollständig nur mit einer Tastatur und ohne Maus durchgeführt werden können.
- Sichtbaren Fokus anzeigen: Interaktive Elemente (Schaltflächen, Links usw.) sollten einen sichtbaren Fokusstatus anzeigen, wenn mit der Tastatur navigiert wird.
Barrierefreie Redaktion
- Fügen Sie Untertitel und Transkripte hinzu: Videos sollten Untertitel für Menschen mit Hörbehinderungen haben. Stellen Sie Transkripte für Audioinhalte zur Verfügung.
- Audiodeskriptionen hinzufügen: Bieten Sie bei Videos mit wichtigen visuellen Informationen zusätzliche Audiodeskriptionen an.
- Vermeiden von Animationen und blinkenden Elementen: Animierte oder blinkende Elemente sollten vermieden oder eine Option zu ihrer Deaktivierung angeboten werden, da sie bei lichtempfindlichen Personen Anfälle auslösen oder bei Personen mit Aufmerksamkeitsstörungen ablenkend wirken.
- Bieten Sie ausreichend Zeit zum Lesen: Bieten Sie bei zeitlich begrenzten Inhalten (z. B. CAPTCHA) ausreichend Zeit, um zu antworten oder bieten Sie Alternativen an.
- Verwenden Sie automatische Prüftools: Verwenden Sie Tools wie Wave oder Lighthouse, um Probleme mit der Barrierefreiheit auf Ihrer Website zu erkennen.
- Führen Sie Benutzertests durch: Testen Sie Ihre Website mit Menschen, die unterstützende Technologien (Hilfsmittel wie Screenreader, Braille-Browser usw.) verwenden und lassen Sie sich von Menschen mit Behinderungen beraten.
Halten Sie die WCAG-Standards ein, indem Sie mindestens die WCAG-Stufe "AA" als Standardanforderung für öffentliche und private Websites erreichen.
Diese Richtlinien decken ein breites Spektrum an Kriterien ab, die dabei helfen, Barrierefreiheit zu gewährleisten.
Gesetze, Normen und Regeln
- UNO-BRK – Übereinkommen der Vereinten Nationen über die Rechte von Menschen mit Behinderungen (Externer Link)
- GRIMB – Gesetz über die Rechte und die Inklusion von Menschen mit Behinderungen (Externer Link)
- eCH-0059-Accessibility (Externer Link)
- Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines WCAG) (Externer Link)
- VRIMB , Art.33 – Verordnung über die Rechte und die Inklusion von Menschen mit Behinderungen (Externer Link)
Nützliche Software und Programme
Funktion "Text vorlesen lassen" hinzufügen
Die Funktion "Text vorlesen" ermöglicht es,sich einen geschreibenen Text lauf vorlesen zu lassen.. Dies kann für Menschen mit Leseschwierigkeiten oder Sehbehinderungen sehr hilfreich sein oder für Menschen, die einen Text lieber hören als lesen möchten. Diese Funktion basiert auf sogenannten Sprachausgabe-Tools (TTS, Text-To-Speech), die in vielen Anwendungen und auf Webseiten integriert sind.
Wie man eine Funktion "Text vorlesen" einrichtet
Verwendung einer Schnittstelle für Sprachausgabe (Text-to-Speech – TTS)
- Google Text-to-Speech, Microsoft Azure Speech, Amazon Polly oder IBM Watson Text-to-Speech bieten APIs, mit denen sich Text flüssig in gesprochene Sprache umwandeln lässt.
- Diese Dienste können in eine Applikation oder eine Website integriert werden, indem die API mit dem zu lesenden Text aufgerufen wird. Sie liefern als Antwort eine Audiodatei oder einen Audio-Live-Stream.
TTS-Funktion auf einer Website integrieren
- Auf einer Website kann die Funktion "Text vorlesen" hinzugefügt werden, indem eine Schaltfläche für die Audiowiedergabe in der Nähe des Textes eingefügt wird, oft mit einem Piktogramm, das einen Lautsprecher darstellt.
- Bibliotheken wie ResponsiveVoice oder Speech Synthesis API (in modernen Browsern verfügbar) ermöglichen die Integration dieser Funktion, ohne dass externe Dienste benötigt werden.
- Wenn auf die Schaltfläche geklickt wird, wird der ausgewählte Text an die TTS-Engine gesendet, die den Inhalt laut vorliest.
Barrierefreie Anwendungen und Dokumente
- In Programmen wie Adobe Acrobat Reader oder Microsoft Word gibt es Optionen, um sich Texte vorlesen zu lassen. In Word kann man z. B. den Befehl "Laut Vorlesen" verwenden, der die integrierte Sprachausgabe aktiviert.
Bewährte Methoden für die Funktion "Text vorlesen"
- Platzierung der Schaltfläche benutzerfreundlich gestalten: Die Schaltfläche für die Audiowiedergabe sollte in der Nähe des entsprechenden Textes platziert werden, um eine optimale Zugänglichkeit zu gewährleisten.
- Deutlicher Hinweis auf die Funktion: Verwenden Sie ein Lautsprechersymbol und eine Bezeichnung wie "Text vorlesen", damit die Nutzenden den Zwecksofort erkennen.
- Natürliche und angenehme Stimmen anbieten: Wählen Sie Stimmen, die angenehm und realitätsnah klingen, um das Nutzererlebnis zu verbessern. Viele moderne TTS-Engines bieten dafür hochwertige Optionen.
- Lesegeschwindigkeit anpassbar machen: Ermöglichen Sie es den Nutzenden, die Lesegeschwindigkeit individuell anzupassen, damit sie selbst entscheiden können, was ihnen am besten gefällt.
- Machen Sie die Funktion mehrsprachig: Auf mehrsprachigen Websites sollte die Sprache automatisch erkannt und korrekt wiedergegeben werden.
- Unterstützung von Screenreadern: Die Funktion "Text vorlesen" muss mit Screenreadern kompatibel sein, sodass die Nutzenden wählen können, ob sie den Text über das eingebaute TTS oder über ihren gewohnten Screenreader anhören möchten.
- Navigationselemente und Pausen kennzeichnen: Fügen Sie bei längeren Texten Pausen (z. B. nach Absätzen) ein, für eine angenehmere Hörbarkeit und bessere Orientierung.
Wenn Sie diese bewährten Praktiken befolgen, wird die Funktion "Text vorlesen" deutlich benutzerfreundlicher und zugänglicher – und bietet echten Mehrwert für eine vielfältige Nutzerschaft.
Zwei mögliche Ansätze
Bei der Integration der Sprachausgabe-Funktion (Text-to-Speech, TTS) auf einer Website sind zwei Ansätze möglich:
- Verbesserung der Barrierefreiheit für nutzereigene TTS-Tools: Gestalten Sie den HTML-Code der Seite so zugänglich wie möglich. So können die Nutzenden ihre eigenen Screenreader, TTS-Software oder Browser-Plug-ins verwenden.
- Direkte Integratoin eines eingebauten TTS mit Vorleseschaltfläche: Die TTS-Funktion direkt in die Website einbauen, mit einer Vorleseschaltfläche, die beim Anklicken den Text vorliest.
Beide Varianten haben Vor- und Nachteile, die sorgfältig abgewogen werden sollten, um eine fundierte Entscheidung zu treffen.
1. Verbesserung der Zugänglichkeit für nutzereigene TTS-Tools
Vorteile:
- Vertrautheit: Die Nutzenden können die TTS-Tools verwenden, mit denen sie bereits vertraut sind, was ihre Navigationserfahrung verbessert.
- Geringerer Entwicklungsaufwand: Der Fokus auf die Einhaltung von Webzugänglichkeitsstandards (wie WCAG) ist eine gute Praxis, die weniger Aufwand erfordert als die Integration einer eigenen TTS-Funktionalität.
- Individuelle Anpassung: Die Nutzenden können Stimme, Lesegeschwindigkeit und weitere Parameter in ihren eigenen TTS-Tools selbst konfigurieren.
- Keine zusätzlichen Kosten: Die Nutzung bestehender TTS-Software vermeidet Lizenzgebühren und laufende Kosten externer Dienste.
- Sicherung des Datenschutzes: Die Daten des Nutzers bleiben auf seinem Gerät, wodurch die Bedenken hinsichtlich der Übertragung von Inhalten an externe Dienste verringert werden.
Nachteile:
- Uneinheitliches Nutzererlebnis: Die Qualität und die Bedienbarkeit der TTS-Tools können variieren, was zu unterschiedlichen Erfahrungen für jeden Nutzer führt.
- Fachwissen erforderlich: Entwicklerinnen und Entwickler müssen sich gut mit barrierefreier Gestaltung auskenne, um eine verlässliche Kompatibilität mit verschiedenen TTS-Anwendungen sicherzustellen.
- Begrenzte Nutzerreichweite: Nicht alle Nutzer haben TTS-Tools installiert oder wissen, wie man sie benutzt, was die Zugänglichkeit für einige einschränken kann.
- Geringere Kontrolle über die Präsentation: Die Gestaltung und Lesbarkeit des Inhalts liegt beim Endgerät – bei mangelhafter Wiedergabe kann das Verständnis leiden.
2. Integration eines eingebauten TTS mit einer Wiedergabetaste
Vorteile:
- Erhöhte Zugänglichkeit: Macht Inhalte sofort für ein breiteres Publikum zugänglich, auch für solche ohne TTS-Tools.
- Einheitliches Nutzererlebnis: Bietet eine einheitliche Sprachqualität und Präsentation für alle Nutzenden und verbessert so das Verständnis und wirken professionell.
- Einfache Bedienung: Bietet einfachen Zugriff auf die TTS-Funktionalität über ein benutzerfreundliches Element wie eine Wiedergabetaste.
- Anpassungsmöglichkeit: Funktionen wie Text-Hervorhebung während der Wiedergabe oder Anpassen der inhaltsspezifischen Spracheinstellungen verbessern die individuelle Nutzerfahrung.
- Angleichung an die visuelle Identität des Kantons: Die Integration kann stilisiert werden, um dem Design der Website zu entsprechen und die visuelle Identität zu verstärken.
Nachteile:
- Entwicklungs- und Wartungsaufwand: Die Implementierung und Pflege einer integrierten TTS-Funktion ist technisch aufwändig – besonders bei der Unterstützung unterschiedlicher Geräte und Browser.
- Kosten: Es können Lizenzkosten für die verwendete TTS-Technologie sowie Bandbreitenkosten bei Audiostreaming oder API-Nutzung anfallen.
- Auswirkungen auf die Leistung: Kann die Seitenladezeiten beeinträchtigen, insbesondere wenn grosse Audiodateien generiert werden oder der TTS-Dienst von externen APIs abhängig ist.
- Datenschutzbedenken: Die Nutzung von Diensten Dritter kann dazu führen, dass Nutzerdaten ausserhalb des Standorts übertragen werden, was eine angemessene Handhabung des Datenschutzes erfordert.
- Einhaltung der Barrierefreiheit: Die TTS-Integration selbst muss barrierefrei sein (z. B. tastaturnavigierbar, kompatibel mit Screenreadern), wodurch eine weitere Schicht der Komplexität hinzugefügt wird.
Schlussfolgerung
Der zu wählende Ansatz hängt von der Zielgruppe, den verfügbaren Ressourcen und den angestrebten Zielen ab:
- Barrierefreiheit verbessern: Wenn die meisten Nutzenden mit hoher Wahrscheinlichkeit ihre eigenen TTS-Tools haben und wenn eine Lösung mit geringen Kosten und geringem Entwicklungsaufwand bevorzugt wird. Dieser Ansatz betont die Grundsätze des universellen Designs und kann bei guter Umsetzung völlig ausreichend sein.
- Wählen Sie ein integriertes TTS, wenn der Wunsch besteht, allen Nutzenden unabhängig von ihrer persönlichen Ausstattung oder ihrer technologischen Gewandtheit einen sofortigen und einfachen Zugang zu Audioinhalten zu ermöglichen. Diese Methode bietet eine kontrollierte und konsistente Nutzererfahrung. Sie erfordert jedoch eine höhere Investition in die Entwicklung. Auch die Kosten sind höher.
Informationsquellen für die Schlussfolgerung:
- Richtlinien für barrierefreie Webinhalte (WCAG) des W3C: Diese Richtlinien empfehlen, Inhalte durch assistive Technologien zugänglich zu machen und unterstützen den Ansatz der Verbesserung der Barrierefreiheit.
- Studien zur digitalen Barrierefreiheit: Untersuchungen zeigen, dass direkt integrierte Hilfsfunktionen auf Websites die Erfahrung für Nutzende verbessern kann, die mit assistierenden Technologien weniger vertraut sind.
- Analyse der Nutzerbedürfnisse: Die Vorlieben und Bedürfnisse der Zielgruppe zu verstehen, kann bei der Entscheidung helfen, welcher Ansatz den grössten Nutzen bietet.
