Wie Sie Ihre Website für jedermann barrierefrei machen

Unser Blick auf Barrierefreiheit

Bei Kiwee haben wir uns entschieden zu prüfen, ob wir die wichtigsten Standards für Barrierefreiheit einhalten. Es stellte sich heraus, dass unsere Website in mehreren Bereichen verbessert werden muss. Wir haben kiweeagentur.de zusammen mit Maciej und Serge überarbeitet und freuen uns, Ihnen die Ergebnisse unserer ersten Barrierefreiheitsprüfung sowie einige praktische Tipps zu geben, was Sie auch selbst umsetzen könnten.

Was ist Barrierefreiheit im Internet?

Barrierefreiheit bedeutet, dass jeder, unabhängig von seiner Gesundheit und seinem Zustand, uneingeschränkt auf das Internet zugreifen und mit ihm interagieren kann. Dazu gehört das Navigieren auf der Website, das Verstehen des Inhalts der Website und die Möglichkeit, Formulare auszufüllen und zu senden.

Ich empfehle dringend, diese Einführung in die Barrierefreiheit von W3 anzusehen, da sie viele Situationen zeigt, an die wir vielleicht nie gedacht haben.

Warum sollten Sie sich darum kümmern?

Heutzutage ist das Internet für uns unentbehrlich geworden. Es ist in allen Lebensbereichen weit verbreitet, einschließlich Bildung, Gesundheitswesen, Handel und vielem mehr. Es ist wichtig, allen den gleichen Zugang zu diesem Medium zu ermöglichen. Es kann auch für Menschen mit besonderen Bedürfnissen einfacher sein, online einzukaufen, anstatt in ein physisches Geschäft gehen - vorausgesetzt, dieser Online-Shop wurde unter Berücksichtigung der Barrierefreiheit entwickelt.

Nach Angaben der Weltgesundheits­organisation WHO gibt es mehr als eine Milliarde Menschen auf der Welt mit besonderen Bedürfnissen. Das sind etwa 15% der Weltbevölkerung. Ihre Website zugänglicher zu machen, wird allen zugute kommen - nicht nur Menschen mit Behinderungen, sondern auch Menschen mit vorübergehenden schwierigen Bedingungen: Lesen bei hellem Sonnenlicht, Navigieren auf Websites, wobei die Tastatur mit einer Hand bedient wird usw.

Und schließlich das Wichtigste - Empathie. Überprüfen Sie, wie Ihre Lieblings-Websites für farbenblinde Menschen aussehen. Versuchen Sie, einige Ihrer täglichen Online-Routinen mit einem Screenreader durchzuführen. Wenn es schwierig ist, ist dies der beste Grund, sich um die Barrierefreiheit im Internet zu kümmern.

Werfen Sie einen Blick auf die Standards für Barrierefreiheit

Die oben gegebene Definition der Barrierefreiheit ist ziemlich allgemein. Sie sagt nicht viel darüber aus, wie eine Website entwickelt werden soll, damit sie barrierefrei ist. Wenn Sie einige Richtlinien und technische Spezifikationen zu barrierefreien Webinhalten haben möchten, sollten Sie einen Blick auf die WCAG werfen. WCAG (Web Content Accessibility Guidelines) sind Teil des W3C und ein international anerkannter Standard für barrierefreie Webinhalte. Sie sind in drei Konformitätsstufen unterteilt: A, AA und AAA. Je höher die Stufe, desto anspruchsvoller sind die Kriterien. 'A' ist das Mindestmaß an Zugänglichkeit, das von allen Websites und Apps erfüllt werden sollte.

Bei der Entwicklung einer Website sollten die vier Prinzipien der Barrierefreiheit (POUR) berücksichtig werden. Eine Website sollte sein:

1. Wahrnehmbar - Inhalte können nicht für alle Sinne eines Benutzers unsichtbar sein.
2. Bedienbar - die Komponenten der Benutzeroberfläche können keine Aktionen erfordern, die der Benutzer nicht ausführen kann.
3. Verständlich - die Benutzeroberfläche kann nicht über das Verständnis des Benutzers hinausgehen.
4. Robust - der Benutzer sollte in der Lage sein, mit verschiedenen Benutzeragenten und Hilfstechnologien auf die Website zuzugreifen.

Wie wir unsere Website getestet haben

Um zu überprüfen, ob Ihre Website barrierefrei ist, testen Sie sie am besten selbst. Zuerst öffneten wir verschiedene Screenreader und verbrachten einige Zeit damit, uns auf unserer kiwee.eu-Website zu bewegen. Sie werden wahrscheinlich schnell eine Menge Probleme entdecken, die Sie daran hindern, die Website richtig zu nutzen. Zu den netten Sachen, die Sie ausprobieren sollten, gehört der Zugriff auf die Website über einen Textbrowser wie Lynx. Mit ihm konnten wir oft feststellen, dass es einige Elemente gibt, die nicht gerendert werden sollten. Denken Sie daran, dass alles, was in einem Textbrowser angezeigt wird, das HTML-Markup Ihrer Website widerspiegelt. In unserem Fall wurden beispielsweise Bilder ohne Alt-Text als [IMG]-Tags angezeigt. Offensichtlich können diese Tags für Menschen mit Behinderungen sehr verwirrend sein. Was ist also zu tun?

Dinge, die wir zuerst auf unserer Website überprüft haben

Nach der Beurteilung der Barrierefreiheit unserer Website stellte sich heraus, dass es einige Probleme gibt, die auf der gesamten Website auftreten und einige davon nur in bestimmten Situationen auftreten. Nachfolgend haben wir die Schritte aufgelistet, die wir unternommen haben.

Bilder Alternativtext

Dies ist wahrscheinlich das Einfachste, was man überprüfen und beheben kann. Das heißt aber nicht, dass es nicht wichtig ist. Offensichtlich können Screenreader Ihnen das Bild nicht beschreiben. Sie müssen die Beschreibung selbst eingeben. Sie sollte präzise sein, nicht zu lang (ein Satz reicht aus). Mein Rat für alle ist, immer zu versuchen, sich in eine Situation zu versetzen, in der Sie das Bild nicht sehen können und wissen möchten, was das Bild zeigt.

Denken Sie daran, dass der Alternativtext nicht wie folgt aussehen sollte: "Ein Bild von..." oder "Ein Bild zeigt....". Screenreader informieren einen Benutzer immer darüber, dass es sich bei dem Inhalt um ein Bild handelt, so dass es überflüssig wäre. Eine gute Idee wäre es, jeden Alt-Text mit einem Punkt zu beenden, damit der Textleser danach eine Pause macht und das Leseerlebnis für den Benutzer angenehmer wird.

Guter Alt-Text: <img src="dogs.png" alt="Zwei Hunde spielen zusammen im Gras.">
Schlechter Alt-Text: <img src="dogs.png" alt="Bild von Hunden">

Dekorative Elemente

Es wird empfohlen, dass Sie zu allen Bildern einen Alternativtext eingeben. Aber manchmal gibt es Ausnahmen von dieser Regel.

Nicht alle Bilder sollten für Screenreader sichtbar sein. Einige Bilder sind nur dekorativ und fügen der Website keinen Inhalt hinzu. Beispiel: Ein Firmenlogo mit dem nebenstehenden Namen dieser Firma. Wir müssen den Namen nicht wiederholen oder sagen, dass es ein Logo gibt. Stattdessen haben wir uns entschieden, diese Art von Bildern mit ::before oder ::after Pseudoelementen in CSS zu implementieren.

Dies kann folgendermaßen erfolgen:

.company-name::before {
background-image: url('path/to/icon.png');
background-size: 30px 30px;
width: 30px;
height: 30px;
content: '';
background-repeat: no-repeat;
}

Auf diese Weise wird das Firmenlogo unmittelbar vor dem Firmennamen gerendert und ist dabei weder für Screenreader noch für Textbrowser sichtbar.

Der Nachteil dieses Ansatzes ist, dass die Bildquelle zusammen mit der Bildgröße im Code angegeben werden muss. Dies ist kein großes Problem, wenn Sie wissen, dass ein bestimmtes Bild nicht bald geändert wird. Andernfalls können Sie eine andere Methode ausprobieren. Beispielsweise können Sie das Bild in der Eigenschaft background-image eines damit verbundenen Elements implementieren. Dadurch haben Sie weiterhin die Möglichkeit, das Bild außerhalb des Codes zu bearbeiten (z.B. im Adminbereich).

Formulare

Das Beste am Internet ist, dass jeder einen Beitrag leisten kann: Kommentare hinterlassen, Beiträge schreiben, Umfragen einreichen usw. Damit diese Aktionen jedoch für alle möglich sind, müssen Sie sicherstellen, dass jedem Eingabefeld eine Beschriftung zugeordnet ist. Auf diese Weise weiß der Screenreader immer, welches Eingabefeld mit einem bestimmten Label verbunden ist, und Benutzer können Eingaben vornehmen.

Auf unserer Website haben wir Folgendes getan:

<label>
Nachname
<input name="lastname" type="text" />
</label>

Sie können aber auch die Attribute 'id' und 'for' angeben:

<label for="lastname">Nachname</label>
<input id="lastname" type="text"/>

Beide Methoden sind nach den W3C-Standards korrekt. Ich bevorzuge die erste, da ich nicht daran denken muss, jedem Eingabefeld eine eindeutige ID zu geben.

Stellen Sie sicher, dass alle Formularelemente logisch angeordnet sind und Sie alle notwendigen Informationen über die erforderlichen Felder für Personen, die Screenreader verwenden, bereitstellen.

Es ist gut zu überprüfen, ob Benutzer in der Lage sind, das Formular auszufüllen sowie es zu senden und Fehler zu empfangen, wenn einige aufgetreten sind, egal ob sie eine Tastatur, einen Screenreader oder einfach nur eine Maus verwenden.

HTML-Struktur

Ein weiterer Tipp ist, dass Sie sich um die HTML-Semantik kümmern. Wir haben einige Probleme dieser Art auch auf kiwee.eu festgestellt. Erstens, die falsche Reihenfolge der Überschriften auf einigen Seiten. Dies ist wichtig, da Screenreader sie zum Navigieren auf der Website verwenden. Zweitens stützte sich das Syntax-Hervorhebungs-Plugin, das wir verwendeten, auf Tabellen für das Layout, was hinsichtlich der Barrierefreiheit furchtbar war. Wenn der Screenreader auf den mit dem alten Tool markierten Code traf, wurden zuerst alle Zeilennummern und dann alle Codezeilen von oben nach unten gelesen. Wir haben das Plugin in ein Plugin mit einem korrekten HTML-Markup geändert. Wenn Sie Codeausschnitte auf Ihrer Website veröffentlichen, verwenden Sie <code> für Inline-Code und <pre><code> für Codeblöcke.

Denken Sie daran, dass HTML-Tags immer den Inhalt wiedergeben sollten, den sie vermitteln. Einer der häufigsten Fehler ist die Implementierung von Schaltflächen als
<div>. Verwenden Sie stattdessen das dafür vorgesehene Element <button>. Nutzen Sie verschiedene HTML-Elemente wie <nav> oder <article>, um das Layout nicht nur für Screenreader, sondern auch für Suchmaschinen verständlicher zu gestalten.

Offensichtlich haben wir es nicht geschafft, alle Probleme mit der Barrierefreiheit auf unserer Website zu beheben, da es sich um ein sehr umfassendes Thema handelt und es immer Verbesserungspotenzial gibt. Nachfolgend finden Sie einige Dinge, die wir in Zukunft umsetzen wollen und die Sie sich auch ansehen können.

Design

Das Design Ihrer Website hat einen großen Einfluss auf die Barrierefreiheit. Achten Sie besonders auf Farben und Kontraste. Es gibt viele Tools, mit denen Sie dies überprüfen können:

https://color.a11y.com/ - hier können Sie den Kontrast überprüfen

https://toptal.com/­designers/colorfilter/ - hier können Sie Ihre Website aus der Sicht eines Farbenblinden betrachten.

Laut WCAG 2.0 sollte der Kontrast auf Ihrer Seite für normalen Text mindestens 4,5:1 und für großen Text 3:1 betragen. Dies hilft nicht nur Menschen, die von Farbenblindheit oder Sehschwäche betroffen sind, sondern auch allen, die Ihre Website unter unterschiedlichen Lichtverhältnissen (z. B. starkem Sonnenlicht) betrachten.

Stellen Sie sicher, dass Sie zur Bereitstellung von Informationen nicht nur Farben verwenden. Sie müssen nicht vollständig auf die Verwendung von Farben verzichten. Fügen Sie lediglich eine zusätzliche Kennzeichnung hinzu, die für farbenblinde Personen sichtbar ist (z. B. Sternchen in erforderlichen Formularfeldern anstelle von nur roter Farbe).

Bieten Sie eine Möglichkeit, sich wiederholende Elemente zu überspringen

Wenn Sie einige Zeit mit einem Screenreader im Internet verbringen, werden Sie wahrscheinlich bemerken, wie ärgerlich das sein kann. Das Lesen beginnt immer von oben nach unten. Wenn sich oben auf der Website eine Navigationsleiste befindet (was ziemlich häufig vorkommt), müssen Sie sich alle Tab-Namen immer wieder anhören. Um Benutzern, die Screenreader verwenden oder nur über die Tastatur navigieren, das Leben ein wenig zu erleichtern, können Sie die Schaltfläche "Zum Inhalt springen" implementieren. Die gängigste Methode besteht darin, die Schaltfläche beim Laden der Seite vom Bildschirm zu entfernen und sie dann in die linke obere Ecke zu verschieben, wenn der Benutzer auf den Tab klickt.

.skip {
position: absolute;
translateX: -100%;
height: 1px;
width: 1px;
text-align: left;
overflow: hidden;
}
a.skip:active,
a.skip:focus,
a.skip:hover {
left: 0;
top: 0;
width: auto;
height: auto;
overflow: visible;
}

Dadurch wird der Link vom Bildschirm entfernt, so dass er nicht sichtbar ist. Für Benutzer, die nur die Tastatur nutzen, wird der Link dank des :focus-Selektors in der oberen linken Ecke angezeigt, nachdem der erste Tabulator gedrückt wurde.

Fazit

Dank des Internets ist der Zugang zu Informationen und Wissen heute einfacher denn je. Blinde brauchen keine umständlichen Braille-Ausdrucke mehr. Menschen mit motorischen Behinderungen können Dinge von zu Hause aus kaufen. Gehörlose können Videos mit Untertiteln ansehen. Menschen, die mit vorübergehenden Bedingungen zu kämpfen haben (z. B. strahlendes Sonnenlicht, Armverletzungen), können auf das Web zugreifen. Das Einzige, was wir tun müssen, ist, einige Prinzipien der Barrierefreiheit bei der Entwicklung der Website zu berücksichtigen. Wir können das Internet wirklich zu einem viel freundlicheren Ort zu geringen Kosten machen. Barrierefreiheit im Internet: für einige unerlässlich, für alle nützlich.