Navigation

Inhalt Hotkeys
Universitäts­rechen­zentrum
Barrierefreiheit

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

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');
Resultat ist der Dokumententitel: Nutzerkonto | URZ | TU Chemnitz

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="/uk/corporate_design/handbuch/">Corporate-Design-Handbuch</a>
auf der Webseite der Universitätskommunikation.

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" />
Foto eines Smartphones mit der mobilen Seite der TU

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" />

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

Presseartikel

  • „TUCsommernacht“ feiert Premiere

    Musik, Tanz und kulinarische Genüsse verspricht am 24. Juni 2017 ein neues Veranstaltungsformat – "Glimpses of India" sorgt für internationales Flair – Restkarten gibt es an der Abendkasse …

  • Beseelter Rock für Beine und Kopp

    Alumni hauen in die Saiten: Zur Premiere der „TUCsommernacht“ am 24. Juni 2017 wird die Band „Nachtgetüm“ mit Rocksongs der 60er und 70er Jahre für Stimmung und Rock-Feeling sorgen …

  • Fünfte Folge „TUCtalk“ online

    TU-Professor Wolfram Hardt gibt Einblick in seine Arbeit als Direktor des Universitätsrechenzentrums und erklärt, warum es zu den bundesweit besten gehört …