4 Häufig auftretende Probleme bei der Barrierefreiheit im Web, die Sie kennen sollten

Problem des Kontrastverhältnisses

Das häufigste Problem mit der Zugänglichkeit, das ich im Laufe der Jahre gesehen habe, ist die Kontrast- und FarbzugänglichkeitsproblemEin schlechtes Kontrastverhältnis macht es schwer, den Inhalt Ihrer Seite zu erkennen, und das ist sehr schädlich für Ihre Nutzer, einschließlich derjenigen mit Sehbehinderungen.

Der Kontrast ist ein Maß für den Unterschied in der wahrgenommenen "Luminanz" oder Helligkeit zwischen zwei Farben, z. B. der Unterschied zwischen der Hintergrundfarbe und der Vordergrundfarbe Ihres Seiteninhalts. Werfen wir einen Blick auf diese Navigationsleiste.

Nehmen wir an, Ihr Kunde mag diese grünliche Farbe wirklich und findet sie toll, aber es gibt ein Problem mit dem Kontrast. Wir haben eine #FFFFFF Hintergrund mit einer #83A94C Textfarbe, was zu einem Kontrastverhältnis von 2,71:1 führt, das weit unter dem Mindestkontrast liegt. 4.5:1 benötigt. Um dieses Problem zu erkennen, haben wir mehrere Lösungen:

1. Verwenden Sie eine Online-Kontrastprüfung wie die Webaim-KontrastprüfgerätDas Programm berechnet das Kontrastverhältnis und gibt eine Pass oder Fail Note.
2. Verwenden Sie eine der vielen Browser-Erweiterungen zur Kontrastprüfung, z. B: WCAG Farbkontrast-Prüfgerät.
3. Probieren Sie die integrierte Kontrastprüfung des Browsers aus. Um ihn in Google Chrome zu verwenden, öffnen Sie die Entwicklungswerkzeuge, untersuchen Sie das betreffende Element (z. B. den Home-Link unserer Navigationsleiste), gehen Sie zur CSS-Farbeigenschaft und klicken Sie auf das Farbrechteck, um den Farbwähler zu öffnen; unten wird Ihnen ein Wert für das Kontrastverhältnis angezeigt, den Sie für weitere Details erweitern können. Der Prozess ist genau das gleiche für Firefox, nur ein kleiner Unterschied im Verhältnis wird in der unteren linken Ecke des Farbwählers angezeigt.

Weitere Informationen zum Thema Kontrast finden Sie hier Kontrast und Farbe Zugänglichkeit Artikel.

Link Text Problem

Links sind heutzutage ein wichtiger Bestandteil des Internets, daher ist es sehr wichtig, sie zugänglich zu machen. Ein Link muss einen Sinn ergeben und den Nutzer über den Kontext informieren. Ein uninformativer Link mit Text wie "Lesen Sie mehr", "Klicken Sie hier" oder "Prüfen Sie die Details" ist daher nicht sehr hilfreich, statt "Prüfen Sie die Details" für Produkt Details, z. B. die Verwendung des Produktnamens wie "The Mandalorian Helmet" ist besser und informativer. Wörter wie hier klicken oder mehr über kann weggelassen werden, da ein Link standardmäßig anklickbar ist und etwas wie "mehr über die heutigen Nachrichten" zu "heutige Nachrichten" verkürzt werden kann. Es gibt keine besondere Regel oder Begrenzung für die Länge von Links, die Der Link muss lesbar sein und lang genug, um eine gute Beschreibung ihres Zwecks zu geben.

Bilder als Links sind ein weit verbreitetes Muster, so dass hier dieselben Regeln gelten, über die wir oben gesprochen haben. Das alt-Attribut des Bildes spielt die Rolle des Linktextes und wird von Screenreadern angezeigt. Es gibt mehrere Szenarien für die Behandlung von Bildern als Links, wenn das Bild der einzige Inhalt des Links ist, muss es ein alt-Attribut haben, wenn der Link etwas Text und ein Bild enthält, können wir das alt-Attribut weglassen, hier sind einige Beispiele:

<a href="/de/notifications/">
  <img src="/img/notification.png" alt="Benachrichtigungen">
</a>

Hier finden Sie einige Links, die sich mit der Zugänglichkeit von Links befassen:Linktext und Erscheinungsbild, Funktionale Bilder.

Formulareingabe mit fehlender Beschriftung

Wir alle haben diese Formulareingaben schon einmal gesehen, ohne Beschriftung und nur mit einem Platzhalter, der den Zweck der Eingabe beschreibt. Ein erster Hinweis ist, dass wir, sobald der Benutzer alle Eingaben ausfüllt und die Platzhalter nicht mehr zu sehen sind, keinen visuellen Kontext mehr über den Zweck der Eingaben haben, aber wir wollen uns hier auf die Zugänglichkeit konzentrieren.

Assoziieren einer Etikett zu einer Eingabe hat zwei große Vorteile: Ein Bildschirmlesegerät liest die Beschriftung vor, wenn der Benutzer auf die Formulareingabe fokussiert ist, und wenn eine Beschriftung angeklickt oder berührt/getippt wird, übergibt der Browser den Fokus an die zugehörige Eingabe. Eine einfache Lösung für diese Art von Situation ist das Hinzufügen von Beschriftungen wie folgt:

    Vornamen

    
  

    Nachname

    
  

    E-Mail

    
  

    Einreichen
  

```

Das war's, alle Eingaben haben ihre zugehörigen Beschriftungen, so dass sie für jeden zugänglich sind. Wir können sogar die Platzhalter entfernen, um zu vermeiden, dass der Zweck der Eingaben dupliziert wird, aber wir alle wissen, dass reale Szenarien nicht so einfach zu handhaben sind: Sie haben gerade einen Entwurf erhalten, der diese Formulareingaben ohne Beschriftungen enthält, und der Kunde möchte diesen Teil nicht ändern. Die erste Lösung, die einem in den Sinn kommt, ist die Anwendung eines Anzeige: keine; oder Sichtbarkeit: versteckt; zu unseren Beschriftungen hinzufügen, werden sie ausgeblendet, aber sie sind immer noch da, oder? Diese Eigenschaften verbergen Elemente nicht nur auf dem Bildschirm, sondern auch für Benutzer von Bildschirmlesegeräten, so dass dies unser Problem nicht lösen wird.

Wir können die Clip-Muster um dieses Problem zu lösen. Auf diese Weise werden wir den Inhalt visuell ausblenden, aber dennoch den Inhalt für Bildschirmleser bereitstellen. Wir werden das folgende CSS erstellen nur sr-only Klasse und wenden sie auf alle unsere Etiketten an:

 .sr-only:not(:focus):not(:active) {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   height: 1px;
   overflow: versteckt;
   Position: absolut;
   Leerzeichen: nowrap;
   Breite: 1px;
 }

Dadurch werden unsere Beschriftungen ausgeblendet, für Bildschirmleser verfügbar gemacht und an unser Design angepasst. Die :not(:focus):not(:active) Pseudoklasse verhindert fokussierbare Elemente wie a, Taste, Eingabe nicht verborgen werden, wenn sie fokussiert werden.

Kein Fokus-Indikator

Vor einiger Zeit habe ich dies in meinem globalen CSS-Stylesheet getan:

* {
outline: none; /* Schrecklicher Fehler */
}

Um 2020 bemerkte ich schwarze Ränder auf Google Chrome Form Eingaben, wenn fokussiert oder auf die Schaltflächen, wenn in Tabs - das war wirklich seltsam, wie ich nicht verstehen, es zu der Zeit, nach einigen Recherchen habe ich herausgefunden, dass es wegen der Outline-CSS-Eigenschaft so Entfernen gelöst, dass "Problem" für mich.

Zu diesem Zeitpunkt hatte ich keine Ahnung, was der richtige Weg war, um es zu tun. Nachdem ich einige Nachforschungen über das Warum und Wie dieser neuen Standardeinstellung angestellt hatte, fand ich heraus, dass der Umriss ein Element-Fokus-Indikator ist und dass, wenn er entfernt wird, ein offensichtliches Fokus-Styling bereitgestellt werden muss; im Grunde wird das, was ich tat, als schlechte Praxis betrachtet. Man kann Fokusindikatoren nach eigenem Ermessen anpassen, aber sie komplett von der Website zu entfernen, ist ein großes Problem für die Barrierefreiheit. Die Anpassung eines Element-Fokus-Stylings ist zum Beispiel ziemlich einfach:

 a:focus {
   outline: 4px solid #ee7834;
   outline-offset: 4px;
 }

Zugänglichkeits-Tools

Die Überprüfung all der Themen, über die wir gesprochen haben, kann eine Menge Arbeit sein, vor allem wenn man weiß, dass es noch viel mehr über Barrierefreiheit zu berichten gibt. Um uns bei der Barrierefreiheit zu helfen, haben wir 2 großartige Browser-Erweiterungen.

WAVE-Bewertungstool ist eine Reihe von Bewertungswerkzeugen, die uns helfen, unsere Webinhalte besser zugänglich zu machen. Sie ist sowohl in Google Chrome als auch in Firefox verfügbar.

Probieren wir es auf einer kleinen Webseite aus, die eine Navigationsleiste und eine Eingabe ohne Beschriftung enthält, und sehen wir, was dabei herauskommt. Nach der Installation der Erweiterung brauchen wir nur auf das Symbol der Erweiterung zu klicken, um sie zu verwenden.

Die Registerkarte "Zusammenfassung" zeigt 1 Fehler (Formularelement mit fehlender Beschriftung), 2 Kontrastfehler und 1 Warnung (fehlende Überschriftenstruktur), wie Sie sehen können, ist das Ergebnis sehr klar und detailliert. Auf der Registerkarte Details wird eine Liste aller Fehler, Warnungen und Merkmale angezeigt. Wir können auch direkt auf der Seite interagieren, indem wir auf die roten Rechtecke klicken, um die Fehlerbeschreibung und den Fehlertyp zu überprüfen.

Axt DevTools ist ein leistungsstarkes und präzises Toolkit für die Barrierefreiheit. Es ist sowohl in Google Chrome als auch in Firefox verfügbar. Nach der Installation der Erweiterung müssen wir die Browser-Entwicklungstools öffnen und auf die Registerkarte axe DevTools gehen und auf Alle meine Seiten scannen klicken.

Wie Sie sehen können, hat Axe DevTools die gleichen Probleme mit dem WAVE Evaluation Tool gemeldet, nämlich Kontrastprobleme, Formularelemente, denen eine Beschriftung fehlt, und fehlende Überschriftenelemente, und hat uns sogar einige Best Practices an die Hand gegeben.

Eine weitere Möglichkeit, die Zugänglichkeit zu testen, ist die Verwendung eines Bildschirmlesegeräts und das Testen Ihrer Website mit diesem Gerät; es gibt viele Bildschirmlesegeräte, um nur einige zu nennen:

• NVDA
• VoiceOver ist auf macOs-Geräten verfügbar.
• Orca ist ein freier und quelloffener Bildschirmleser für Linux.

Zusammenfassung

In diesem Artikel haben wir einige häufige Probleme mit der Barrierefreiheit im Web, Möglichkeiten zu deren Lösung und einige großartige Tools zum Testen der Barrierefreiheit im Web kennengelernt. Es gibt noch viel mehr über Barrierefreiheit für Elemente wie Dialoge, Akkordeons und Karussells zu berichten, aber wie Sie in diesem Artikel gesehen haben, gibt es reichlich Dokumentation und Tools, die Ihnen beim Umgang mit Barrierefreiheit helfen.

Einige wichtige Punkte sind zu beachten:

• Prüfen Sie immer das Kontrastverhältnis.
• Bieten Sie immer informative Inhalte für Links.
• Einem Formularelement muss ein Label zugeordnet sein.
• Es muss eine eindeutige Schwerpunktbildung erfolgen.