Hinweise für barrierefreies Webdesign
Inhalte von Webseiten sind Menschen mit Beeinträchtigungen häufig nur schwer oder unvollständig zugänglich. Bei der Erstellung von Webseiten sind daher besondere Anforderungen zu berücksichtigen, um diese Barrieren abzubauen. Dazu gehört beispielsweise, bestimmter Kontrastwerte einzuhalten und den Code der Seiten so zu gestalten, dass er mit Hilfe spezieller Software (Screenreader) für die nicht-visuelle Ausgabe, wie Sprache oder die Braille-Zeile, interpretierbar ist. Die Zugänglichkeit von Webseiten wird durch die Berücksichtigung der nachfolgenden Hinweise verbessert.- Dokumententitel
- Strukturen
- Linktexte
- Alternativtexte
- Kontraste und Farben
- Multimedia
- Anweisungen
- Verständlichkeit
- Checklisten
Dokumententitel
Jede Webseite benötigt einen kurzen, inhaltsbezogenen und eindeutigen Dokumententitel. Der Titel einer Seite kann identisch mit der inhaltlichen Hauptüberschrift sein. Der Inhaltsbezug sollte am Anfang des Titels stehen (z. B. vor Angaben zur Rubrik oder Organisationseinheit). Für Seiten, die Teil eines mehrschrittigen Prozesses sind, sollte der aktuelle Schritt Teil des Titels sein.
Aktuell werden die Dokumententitel aus den Navigationsangaben $nav[] und dem Seitennamen aus $menu[] in der config.inc erzeugt.
In der config.inc der Nutzerkonto-Seite des URZ wurden folgende Angaben festgelegt:
$nav['URZ']='/urz/';
…
$menu[]=array('name' => 'Allgemeines', 'url' => 'index.html', 'level'=> '1');
$menu[]=array('name' => 'Nutzerkonto', 'url' => 'nutzerkonto.html', 'level'=> '2');Es kann vorkommen, dass Dokumententitel infolge dieser Form der Erzeugung sehr lang werden, z. B.:
App- und Gerätepasswörter | Identitätsmanagement | Dienste | URZ | TU Chemnitz
Ein kürzerer und dennoch aussagekräftiger Titel kann zu Beginn der HTML-Seite in die Funktion seite() als zweites Argument eingetragen werden:
<?php
require_once('config.inc');
seite(__FILE__, 'App- und Gerätepasswörter | URZ');
?>Als Dokumententitel wird nun App- und Gerätepasswörter | URZ | TU Chemnitz angezeigt. „TU Chemnitz“ wird stets automatisch angefügt und muss nicht angegeben werden.
Weiterführende Informationen zur Barrierefreiheit:
Strukturen
Überschriften sollten eingesetzt werden, um die Bedeutung und die Struktur eines Inhalts zu vermitteln. Absätze sollten mit einer Überschrift gruppiert werden und der Überschriftentext sollte die nachfolgenden Inhalte knapp, aber deutlich beschreiben. Wenn nur die Überschriftentexte gelesen würden, sollte der Aufbau des Inhalts nachvollzogen werden können.
<h1>Hinweise zum Corporate Design für Webseiten</h1>
<p>Einleitender Text zum Thema …</p>
<h2>Umsetzung</h2>
<p>Ein paar allgemeine Hinweise zur Umsetzung – es folgen näher beschriebene einzelne Varianten.</p>
<h3>Einfacher HTML-Rahmen</h3>
<h3>HTML-Rahmen für PHP / TWIG</h3>
<h3>TUC-Template für Django</h3>Neben Überschriftenelementen müssen Absätze, Listen und Datentabellen semantisch richtig aufbereitet werden. Grundsätzlich gehören alle Inhalte entweder in einen Absatz
(<p>), eines der Elemente für Listen (<li>, <dt>, <dd>) oder in eine Datenzelle (<td>).
Leere Absätze sind zu vermeiden. Absätze sollten außerdem nicht mit Zeilenumbrüchen getrennt werden. Für <br /> gibt es nur wenige Anwendungsfälle,
dazu gehören beispielsweise Gedichte oder Umbrüche in Adressen.
<div>-Elemente dienen übrigens ausschließlich zu Layoutzwecken und haben für Screenreader keinerlei Bedeutung.
Weiterführende Informationen zur Barrierefreiheit:
Linktexte
Linktexte sollten stets bedeutsam sein und den Linkzweck beschreiben. Mehrdeutige Linktexte wie „mehr“ oder „hier“ sollten vermieden werden. Relevante Informationen über Linkziele wie Format oder Größe einer Datei sollten ebenfalls im Linktext berücksichtigt werden.
<a href="URZ_ordnung.pdf">Benutzungsordnung des Universitätsrechenzentrums (PDF)</a>Nähere Informationen zur Gestaltung von Printmedien und Webseiten der TU Chemnitz finden Sie
im <a href="/tu/pressestelle/cd/handbuch.html">Corporate-Design-Handbuch</a>
auf der Webseite der Pressestelle und Crossmedia-Redaktion.Weiterführende Informationen zur Barrierefreiheit:
Alternativtexte
Grafiken benötigen bedeutsame Textalternativen. Jede Grafik sollte einen Alternativtext erhalten, der den Inhalt bzw. die Funktion der Grafik vermittelt. Rein dekorative Grafiken sollten hingegen einen leeren Alternativtext erhalten.
<img src="mobileSeite.jpg"
class="img-responsive"
alt="Foto eines Smartphones mit der mobilen Webseite der TU"
src="mobileSeite.jpg">
<img src="mobileSeite.jpg"
class="img-responsive"
alt="Auf dem Foto präsentieren zwei Hände die mobile Ansicht der TU-Webseite auf dem Smartphone."
src="mobileSeite.jpg">
Weiterführende Informationen zur Barrierefreiheit:
Kontraste und Farben
Für die Leserlichkeit und Wahrnehmbarkeit von Texten muss ein ausreichender Kontrast zwischen Textfarbe und Hintergrund vorhanden sein. Das Kontrastverhältnis sollte mindestens 4,5:1 betragen (Konformitätsstufe AA). Zum Berechnen und Ausprobieren des Kontrastverhältnisses empfehlen wir den Color Contrast Checker von WebAIM.
Kritische Farbkombinationen wie z. B. rot auf grün oder schwarz sind zu vermeiden, da sie von Menschen mit Seheinschränkungen schlecht wahrgenommen werden.
<p style="color:#45D9BE;background-color:#fff">
Kontrastverhältnis 1,76:1 – viel zu gering </p>
<p style="color:#23A991;background-color:#fff">
Kontrastverhältnis 2,93:1 – zu gering </p>
<p style="color:#177665;background-color:#fff">
Kontrastverhältnis 5,50:1 – ausreichend für AA</p>
<p style="color:#146154;background-color:#fff">
Kontrastverhältnis 7,32:1 – ausreichend für AAA</p>Kontrastverhältnis 1,76:1 – viel zu gering
Kontrastverhältnis 2,93:1 – zu gering
Kontrastverhältnis 5,50:1 – ausreichend für AA
Kontrastverhältnis 7,32:1 – ausreichend für AAA
Weiterführende Informationen zur Barrierefreiheit:
Multimedia
Audio- und Videoinhalte benötigen Textäquivalente. Für reine Audioinhalte (z. B. Podcast) sind Texttranscripte notwendig. Für Audio- und Videoinhalte wie z. B. Unterrichtsmaterialien müssen synchronisierte Untertitel berücksichtigt werden. In den Texttranscripten und Untertiteln sollten gesprochene Inhalte und wichtige Geräusche, die für das Verständnis des Inhalts relevant sind, bereitgestellt werden.
Für Videosequenzen sollten (akustische oder textliche) Beschreibungen der visuellen Inhalte, die für das Verständnis wichtig sind und akustisch nicht wahrgenommen werden können, berücksichtigt werden.
Weiterführende Informationen zur Barrierefreiheit:
Anweisungen
Anweisungen müssen klar sein. Anweisungen, Erläuterungen und Fehlermeldungen sollten verständlich sein und Jargon sollte vermieden werden. Schreiben Sie z. B. „Die Eingabe ist zu lang, es sind maximal 200 Zeichen zugelassen“ statt „Bitte korrigieren Sie Ihre Eingabe“. Bei Eingabeaufforderungen sollten zugelassene Wertebereiche (z. B. Format für Datumseingabe) verfügbar gemacht werden.
<label for="startdate">Beginn (tt.mm.jj)</label>
<input name="sdate" id="startdate" type="date">Es ist üblich, Pflichtfelder mit einem Asterisk (*) zu kennzeichnen. Wenn Sie diese Variante nutzen, vergessen Sie nicht, auf Ihrer Seite auf die Bedeutung hinzuweisen: „Felder mit einem * sind Pflichtfelder“. Pflichtfelder oder optionale Felder können alternativ auch durch einen entsprechenden Text im Label gekennzeichnet werden.
<label for="vname">Vorname (Pflichtfeld): </label>
<input name="vorname" id="vname" type="text"><label for="vname">Vorname (Pflichtfeld):
<input name="vorname" id="vname" type="text">
</label>Pflichtfelder können speziell für Screenreader auch durch den Einsatz von ARIA-Attributen hervorgehoben werden:
<label for="vname">Vorname</label>
<input aria-required="true" name="vorname" id="vname" type="text">Weiterführende Informationen zur Barrierefreiheit:
Verständlichkeit
Inhalte müssen klar und prägnant sein. Es sollten eine verständliche Sprache und angemessene, unterstützende nachvollziehbare Formatierungen eingesetzt werden:
Schreiben Sie kurze und klare Sätze und Absätze.
Vermeiden Sie unnötig komplexe Begriffe und Wendungen. Begriffe und Wendungen, die Nutzern unbekannt sein könnten, sollten z. B. in einem Glossar erläutert werden.
Erläutern Sie Akronyme bei der ersten Verwendung, z. B. „Technische Universität (TU)“.
Gliedern und ordnen Sie Ihre Inhalte durch angemessene Formatierung, z. B. als Listen oder Überschriften.
Wenn die Bedeutung eines Inhalts unklar sein könnte, prüfen Sie, ob der Einsatz von zusätzlichen Bildern, Illustrationen, Audio oder Symbolen die Inhalte besser verständlich macht.
Weiterführende Informationen zur Barrierefreiheit: