Barrierefreie TYPO3 Websites

Letzte Änderung:

Warum sind barrierefreie Websites wichtig?

Folgende Gründe sprechen dafür, eine Website möglichst barrierearm bereit zustellen:

  • Verbesserung der Zugänglichkeit für (fast alle) Besucher: Barrierefreiheie Webseiten verbessern nicht nur die Benutzerfreundlichkeit für Menschen mit natürlichen Zugangsbeschränkungen, sondern auch Besucher, die z.B. den Ton ausgeschaltet haben oder nur über einen kleinen Bildschirm verfügen. Im Grunde betrifft die Barrierefreiheit somit fast alle Menschen.
  • Verbesserung der Sichtbarkeit in Suchmaschinen: Eine barrierearme Website lässt sich von Suchrobotern besser interpretieren. Z.B. ermöglichen Alternativtexte für Bilder und Transskripte für Videos oder Audiodateien, mehr Informationen über eine Website zu erhalten und verbessern damit unweigerlich die Sichtbarkeit in Suchmaschinen
  • Verbesserung des Suchmaschinen-Rankings: Suchmaschinen sind bestrebt, ihren Besuchern ein möglichst optimales Suchergebnis zu präsentieren. Hierzu gehört auch, dass Besucher mit den Zielseiten, auf die Suchmaschinen verweisen, “gut klar kommen” (sog. "User Experience" = UX). Eine barrierearme Website ist ein sehr starkes Rankingsignal, da es die Zugänglichkeit für Besucher optimiert (siehe ersten Punkt).
  • Gesetzliche Vorschriften: Im Rahmen des European Accessibility Act sind neben öffentlichen Institutionen viele Unternehmen und Branchen zur Bereitstellung barrierearmer Websites apätestetns ab 1.7.2025 verpflichet.

Checkliste

Rechtliche Grundlage für die Barrierefreiheit bilden die sog. Web Content Accessbility Guidelines (WCAG) des World Wide Web Consortiums (W3C).  Das W3C ist eine internationale Organisation, die Webstandards entwickelt und Qualitätsleitfäden für Webbetreiber anbietet. Sie definieren die Kriterien, die erfüllt sein müssen, damit eine Website barrierefrei ist. Die Kriterien werden in drei Konformitätsstufen A (hoch), AA (höher) und AAA (am höchsten) eingeteilt. Die gesetzliche Vorgabe sieht die Einhaltung der Stufen A und AA vor.

Für einen pragmatischen Umgang mit der Barrierefreiheit haben wir die wichtigsten gesetzlich vorgeschriebenen Kriterien in eine Checkliste zusammengefasst:

Alternativen für nicht-texttuelle Inhalte

Für alle nicht-texttuellen Inhalte sind Textalternativen anzugeben:

  • für Bilder sind beschreibende Texte im HTML-Code zu hinterlegen (in TYPO3 über das Feld “Alternative Text” in den Image Metadaten)
  • für Videos sind Untertitel und/oder Transscripte zu hinterlegen
  • für Audiodateien sind Textalternativen anzubieten
  • für vorproduzierte Videos ist eine Audiobeschreibung anzubieten

Farben

  • Farben dürfen nicht das einzige visuelle Mittel sein, um eine Information zu präsentieren.
  • Das Kontrastverhältnis von Inhalten zum Hintergrund muss mindestens 4,5 : 1 sein.
  • Buttons müssen ein Kontrastverhältnis von 3:1 zu den angrenzenden Farben haben.
  • Webinhalte dürfen nicht mehr als dreimal in der Sekunde blinken.

Geräteunabhängigkeit (Responsiveness)

  • Inhalte müssen auf unterschiedlichen Geräten und Auflösungen ohne horizontalem Scrollen dargestellt werden können.
  • Texte können bis zu 200% vergrößert werden ohne das Layout zu zerstören.
  • Inhalte sollten im Hoch- und Querformat ohne Beeinträchtigung dargestellt werden.

Tastaturbedienung

  • Alle Funktionen müssen über die Tastatur bedienbar sein
  • Die Fokus-Reihenfolge beim Navigieren z.B. über die Tab-Taste muss sinnvoll sein
  • Es darf keine “Tastaturfallen” geben
  • An “Skip to main content” denken (s.u.)

Navigation

  • Bypass-Blöcke ermöglichen das Übersprungen wiederkehrender Inhalte. Wichtig ist die Funktion “skip to main content”. Sie kann auf der Seite unsichtbar sein, sollte aber bei Bedienung der Tastatur (Tab-Taste) als erstes in den Fokus kommen und dann auch sichtbar sein. Der Klick darauf für den User dann zu dem Hauptinhalt.
  • Jede Seite hat einen sinnvollen Titel (siehe in TYPO3 Seiteneigenschaften).
  • Es gibt mehrere Wege zum Auffinden von Inhalten (z.B. Menünavigation, Suchfunktion, Sitemap).
  • Das Element, das den Fokus hat, muss erkennbar sein.
  • Inhaltselement dürfen sich nicht nur durch eine Wischbewegung bedienen lassen. Beispiel: Ein Slider auf einem Smartphone muss auch Pfeiltasten zur Bedienung anbieten
  • Navigationskomponenten sollten mit mit dem semantischen Tag “<nav>” und einer eine ARIA-Beschreibung ("aria-label") gekennzeichnet werden. Die aktive Seite sollte mit "aria-current" ausgezeichnet werden.

Beispiel für eine Best-Practice Breadcrumb-Auszeichnung auf der Seite /leistungen/typo3-support/updates:

 

<nav aria-label="breadcrumbs">
<ol role="list">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/leistungen">Leistungen</a>
</li>
<li>
<a href="/leistungen/typo3-support">TYPO3 Support</a>
</li>
<li aria-current="updates">
Updates
</li>
</ol>
</nav>

 

 

Eingabemodalitäten

  • Formularfelder sollten mit Labels (<label>) benannt werden, um ihre Bedeutung zu beschrieben
  • vom Besucher eingegebene Falscheingaben (z.B. PLZ oder Mailadresse mit falscher Syntax) oder nicht ausgefüllte Pflichtfelder müssen verständlich benannt werden, ggf. inkl. Vorschlägen (z.B. “die PLZ muss aus 5 Ziffern bestehen”)

Coding Mustervorlagen

Barrierefreies Formular

 

 

<form action="#" method="post"> 

 

<!-- Text Input ->
<label for="vorname">Vorname:</label> <input type="text" id="vorname" name="vorname" aria-required="true" required>

 

<!-- Password Input ->
<label for="passwort">Passwort:</label> <input type="password" id="passwort" name="passwort" aria-required="true" required>

 

<!-- Email Input ->
<label for="email">E-Mail-Adresse:</label> <input type="email" id="email" name="email" aria-required="true" required>

 

<!-- Datum Input --> 
<label for="geburtsdatum">Geburtsdatum:</label> <input type="date" id="geburtsdatum" name="geburtsdatum">

 

<!-- Zahlen Input --> 
<label for="anzahl">Anzahl:</label> <input type="number" id="anzahl" name="anzahl" min="1" max="10">

 

<!-- Radio Buttons ->
<fieldset>
<legend>Geschlecht:</legend>
<label for="maennlich"> <input type="radio" id="maennlich" name="geschlecht" value="maennlich" required> Männlich </label>
<label for="weiblich"> <input type="radio" id="weiblich" name="geschlecht" value="weiblich"> Weiblich </label>
<label for="divers"> <input type="radio" id="divers" name="geschlecht" value="divers"> Divers </label>
</fieldset>

 

<!-- Checkboxes ->
<fieldset class="checkbox-group">
<legend>Interessengebiete:</legend>
<label for="sport">
<input type="checkbox" id="sport" name="interessen" value="sport"> Sport </label>
<label for="musik"> <input type="checkbox" id="musik" name="interessen" value="musik"> Musik </label>
<label for="reisen"> <input type="checkbox" id="reisen" name="interessen" value="reisen"> Reisen </label>
</fieldset>

 

<!-- Dropdown/Select ->
<label for="land">Land:</label>
<select id="land" name="land" aria-required="true" required>
<option value="">Bitte wählen</option>
<option value="de">Deutschland</option>
<option value="at">Österreich</option>
<option value="ch">Schweiz</option>
</select>

 

<!-- Textarea --> 
<label for="kommentar">Kommentar:</label>
<textarea id="kommentar" name="kommentar" rows="5" aria-required="true" required></textarea>

 

<!-- File Upload -->
<label for="datei">Datei hochladen:</label>
<input type="file" id="datei" name="datei" aria-required="true" required>

 

<!-- Submit Button --> 
<button type="submit">Absenden</button>

 

</form>