Letzte Änderung:
Folgende Gründe sprechen dafür, eine Website möglichst barrierearm bereit zustellen:
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:
Für alle nicht-texttuellen Inhalte sind Textalternativen anzugeben:
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>