Vorherige

Nächste

Digitale Barrierefreiheit

Abgeschlossen

Es gibt verschiedene Konzepte, Syntax und Elemente, die Sie beachten müssen, um Ihre Webseiten für alle Personen, unabhängig von ihren Fähigkeiten, barrierefrei zu gestalten. Diese Lerneinheit bietet einen Überblick über die wichtigsten Themen. Sehen Sie sich die empfohlenen Ressourcen an, um die Details der Erstellung barrierefreier Websites vollständig zu erkunden.

HTML5 und ARIA

HTML5 ist die neueste Version von Hypertext Markup Language (HTML). Das World Wide Web Consortium (W3C), eine internationale Community, die Webstandards entwickelt, empfiehlt diese Version. In jeder Hinsicht ist HTML5 der aktuelle Standard für das Web und sollte zum Aufbau der Grundstruktur für Ihre Website verwendet werden. Wenn Sie vorhaben, barrierefreie Websites zu erstellen, sollten Sie die Syntax und Tags für HTML5 lernen.

ARIA (Accessible Rich Internet Applications) ist eine technische Spezifikation, die in Kombination mit HTML5 dazu beitragen kann, Webseiten und Anwendungen barrierefreier zu gestalten. ARIA ist nicht Teil von HTML5, aber die zugehörigen Attribute können in bestimmten Fällen mit HTML5-Elementen verwendet werden.

Weitere Informationen finden Sie unter ARIA in HTML.

Überschriften und Merkmale

Personen, die die visuellen Hinweise einer Webseite nicht sehen können, verlassen sich auf Titel- und Überschriftenelemente, um zu verstehen, wie die Seite strukturiert ist. HTML5 verfügt über eine Reihe von Gliederungselementen, die die Struktur einer Seite klar kommunizieren können: <header>, <nav>, <main> und <footer>. Wenn sie richtig verwendet werden, helfen diese HTML5-Elemente Personen, die Sprachausgabe verwenden, bei der Navigation auf einer Webseite.

Um die Barrierefreiheit zu maximieren, empfiehlt es sich jedoch, die HTML5-Elemente mit ARIA-Rollen zu verwenden. ARIA-Rollen sind: Rolle = „banner“, Rolle = „navigation“, Rolle = „main“ und Rolle = „contentinfo“. Diese ARIA-Rollen schaffen eine Merkmalstruktur, die es Personen mit Sprachausgaben ermöglicht, schnell und einfach zu einem gewünschten Teil einer Webseite zu navigieren. Anstatt darauf zu warten, dass die Sprachausgabe jedes Element einzeln vorliest, kann eine Person z. B. sofort zu einem bestimmten Merkmal weiter unten auf einer Webseite springen.

Weitere Informationen finden Sie im W3C-Beispiel zu ARIA-Merkmalen.

Seitenstruktur

Websites sollten auch einen programmgesteuerten Titel oder eine ordnungsgemäße Formatierung der Überschriften enthalten. Wenn eine Webseite keinen Titel aufweist oder Überschriftenelemente nicht ordnungsgemäß verwendet, kann es für Personen mit Sprachausgabe schwierig zu erkennen sein, wo sie sich auf einer bestimmten Seite befinden.

So vermeiden Sie diese Probleme

• Stellen Sie sicher, dass Webseiten einen informativen und kontextgerechten Seitentitel bereitstellen, indem Sie das Element <title> verwenden.
• Stellen Sie sicher, dass programmgesteuerte Überschriften überall dort verwendet werden, wo es angebracht ist, und dass diese richtig geschachtelt sind. Ein <h3>-Element sollte nicht auf ein <h1>-Element folgen, es sei denn, es befindet sich ein <h2>-Element zwischen ihnen.  
• Vermeiden Sie es, Überschriftenelemente nur aus stilistischen Gründen zu verwenden.

Color

Wie bei jedem digitalen Inhalt ist die Verwendung von Farbe ein wesentlicher Aspekt beim Erstellen einer Webseite. Sie sollten sicherstellen, dass Farbe nicht das einzige visuelle Mittel ist, um Informationen zu vermitteln, eine Aktion anzuzeigen, eine Reaktion hervorzurufen oder ein visuelles Element zu unterscheiden. Wenn nur Farbe verwendet wird, können blinde oder farbenblinde Personen möglicherweise nicht erkennen, welche Felder erforderlich sind, welche Elemente ausgewählt sind usw. Stellen Sie sicher, dass Text und bildlich dargestellter Text ein Farbkontrastverhältnis von mindestens 4,5 zu 1 aufweisen. Diverse Farbkontrastanalysetools stehen online kostenlos zur Verfügung. Beispielsweise können Sie den Color Contrast Analyzer in Accessibility Insights in Windows verwenden, um barrierefreie Kontrastverhältnisse sicherzustellen.

 Einige Ausnahmen von dieser Richtlinie sind:

• Großer Text: Großformatiger Text (18 Punkt normal oder 14 Punkt fett) und Bilder von großformatigem Text können ein Kontrastverhältnis von 3:1 aufweisen.
• Zufälligkeiten{: Es gibt keine Kontextanforderung für Text oder Textabbildungen, die Teil einer inaktiven Komponente der Benutzeroberfläche (UI) sind. Oder für Text oder Textabbildungen, die nur der Dekoration dienen und für niemanden sichtbar sind, oder die Teil eines Bilds sind, das andere wichtige visuelle Inhalte enthält.
• Logotypen: Text, der Teil eines Logos oder Markennamens ist, weist keine Mindestkontrastanforderung auf.

Großer Text auf dem Bildschirm für die Barrierefreiheit

Datentabellen

Datentabellen können für einige Hilfstechnologieanwendungen, z. B. Sprachausgaben, schwierig sein. Gehen Sie wie folgt vor, wenn Sie Tabellen auf Ihrer Website verwenden möchten, um Datentabellen so barrierefrei wie möglich zu gestalten:

• Verwenden nativer HTML-Tabellenelemente (table, thead, tbody, tr, th und td)
• Kennzeichnen Sie Tabellenüberschriften ordnungsgemäß (verwenden Sie das th-Element).
• Stellen Sie bei komplexen Tabellen (mehrere Kopfzeilen) sicher, dass die Kopfzeilen den richtigen Daten zugeordnet sind:
• Verwenden Sie das Attribut „scope“, um zu identifizieren, ob die Zelle eine Kopfzeile für eine Zeile, Spalte oder eine Gruppe von Zeilen oder Spalten ist (mithilfe der Werte row, col, rowgroup oder colgroup).
• Fügen Sie ein id-Attribut zu jeder Zelle hinzu, die als Kopfzeile für andere Zellen verwendet wird, und verweisen Sie dann auf den entsprechenden id-Wert mit einem headers-Attribut in jeder Datenzelle.

Wenn diese Schritte nicht unternommen werden, könnten Personen, die Hilfstechnologien verwenden, Schwierigkeiten haben, die Datentabellen auf Ihrer Website zu verstehen.

Formulartimeout und Feedback

Wenn Fehlermeldungen nicht eindeutig gekennzeichnet sind, könnten Personen, die Hilfstechnologien verwenden, ein Formular auf einer Website möglicherweise nicht ordnungsgemäß ausfüllen. Zeitlich begrenzte Antworten könnten verhindern, dass Personen, die Hilfstechnologien verwenden, ein Formular ausfüllen oder eine Webanwendung nutzen können.

Nach der Überprüfung können Sie Fehlermeldungen wie folgt eindeutig angeben:

• Verwenden einer einheitlichen Methode zum Verweisen auf Fehlermeldungen
• Identifizieren der fehlerhaften Felder
• Identifizieren von Fehlerfeldern am Anfang des Formulars oder
• Identifizieren von Fehlerfeldern in der Bezeichnung für die einzelnen Felder

Wenn möglich, müssen Vorschläge für alternative Eingaben bereitgestellt werden. Dieser Ansatz ist jedoch nicht erforderlich, wenn dies den Zweck des Formulars verfehlen würde. Wenn das Formular z. B. Teil eines Tests ist, könnte ein Vorschlag für alternative Eingaben möglicherweise einen Hinweis oder eine Antwort auf eine Frage liefern, die vielleicht nicht angemessen ist.

Bei rechtlichen oder Finanztransaktionen sollte eine Fehlervermeidung bereitgestellt werden. Eine Möglichkeit besteht darin, den Personen die Möglichkeit zu geben, ihre Eingaben zu überprüfen, bevor sie sie endgültig übermitteln.

Verknüpfungen

Personen, die Sprachausgaben verwenden, können durch eine Webseite navigieren, indem sie eine Liste der Links der Webseite betrachten.

Wenn mehrere Links auf einer Webseite denselben Namen haben, aber auf unterschiedliche URLs verweisen, könnte dies zu Verwirrung führen. Stellen Sie sicher, dass die Namen der Links aussagekräftig, eindeutig und beschreibend sind, unabhängig davon, ob im oder außerhalb des Kontexts.

Vermeiden Sie generische, nicht beschreibende Linknamen, die außerhalb des Kontextes verwendet werden, z. B. in einer Liste „Zusätzliche Ressourcen“. Eine Person, die die Sprachausgabe verwendet, hat keinen Kontext und weiß nicht, um was es sich bei dem Link handelt oder warum er sich an einem bestimmten Ort befindet. Diese Beispiele zeigen eine Liste mit generischen, nicht barrierefreien Linknamen und eine Liste mit barrierefreien, beschreibenden Linknamen.

Beispiel für barrierefreie Links:

Reihe beschreibender Linknamen

Beispiel für nicht barrierefreie Links:

Reihe von generischen, nicht beschreibenden Linknamen

Bilder

Blinde Personen können keine Bilder sehen und sind darauf angewiesen, dass Websiteentwickler und Inhaltsautoren diese beschreiben.

Menschen mit eingeschränktem Sehvermögen haben möglicherweise Schwierigkeiten, ein Textbild zu lesen, weil es bei der Vergrößerung verpixelt wird. Andere Probleme treten auf, wenn der Kontrast nicht hoch genug oder das Bild zu klein ist.

Geben Sie kurzen, spezifischen und informativen Alternativtext für Bilder wie Fotos und Schaltflächen an.  

Beispiel für ein nicht barrierefreies Bild:

<img src="MSFTlogo.jpg" alt="logo" />

Beispiel für ein barrierefreies Bild:

<img src="MSFTlogo.jpg" alt="Microsoft logo" />

Das nicht barrierefreie Beispiel beschreibt das Bild zwar als Logo, gibt aber nicht die Art des Logos an, sodass es für Personen, die sich auf Alternativtext verlassen, nicht hilfreich ist. Durch das Hinzufügen des Qualifizierers im barrierefreien Beispiel weiß ein Benutzer genau, was das Logo darstellt.

Ein weiteres Nicht-Text-Element, das Sie berücksichtigen sollten, sind dekorative Bilder. Wenn eine Webseite z. B. einen stilisierten Rahmen enthält, ist es nicht erforderlich, diesen im Alternativtext detailliert zu beschreiben. Sie können im Code angeben, dass es sich um ein dekoratives Element handelt, indem Sie ein leeres „alt“-Attribut hinzufügen.

Beispiel für ein Bild und einen dekorativen Rahmen

Nicht barrierefreies Beispiel:

<img src="border.gif" />

Barrierefreies Beispiel:

<img src="border.gif" alt="" />

Das barrierefreie Beispiel enthält keinen Text. Die Tatsache, dass das alt-Attribut enthalten ist, aber keinen Text anzeigt, weist Personen mit Sprachausgabe darauf hin, dass das Bild dekorativ ist und keine entscheidenden Informationen enthält.

Weitere Informationen zur Verbesserung der Barrierefreiheit finden Sie in der W3C-Demonstration zur nicht barrierefreien Homepage – Vorher und nachher.

Weiter