Probleme bei der Barrierefreiheit erkennen
Der einfachste Weg herauszufinden, ob ein Teil der Seite genug Kontrast hat, ist es, das Inspect-Tool zu verwenden und mit der Maus über das Element zu fahren. In einem kleinen Informationsfenster werden dann die Daten des Elements angezeigt, darunter auch Informationen zur Barrierefreiheit (Accessibility).
Im Bereich Contrast zeigen Elemente mit ausreichendem Kontrast einen grünen Haken:
Problematische Seitenelemente dagegen zeigen ein Ausrufezeichen an:
Wenn man nun auf das Seitenelement klickt, öffnet dies das Elemente-Werkzeug und in den Formatvorlagen kann man sehen, welche Farben eingesetzt wurden.
Das Anklicken des farbigen Quadrats öffnet einen Farbpicker, in dem das Kontrastverhältnis dargestellt wird. Bei nicht ausreichendem Kontrast zeigt der Picker einen durchgestrichenen Kreis an.
Wenn man den Knopf mit dem Pfeil nach unten anklickt, zeigt der Farbpicker verschiedene Möglichkeiten an, eine Farbe zu wählen, die genug Kontrast zur Hintergrundfarbe hat.
Man kann entweder die zwei vorgeschlagenen Farben auswählen (AA und AAA sind dabei die WCAG-Standards für Barrierefreiheit), mit der Pipette eine Farbe in der Seite aufnehmen oder eine Farbe im Farbmenü oben entlang der weißen Linien auswählen.
Hat man eine Farbe gewählt, zeigt der Farbpicker auch deren Kontrast an. Bei Farben mit genug Kontrast signalisieren Haken, dass sie den AA- und AAA- Qualitätsansprüchen genügen.
Bei der Wahl von Farben im Netz gibt es noch mehr zu beachten, zum Beispiel, dass die genutzten Farben auch für Menschen mit Farbenblindheit verständlich sind, oder auch wie Nutzer der hohen Kontrasteinstellung von Betriebssystemen die Seite erleben. Auch dafür gibt es Simulationen in den Browser-Entwicklerwerkzeugen.
Alternativtext und fehlende Beschreibungen
Das Inspect-Tool hilft auch bei dem Problem fehlender Alternativtexte für Bilder und leerer Verknüpfungen und Knöpfe. Alternativtexte dienen dazu, etwa Menschen mit Sehbehinderungen oder kognitiven Einschränkungen beim Verständnis von Bildern zu unterstützen. Wieder ist hier der Abschnitt der Barrierefreiheit des Tools hilfreich. Diesmal geht es aber um die Rolle und den Namen des Elements. Das folgende Bild zum Beispiel hat zwar die Rolle eines Bildes, aber keinen Alternativtext, daher ist der Name leer.
Das Bild mit einem Alternativtext hat einen Namen und ist somit auch barrierefrei.
Alternativtexte sollten immer erklären, warum das Bild da ist und was es darstellt. Nicht nur, dass es ein Bild ist. Wenn Bilder allein zur Zierde da sind, ist es sinnvoller, sie als Hintergründe einzubinden.
Das Problem mit Verknüpfungen und Knöpfen, die leer sind, entsteht oft, wenn man ein Bild in einem Anker-Element oder Knopf einfügt, das keinen Alternativtext hat. Damit ist dann der Name des Elements wieder leer. Im folgenden Fall hat der Anker den Text "More" und den Pfeil als SVG-Element - und damit einen Namen.
Wenn der Text nicht vorhanden ist und das SVG-Bild keinen Titel hat, ist die Verknüpfung namenlos und damit nicht barrierefrei.
Formularfelder ohne Beschreibungen
Auch bei Formularfeldern ist es wichtig, ihnen mittels eines Label-Elements einen Namen zu geben. Das folgende Eingabefeld hat ein Label und ist damit barrierefrei.
Dieses hat keins, daher zeigt das Inspect-Tool an, dass der Name fehlt.
Ein einfacher Test, um herauszufinden, ob ein Formularfeld mit einem Label verbunden ist, besteht darin, auf den Text zu klicken. Wenn das Label passend mit dem Feld verbunden ist, wird dadurch das Eingabefeld fokussiert. Das ist gerade bei kleinen Formularelementen sehr praktisch.
Automatische Problemerkennung mit dem Probleme-Werkzeug
Das Inspect-Tool ist ein praktisches Werkzeug, um eine Seite testen. Allerdings kann kann das ziemlich lange dauern. Viele Probleme kann der Browser auch automatisch erkennen und als Abarbeitungsliste anbieten. Dafür gibt es das Probleme-Werkzeug, das auflistet, was mit dem offenen Webprodukt falsch läuft. Das Probleme-Werkzeug erklärt vieles, aber in diesem Fall hier interessiert uns nur die Barrierefreiheit.
Leider werden die Probleme derzeit nur auf Englisch erklärt, aber es wird daran gearbeitet, diese auch auf Deutsch zur Verfügung zu stellen.
Wenn man die Knöpfe mit den Pfeilen im Bereich Barrierefreiheit anklickt, bekommt man Erklärungen, warum etwas ein Problem und welches Element betroffen ist sowie Verknüpfungen zu noch detaillierteren Informationen.
Es gibt auch eine Möglichkeit, Kontrastprobleme in dem Werkzeug anzuzeigen. Da sich das allerdings negativ auf die Leistung der Entwicklerwerkzeuge auswirken kann, ist diese Option derzeit noch ein Experiment. Wenn man das Zahnrad anklickt, kann man das Experiment anschalten. Der Name ist Enable automatic contrast issue reporting via the Issues panel.
Nach dem Einschalten und einem Neustart der Entwicklerwerkzeuge wird nun auch eine Liste der Elemente angezeigt, die nicht genug Kontrast haben.
Wenn man auf die Elementverlinkungen klickt, kommt man automatisch zu dem Element.
Im Elemente-Werkzeug werden problematische Elemente ebenfalls herausgehoben. Ähnlich wie bei Word oder anderen Textverarbeitungsprogrammen sind diese unterringelt, und wenn man mit der Maus darüber fährt, bekommt man genauere Informationen, was das Problem ist.
Damit wäre dann auch das letzte Problem aus dem Webaim-Report gelöst.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
- ohne Werbung
- mit ausgeschaltetem Javascript
- mit RSS-Volltext-Feed
| Barrierefreiheit: Eine Million kaputte Webseiten - und wie man sie repariert | Fehlerbehebung während der Entwicklung |
Gendern Mode? Ich hätte gern mein Frollein zurück. Barrierefreiheit ist offensichtlich...
auch bei Sonnenschein auf dem Handy die Webseite konsumieren zu können. (denkt mal drüber...
Natürlich habe ich einen Adblocker, weil Werbung ist aggressiv, gefährlich und zerstört...
Weil alles, was nicht den Werten der neuen, lauten Minderheit entspricht, automatisch...