Checkliste zum Erstellen einer barrierefreien Webseite an der TU Chemnitz

Ein sauberer Seitenaufbau ist für eine barrierefreie Seite sehr wichtig. Hierzu gehört neben einer sauberen Semantik auch die korrekte Nutzung der HTML-Tags, welche den Komfort einer Seite erhöht.

Haben Sie die Überschriften sauber definiert und stimmt die Hierarchie? Ja Nein

Überschriften sind hierarchisch dargestellt, damit beeinträchtigte Menschen den Inhalt vollständig wahrnehmen können. (WCAG Erfolgskriterium 2.4.6)

Prüfen und Ändern der Überschriftenhierarchie direkt im Browser mit dem WFM-Editor

Im WFM-Editor können Sie die Überschriftenhierarchie direkt einstellen. Nutzen Sie dafür den Menüpunkt „Absatzformat“ und wählen Sie die entsprechende Überschriftenart aus.

Prüfen und Ändern der Überschriftenhierarchie mit einem Editor über das AFS

Zunächst müssen Sie die Überschrift (<h…>) im Quellcode finden. Anhand der Zahl können Sie feststellen, welche Ebene die Überschrift besitzt. Um diese barrierefrei zu gestalten, sollten die Überschriften von <h1> bis <h6> strukturiert sein. Eine <h1>-Überschrift ist hierbei die oberste.

Wenn Sie eine Überschrift kleiner bzw. größer als das vorgegebene Format wählen möchten, können Sie – wie in folgendem Quellcode – mit dem Attribut „class“ arbeiten:

<h1 class="h2">

In diesem Beispiel wird eine <h1> Überschrift in der Größe einer <h2> Überschrift dargestellt.

Ich habe die Überschriftenhierarchie überprüft bzw. korrigiert.

Nutzen Sie die Textabsätze, welche als Blocksatz formatiert sind? Ja Nein

Sie sollten auf den Einsatz von Blocksatzabsätzen verzichten. Der Grund dafür ist, dass Blocksatz zu gleichmäßig aussieht. Dadurch verliert man beim Lesen schneller die Orientierung. Bei einem linksbündigen Flattersatz fällt es leichter, sich an den ungleichmäßigen Zeilenenden zu orientieren. (WCAG Erfolgskriterium 1.4.8)

Prüfen und Ändern der Textausrichtung direkt im Browser mit dem WFM-Editor

Im WFM-Editor können Sie die Textausrichtung direkt einstellen. Suchen Sie dafür im Menüpunkt die aktuelle Textausrichtung und passen Sie diese gegebenenfalls an.

Prüfen und Ändern der Textausrichtung mit einem Editor über das AFS

Blocksatz können Sie anhand dieses Quellcodes erkennen:

<p align="justify">Blocksatz</p>

<p style="align:justify">Blocksatz</p>

Sie müssen lediglich die Ausrichtung (align="justify" bzw. align:justify) entfernen.

Nun sind alle Absätze richtig formatiert.

Sind eingesetzte Listen sauber als Listen formatiert? Ja Nein

Listen müssen als Liste erstellt werden, damit der Screenreader sie als solche erkennt. Er kündigt dann an, dass eine Liste folgt und nennt die Anzahl der enthaltenen Elemente.

Prüfen und Ändern von Listen direkt im Browser mit dem WFM-Editor

Sie können eine Liste direkt im WFM-Editor erstellen. Dazu könnnen Sie das Symbol „Liste“ für eine ungeordente Liste und das Symbol „nummerierte Liste“ für eine geordnete Liste verwenden.

Erstellen von Listen mit einem Editor über das AFS

Zunächst müssen Sie sich die entsprechende Liste im Quellcode heraussuchen. Listen sollten nicht als <p>-Tags mit Anstrichen erstellt werden.

Hierfür sollten die entsprechenden Tags <ul> für eine ungeordente Liste und <ol> für eine geordnete Liste verwendet werden. Die Listenelemente werden jeweils mit <li>-Tags erzeugt.

Quellcode einer ungeordneten Liste:

<ul>
  <li>Listenelement 1</li>
  <li>Listenelement 2</li>
  <li>Listenelement 3</li>
<ul>
				

Quellcode einer geordneten Liste:

<ol>
  <li>Listenelement 1</li>
  <li>Listenelement 2</li>
  <li>Listenelement 3</li>
<ol>
				

Nun sind alle Listen richtig formatiert.

Haben Sie Abkürzungen so dargestellt, dass diese erläutert werden?Ja Nein

Auf einer barrierefreien Webseite müssen sowohl Abkürzungen als auch Akronyme eine inhaltliche Erläuterung erhalten. Bei üblichen Abkürzungen (z. B., TU, usw.) müssen Sie diese Funktion nicht einsetzen. (BITV)

Prüfen und Ändern von Abkürzungen direkt im Browser mit dem WFM Editor

Sie können Abkürzungen direkt im WFM-Editor erstellen. Dazu können Sie das Symbol „Abkürzungen einfügen” verwenden. Unter dem Menüpunkt Abkürzungen können Sie die entsprechende Abkürzung eingeben und im Feld Erkl&aum;rung die entsprechende Erläuterung.

Erstellen von Abkürzungen mit einem Editor über das AFS

Zunächst müssen Sie sich die entsprechende Abkürzung im Quellcode heraussuchen. Anschließend können Sie mithilfe von <abbr> die entsprechende Abkürzung definieren.

<abbr title="Technische Universität Chemnitz">TU Chemnitz</abbr>

Ich habe alle Abkürzungen richtig dargestellt.

Nun sollten die wichtigsten Dinge beim Seitenaufbau korrekt eingebunden sein. Bitte gehen Sie zum nächsten Punkt.

Da Bilder für blinde Nutzerinnen und Nutzer nicht zugänglich sind, muss es eine Alternative geben, damit sie den Inhalt der Bilder ebenfalls erfassen können. Hierbei müssen einige Regeln beachtet werden.

Befinden sich Bilder, Grafiken, Icons auf Ihrer Seite? Ja Nein

Abbildungen benötigen einen Alternativtext, damit blinde Benutzerinnen und Benutzer den Inhalt dieser Bilder ebenfalls erfassen können und dieser von Screenreadern vorgelesen werden kann.

Prüfen und Hinzufügen der Alternativtexte direkt im Browser mit dem WFM-Editor

Im WFM-Editor können Sie die Bilder direkt sehen. Nutzen Sie auf dem Bild die rechte Maustaste und wählen Sie „Bildeigenschaften“. Nun öffnet sich ein Fenster. Dort können Sie im Feld „Alternativer Text“ einfach den Alternativtext zum Bild eingeben.

Prüfen und Hinzufügen der Alternativtexte mit einem Editor über das AFS

Zunächst müssen Sie die Abbildung (<img>) im Quellcode finden. Hier können Sie sehen, ob das Bild überhaupt ein Attribut für den Alternativtext (alt) besitzt:

Code ohne Alternativtext:

<img src="bilder/tool-384740_640.jpg">

Sollte es kein Attribut für den Alternativtext geben, dann muss dieses nun innerhalb des Bild-Tags (<img>) hingefügt werden.

Code mit verständlichem Alternativtext:

<img src="bilder/tool-384740_640.jpg" alt="Ein Hammer, eine Zange und ein Schraubendreher liegen auf einer Werkbank.">

Dekorative Bilder ohne Mehrwert für den Inhalt der Seite

Wenn Sie Bilder einsetzen, welche nur einen dekorativen Charakter besitzen und keinen inhaltlichen Mehrwert für den Leser oder die Leserin bieten, dann können Sie das alt-Attribut einfach leer lassen. Es wird dann von Screenreader einfach übersprungen. Das Attribut selbst muss aber vorhanden sein. (alt="")

Ich habe Alternativtexte überprüft bzw. hinzufügt.

Stimmen die Alternativtexte zu den Inhalten der Bilder? Ja Nein

Korrekte Alternativtexte sind sehr wichtig, damit Ihre Internetauftritte von allen verstanden werden. So sollen diese genau den Inhalt vermitteln, welchen Sie auch sehenden Personen zur Verfügung stellen wollen.

Wichtig ist bei Alternativtexten auch der Zusammenhang zum vermittelten Inhalt. Ist es z. B. wichtig, wie viele Personen auf einem Bild zu sehen sind oder genügt die Information, dass sich Personen auf dem Bild befinden?

Sollten Ihre Bilder Texte enthalten, dann müssen diese mit in den Alternativtext, um die gleichen Informationen zu vermitteln.

Prüfen und Ändern der Alternativtexte direkt im Browser mit dem WFM-Editor

Im WFM-Editor können Sie die Bilder direkt sehen. Nutzen die auf dem Bild die rechte Maustaste und wählen Sie „Bildeigenschaften“. Nun öffnet sich ein Fenster. Dort können Sie im Feld „Alternativer Text“ einfach den Alternativtext überprüfen bzw. korrigieren.

Prüfen und Ändern der Alternativtexte mit einem Editor über das AFS

Zunächst müssen Sie die Abbildung (<img>) im Quellcode finden. Hier können Sie das Bild mit dem Alternativtext sehen:

Code mit Alternativtext:

<img src="bilder/menschen.jpg" alt="Drei Personen stehen vor einer Tafel.">

Nun passen alle Alternativtexte.

Nutzen Sie Abbildungen zur Navigation (z. B. in Slideshows zum Bilderwechsel, Abspielen, Pausieren)? Ja Nein

Nun sollten alle Bilder, sofern es welche geben sollte, korrekt eingebunden sein. Somit gibt es hier keine Probleme mit der Barrierefreiheit. Bitte gehen Sie zum nächsten Punkt.

Verlinkungen in Texten sind ein häufig eingesetztes Werkzeug, um schnell auf andere Seite zu verweisen. Hierbei sollten einige Regeln eingehalten werden, damit diese problemlos vom Lesenden verstanden werden und Hilfstechnologien die Linktexte sauber vorlesen.

Nutzen Sie Verlinkungen zu anderen Seiten innerhalb Ihres Textes? Ja Nein

Stehen die Links ausgeschrieben als Link im Text (z. B. https://www.tu-chemnitz.de/)? Ja Nein

Links sollten in Texten nicht einfach als komplett ausgeschriebene Links (z. B. https://www.tu-chemnitz.de/) stehen. In diesem Fall wird der Screenreader jedes Zeichen mit vorlesen. Die Links sollten direkt in den Fließtext eingebunden bzw. mit einem beschreibenden Linktext versehen werden (z. B. Homepage der TU Chemnitz).

Ändern von ausgeschriebenen Links zu Textlinks im Browser mit dem WFM-Editor

Im WFM-Editor können Sie mit der rechten Maustaste auf einen Link klicken und „Link bearbeiten“ wählen. Es öffnet sich ein Fenster mit den Eigenschaften der Verlinkung.

Als Anzeigetext steht hier der ausgeschriebene Link. Diesen müssen Sie wie folgt anpassen:

Ändern von ausgeschriebenen Links zu Textlinks mit einem Editor über das AFS

Zunächst müssen Sie die Verlinkung (<a href=…>Text</a>) im Quellcode finden:

Code mit kompletter Verlinkung im Text:

<a href="https://www.tu-chemnitz.de/">https://www.tu-chemnitz.de/</a>

Hier können Sie den Text innerhalb der <a>-Tags ändern und dadurch einen sauberen Text mit Link erstellen:

Code Textlink:

<a href="https://www.tu-chemnitz.de/">Homepage der TU Chemnitz</a>

Die Links sind nun im Text integriert.

Nutzen Sie Bilder mit Verlinkungen? Ja Nein

Abbildungen mit Link benötigen einen Alternativtext, welcher ihre Funktion bzw. das Linkziel prägnant beschreiben, damit blinde Benutzer das Ziel des Link mit Bild verstehen können und dieser von Screenreadern mit vorgelesen werden kann.

Prüfen und Hinzufügen der Alternativtexte direkt im Browser mit dem WFM-Editor

Im WFM-Editor können Sie die Bilder direkt sehen. Nutzen Sie auf dem Bild die rechte Maustaste und wählen Sie „Bildeigenschaften”. Nun öffnet sich ein Fenster. Dort können Sie im Feld „Alternativer Text” einfach den Alternativtext zum Bild eingeben.

Prüfen und Hinzufügen der Alternativtexte mit einem Editor über das AFS

Zunächst müssen Sie die Abbildung (<img>) im Quellcode finden. Hier können Sie sehen, ob das Bild überhaupt ein Attribut für den Alternativtext (alt) besitzt:

Code ohne Alternativtext:

<img src="bilder/tool-384740_640.jpg">

Sollte es kein Attribut für den Alternativtext geben, dann muss dies nun innerhalb des Bild-Tags (<img>) hinzugefügt werden.

Code mit verständlichem Alternativtext:

<img src="bilder/tool-384740_640.jpg" alt="Ein Hammer, eine Zange und ein Schraubendreher liegen auf einer Werkbank.">

Die Bilder mit Links haben nun einen passenden Alternativtext.

Nun sollten alle Verlinkungen, sofern es welche geben sollte, korrekt eingebunden sein. Somit gibt es hier keine Probleme mit der Barrierefreiheit. Bitte gehen Sie zum nächsten Punkt.

Bei der Benutzung von Audio- und Videodateien muss immer an Personen gedacht werden, welche das Material in dieser Form nicht oder nur schlecht erfassen können. Daher ist es zwingend erforderlich, dass es für diesen Inhalt eine Alternative in Textform gibt. Eine Ausnahme bilden hierbei Live-Veranstaltungen.

Nutzen Sie Audiodateien auf Ihrer Internetseite (z. B. Podcasts)? Ja Nein

Nutzen Sie Videos auf Ihrer Internetseite? Ja Nein

Wird im Video gesprochen? Ja Nein

Nun sollten alle Audio- und Videodateien, sofern es welche geben sollte, korrekt eingebunden sein. Somit gibt es hier keine Probleme mit der Barrierefreiheit. Bitte gehen Sie zum nächsten Punkt.

Nach den gesetzlichen Vorgaben müssen die visuelle Darstellung von Text sowie Bildern von Text ein Kontrastverhältnis von mindestens 4,5:1 (Konformitätsstufe AA) haben. Es handelt sich hierbei um das Erfolgskriterium 1.4.3 der WCAG. Somit müssen Sie alle Ihre Inhalte auf ausreichendes Kontrastverhältnis kontrollieren.

Nutzen Sie nur schwarzen Inhalt (auf weißen Hintergrund)? Ja Nein

Nutzen Sie noch andere Farben als die Fakultätsfarben (auf weißen Hintergrund)? Ja Nein

Fehler mit den TUCAL Webtools des Universitätsrechenzentrums ermitteln

Das URZ bietet Werkzeuge zum Finden von Fehlern und toten Links auf Seiten der TU Chemnitz an. Auch Kontrastfehler werden auf der geprüften Seite gefunden. Besuchen Sie dazu unsere TUCAL Webtools und fügen Sie die gewünschte Seite oben ein. Danach werden Ihnen unter dem Punkt „Barrierefreiheitsprobleme“ gefundene Fehler angezeigt. Durch Aufklappen der Erläuterung zum Fehler erfahren Sie zusätzliche die genaue Position des Kontrastproblems.

Nun können Sie den Fehler einfach auf der Seite korrigieren, indem Sie die Farbe der betroffenen Stelle abändern.

Fehler finden mit dem Colour Contrast Analyser (CCA) ermitteln und Alternativfarbe finden

Ein sehr gutes Tool zum Überprüfen des Kontrastverhältnisses zwischen zwei Farben ist der Colour Contrast Analyser (CCA) (Windows, Mac). Dieser muss auf Ihrem System installiert werden. Wenn Sie das Tool starten, ist es dauerhaft im Vordergrund. Nun können Sie mit der kleinen Pipette eine Vordergrund- und eine Hintergrundfarbe auf der Seite auswählen. Das Tool zeigt Ihnen direkt, ob die gewählten Farben die Konformitätsstufe AA der WCAG erfüllen. Alternativ können Sie auch die Browser-Addons „WCAG Contrast Checker” (Firefox) bzw. „WCAG Color Contrast Checker“ (Chromium) zur Prüfung nutzen.

Bei Farbkombinationen, welche nicht genügen, können Sie einfach den Schieberegler unter der jeweiligen Farbe benutzen und damit die Farbe leicht ändern. Sobald das Verhältnis stimmt, wird Ihnen das im Programm angezeigt. Nun haben Sie den passenden Farbcode ermittelt und können diesen auf der Seite einsetzen.

Nun passen die Kontraste aller Texte.

Nutzen Sie ein eigenes Logo mit Text? Ja Nein

In den WCAG ist definiert, dass Texte, welche Teil eines Logos oder eines Markennamens sind, keine Kontrastanforderungen haben. Somit müssen Sie nichts weiter tun.

Damit sollte es auf Ihrer Seite keine Probleme mit Kontrasten geben. Sehr gut.

Nach dem Erfolgskriterium 2.4.7 (Stufe AA) der WCAG 2.1 muss für jede durch die Tastatur bedienbare Benutzerschnittstelle der Tastaturfokus sichtbar sein. Dies erfolgt meist durch eine Umrandung von Links, Buttons und Eingabefeldern. Überprüfen können Sie dies schnell, indem Sie ganz oben in Ihren Inhaltsbereich klicken und dann mit der Tab-Taste durch Ihren Inhalt navigieren.

Können Sie den Fokus aller Links, Buttons und Eingabefelder durch das Durchklicken mit der Tab-Taste erkennen? Ja Nein

Nun sollte für jede durch die Tastatur bedienbare Benutzerschnittstelle der Tastaturfokus sichtbar sein. Somit gibt es hier keine Probleme mit der Barrierefreiheit. Bitte gehen Sie zum nächsten Punkt.

Bei der Benutzung von Eingabefeldern ist es wichig, dass auch Benutzende mit Beeinträchtigung diese zu 100% verstehen und ausfüllen können. Es muss jederzeit deutlich sein, um welches Feld es sich handelt und welcher Inhalt ins Feld eingetragen werden muss.

Befinden sich Eingabefelder auf Ihrer Seite? Ja Nein

Verfügen diese Eingabefelder über Beschriftungen (Label)? Ja Nein

Unterstützen Sie das automatische Ausfüllen durch autocomplete-Attribute? Ja Nein

<input name="Nachname" id="Nachname" type="text">

<input name="Nachname" id="Nachname" type="text" autocomplete="family-name">

Werden die Eingaben auf Fehler geprüft und diese dem Nutzer/der Nutzerin angezeigt? Ja Nein

Sind die Fehlermeldungen wirklich aussagekräftig? Ja Nein

Nun sollten alle Eingabefelder, sofern es welche geben sollte, korrekt eingebunden sein. Somit gibt es hier keine Probleme mit der Barrierefreiheit. Bitte gehen Sie zum nächsten Punkt.

Beim Einsatz von Tabellen müssen Ersteller auf einige wichtige Dinge achten, damit Hilfstechnologien den Inhalt einer Tabelle korrekt wiedergeben können. Beispielsweise muss deutlich sein, welcher Inhalt in welcher Spalte angezeigt wird. Die Benutzung von Tabellen, welche nur dekorativen Zwecken dienen (Layout), ist nicht barrierefrei.

Nutzen Sie Tabellen in Ihrem Inhaltsbereich? Ja Nein

Haben Sie Tabellen zu dekorativen Zwecken (Layout) genutzt? Ja Nein

Haben Sie Kopfzeilen einer Tabelle als solche gekennzeichnet? Ja Nein

Tabellen benötigen eine Kopfzeile, damit der Inhalt richtig wahrgenommen werden kann.

Tabelle direkt im Browser mit dem WFM-Editor bearbeiten

Im WFM-Editor können Sie die Tabelle direkt bearbeiten. Nutzen Sie dafür den Menüpunkt „Tabelle“ und wählen Sie unter dem Unterpunkt Kopfzeile das entsprechende Format aus.

Prüfen und Ändern der Absätze mit einem Editor über das AFS

Zunächst müssen Sie sich die entsprechende Tabelle im Quellcode heraussuchen. Dieser sollte in <table>-Tags eingeschlossen sein. Die Kopfzeile der Tabelle wird mithilfe von <th>-Tags definiert. Dies ist für jede einzelne Kopfzeile vorzunehmen.

Beispieltabelle:

<table>
  <tr> 
    <th>Kopfzeile1</th>
    <th>Kopfzeile2</th>
    <th>Kopfzeile3</th>
  </tr>
  <tr>
    <td>Inhalt1</td>
    <td>Inhalt2</td>
    <td>Inhalt3</td>
  </tr>
</table>
		

Ich habe alle Kopfzeilen entsprechend gekennzeichnet.

Haben Sie leere Datenzellen? Ja Nein

Nun sollten alle Tabellen, sofern es welche geben sollte, korrekt eingebunden sein. Somit gibt es hier keine Probleme mit der Barrierefreiheit.

Beim Einsatz von Diagrammen gibt es einige Merkmale, welche dazu führen, dass diese auch von Personen mit Sehschwächen verstanden werden können.

Befinden sich Diagramme auf Ihrer Seite? Ja Nein

Lassen sich die Diagramme auch lesen, wenn Sie keine Farben unterscheiden können? Ja Nein

In Grafiken sollte eine Information nicht nur über Farbe oder Farbwechsel vermittelt werden. Farben dürfen somit nicht der alleinige Informationsträger sein. Fügen Sie stets ein zweites Merkmal wie ein Muster oder eine spezielle Formatierung hinzu. In den folgenden Diagrammen können Sie erkennen, dass es zu Problemen kommen kann, wenn die Farbe der alleinige Informationsträger ist.

Bildquelle: Statista – "Mitgliederzahlen der politischen Parteien in Deutschland am 31. Dezember 2014" in Farbe und wie es ggf. von Menschen mit Sehbehinderung wahrgenommen wird.

Nun lassen sich die Diagramme auch lesen, wenn man keine Farben unterscheiden kann.

Haben Sie beim Erstellen an Formatierungen wie Rasterlinien und Flächen statt Linien gedacht? Ja Nein

Nun sollten alle Diagramme, sofern es welche geben sollte, korrekt eingebunden sein. Somit gibt es hier keine Probleme mit der Barrierefreiheit. Bitte gehen Sie zum nächsten Punkt.

Screenreader erkennen die Hauptsprache einer Internetseite anhand des Sprachenattributs im HTML-Tag einer Internetseite und lesen den Inhalt dann auch in dieser Sprache vor. Auf dieses Sprachenattribut müssen Sie nicht achten, weil die Dokumentensprache über das Autoren- und Layoutsystem TUCAL definiert wird. Wenn Sie jedoch im Inhaltsbereich Ihrer Seiten Ausdrücke, Sätze oder Absätze in einer anderen Sprache nutzen, dann müssen Sie dies dem Screenreader mitteilen.

Nutzen Sie Ausdrücke, Sätze oder Absätze in anderen Sprachen? Ja Nein

Sprache direkt im Browser mit dem WFM-Editor ergänzen

Auch über den WFM-Editor müssen Sie beim jeweiligen Ausdruck, Satz oder Absatz das Sprachenattribut direkt im Quellcode hinzufügen. Hierzu können Sie sich links oben im WFM-Editor über den Button „Quellcode“ den HTML-Code der Seite anzeigen lassen:

Nun müssen Sie im Quellcode den Absatz bzw. die Stelle mit dem Sprachenwechsel finden:

<p>Englischsprachiger Inhalt</p>

Diesem Absatz können Sie das Sprachenattribut (z. B. „en“ für englisch) hinzufügen:

<p lang="en">Englischsprachiger Inhalt</p>

Sollte es sich nur um ein Wort oder mehrere Worte in einem Absatz handeln, dann können Sie diese mithilfe eines <span>-Tags einschließen:

<span lang="en">Englischsprachiges Wort</span>

Sprache mit einem Editor über das AFS ergänzen

Zunächst müssen Sie im Quellcode den Absatz bzw. die Stelle mit dem Sprachenwechsel finden:

<p>Englischsprachiger Inhalt</p>

Diesem Absatz können Sie das Sprachenattribut (z.B. "en" für englisch) hinzufügen:

<p lang="en">Englischsprachiger Inhalt</p>

Sollte es sich nur um ein Wort oder mehrere Worte in einem Absatz handeln, dann können Sie diese mithilfe eines <span>-Tags einschließen:

<span lang="en">Englischsprachiges Wort</span>

Ich habe die Sprachen nun korrekt definiert.

Nun sollten alle Ausdrücke, Sätze oder Absätze in anderen Sprachen, sofern es welche geben sollte, korrekt eingebunden sein. Somit gibt es hier keine Probleme mit der Barrierefreiheit. Bitte gehen Sie zum nächsten Punkt.