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.
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
- 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>
<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>
