7 häufige Fehler bei der Barrierefreiheit (und wie man sie vermeidet)

Wahrscheinlich haben Sie schon einmal von digitaler Barrierefreiheit gehört und wissen, dass es wichtig ist, Ihr Online-Produkt für Menschen mit Behinderungen zu optimieren. Es ist verständlich, wenn Sie sich mit all den Informationen und Aufgaben, die Sie zur Verbesserung Ihres Produkts erledigen sollten, überfordert fühlen. Vielleicht sind Sie zu dem Schluss gekommen, dass es so kompliziert ist, dass Sie einen Experten mit der Arbeit beauftragen müssen. Dabei ist es Ihnen wichtig! Sie wissen nur nicht, wie Sie anfangen sollen.

Keine Sorge, die Behebung oder Vermeidung dieser Probleme ist oft gar nicht so zeitaufwändig! Das heißt, wenn Sie wissen, wo Sie suchen und was Sie stattdessen tun müssen. In den Jahren, in denen ich als Webentwickler und Front-End-Software-Ingenieur gearbeitet habe, bin ich auf viele Probleme mit der Barrierefreiheit gestoßen. Oft laufen sie auf die gleichen Punkte hinaus. In den meisten Fällen nimmt ein auf Barrierefreiheit ausgerichteter Ansatz nicht viel Zeit in Anspruch. Es ist nicht schwieriger oder teurer. Es geht darum, die tägliche Arbeit mit einer anderen Denkweise zu erledigen, die die Zugänglichkeit enorm verbessert.

Aber nun zum eigentlichen Thema: Ich möchte Ihnen erklären, was die häufigsten Probleme mit der Barrierefreiheit sind und, was noch wichtiger ist, wie Sie sie vermeiden können.

Fehler 1: Schlechtes semantisches Markup

Die Vermeidung von Zugänglichkeitsproblemen erfordert keine zusätzliche Arbeit. Es erfordert einfach eine andere Arbeit

Einer der am häufigsten begangenen Fehler mit bedauerlicherweise schwerwiegenden Folgen ist eine schlechte semantische Auszeichnung. Wenn Sie sich ein wenig mit HTML auskennen, wissen Sie vielleicht, dass eine Seite aus Elementen besteht, die durch HTML-Tags definiert sind, zum Beispiel <h1> und <p>. Die meisten Elemente sind semantisch, d.h. sie beschreiben ihre Bedeutung eindeutig in einer für Menschen und Maschinen lesbaren Weise.

Wenn Sie sich den Quelltext einer beliebigen Webseite ansehen, werden Sie auch eine Menge <div> und <span> Elemente feststellen; dies sind die nicht-semantischen Elemente. Bei diesen Elementen handelt es sich um allgemeine Container, die keine Bedeutung für ihren Inhalt haben.

Bildschirmlesegeräte stützen sich stark auf semantisches HTML. Sie bilden einen Zugänglichkeitsbaum auf der Grundlage der Semantik der Seite. Ein Benutzer mit einem Bildschirmlesegerät kann mit Hilfe von Abkürzungen von Element zu Element springen. Er erfährt, welche Schaltflächen es gibt, welche Überschriften, wo sich die Navigation befindet, wie die Informationen auf der Seite mit anderen Elementen auf der Seite in Beziehung stehen und so weiter.

Übermäßige Verwendung nicht-semantischer Elemente

Wenn Sie <div> und <span> Elemente an der Stelle verwenden, an der eigentlich ein semantisches Element hätte stehen sollen, gehen wichtige Informationen sofort verloren. Nutzer, die eine Sehbehinderung haben, können die Struktur der Website nicht anhand dessen erkennen, was sie sehen. Sie können die Schaltflächen oder das Navigationsmenü nicht sehen. Die Webseite wird zu einem großen Haufen unstrukturierter Inhalte. Noch schlimmer ist, dass interaktive Elemente - wie z. B. Schaltflächen - oft völlig unbrauchbar werden. Beim Surfen im Web stoße ich oft auf <span>-Elemente, die von JavaScript gesteuert werden und als Schaltfläche gestaltet sind. Das JavaScript ist so geschrieben, dass es durch einen Mausklick aktiviert wird. Das funktioniert gut für alle, die eine Maus benutzen können, aber es kann nicht mit der Tastatur gesteuert werden, und für Screenreader ist es oft unmöglich, es überhaupt zu finden.

Tipp: semantisches HTML verwenden

Wenn es wie eine Schaltfläche aussieht und sich wie eine Schaltfläche verhält, sollte es eine Schaltfläche sein

Mein Tipp zur Vermeidung dieses unerwünschten Verhaltens ist wahrscheinlich keine Überraschung: Verwenden Sie so oft wie möglich geeignete semantische HTML-Elemente. Die einzigen Fälle, in denen Sie <div> und <span> Elemente verwenden sollten, sind, wenn kein anderes Element zur Verfügung steht, um eine Bedeutung zu vermitteln. In der Regel handelt es sich dabei um rein dekorative Zwecke.

Durch die Verwendung semantischer Elemente wird die Zugänglichkeit Ihrer Webseite exponentiell erhöht. Das liegt daran, dass diese Elemente Informationen für den Browser darüber enthalten, wie sie verwendet werden sollten. Außerdem spart man als Entwickler oder Ingenieur sogar Zeit. Sie müssen nicht darüber nachdenken, wie Sie zum Beispiel das Verhalten einer Schaltfläche nachahmen, da diese bereits von Haus aus so funktioniert.

Verwendung der falschen semantischen Elemente

Ein weiterer häufiger Fehler in dieser Kategorie ist die Auswahl des falschen semantischen Elements. Dies ist oft das Ergebnis der Auswahl eines Elements aufgrund seines Aussehens und nicht aufgrund seines Verhaltens oder seines Zwecks. Vielleicht haben Sie eine native Schaltfläche nicht verwendet, weil Sie dachten, sie sähe hässlich aus. Oder vielleicht haben Sie ein paar Überschriftenebenen übersprungen und eine <h4> anstelle einer <h2> gewählt, weil es Ihnen gefiel, dass sie eine kleinere Schriftgröße hatte. Das ist der falsche Weg; für diesen Zweck gibt es CSS.

Tipp: Wählen Sie ein Element nach seiner Bedeutung

Verwenden Sie HTML-Elemente, um Ihren Inhalt auf der Grundlage der Bedeutung der einzelnen Elemente zu strukturieren, nicht auf der Grundlage ihres Aussehens. Wenden Sie dann mit CSS Stile nach Ihrem Geschmack an.

Tipp: Automatisierte Tools verwenden

Eine gute Möglichkeit, Ihnen bei der Semantik zu helfen, ist die Verwendung eines HTML validator tool. Einige Tools wie axe Tools berücksichtigen dies bei automatischen Zugänglichkeitstests. Denken Sie daran, dass automatisierte Tools nicht alles testen können und oft falsch positive und negative Ergebnisse liefern. Aber sie können helfen, Fehler, die Sie vielleicht übersehen haben, schnell zu erkennen. Am besten ist es, automatisierte und manuelle Tests für die Barrierefreiheit zu kombinieren.

Fehler 2: Unzureichend strukturierte Formularbeschriftungen

Wenn es wie eine Schaltfläche aussieht und sich wie eine Schaltfläche verhält, sollte es eine Schaltfläche sein.

Dieser Fehler hat auch viel mit semantischem HTML zu tun. Täuschen Sie sich nicht: Die Gestaltung und Implementierung eines benutzbaren, zugänglichen und gut aussehenden Formulars ist eine ziemliche Herausforderung!

Das Anmeldeformular von Easy LMS. Die Beschriftungen werden nach oben verschoben, wenn Sie ein Formularfeld ausfüllen, damit sie sichtbar bleiben.

Eingabe und Etikett sind nicht verknüpft

Jedes Formular hat ein Eingabefeld und eine Beschriftung, die dieses Eingabefeld beschreibt. Ich habe zum Beispiel drei Eingabefelder: "Name", "E-Mail Adresse" und "Firma". Ich könnte die Namen oberhalb der Eingabefelder als reinen Text einfügen (z. B. innerhalb eines <span>-Elements ?). Leider wird ein Screenreader-Nutzer drei leere Texteingaben vorfinden, ohne einen Hinweis darauf, was er ausfüllen soll.

Tipp: Paarung von Etikett und Eingabe

Die Verwendung semantischer HTML-Elemente für die Beschriftungen ist bereits sehr hilfreich, aber wenn Sie Ihren Nutzern wirklich helfen wollen, sollten Sie auch Pair your label and input verwenden. Jetzt weiß der Browser, dass die beiden zusammengehören. Bei Easy LMS würden wir sagen: Gewinn!

Verwendung von Platzhalterattributen als Beschriftungen

Ein weiteres No-Go für die Barrierefreiheit ist das Weglassen von Beschriftungen und stattdessen die Verwendung von Platzhalterattributen für die Eingaben. Dies ist aus mehreren Gründen eine schlechte Praxis. Erstens ist sie für viele unterstützende Technologien nicht verfügbar. Zweitens verschwinden die Beschriftungen, sobald ein Benutzer die Eingabe eingibt (oder das Formular automatisch ausfüllt). Auf diese Weise ist es schwierig, das Formular auf Fehler zu überprüfen. Und schließlich ist ein Platzhalter als zusätzlicher Hinweis gedacht - nicht als Beschriftung.

Tipp: Ersetzen Sie ein Etikett nicht durch einen Platzhalter

Lassen Sie niemals Beschriftungen in einem Formular weg. Wenn Sie müssen, verwenden Sie Platzhalter nur, um (sehenden) Benutzern in Formularen zusätzliche Hinweise zu geben. Noch besser: Verwenden Sie überhaupt keine Platzhalterattribute und stellen Sie sicher, dass die wichtigen Informationen über das Formular für alle verfügbar sind.

Fehler 3: Nicht beschreibende Links verwenden

Wie oft sind Sie schon über Links gestolpert, auf denen stand: "Klicken Sie hier", "Lesen Sie mehr" oder "Gehen Sie zu dieser Seite"? Meine Vermutung: mehr als Sie zählen können! Ein Grund dafür, dass dies eine schlechte Praxis ist, besteht darin, dass man den Zweck des Links nicht aus dem Kontext heraus verstehen kann. Mit Hilfe von Hilfstechnologien können die Benutzer schnell durch die Links auf einer Seite navigieren. Stellen Sie sich ein Bildschirmlesegerät vor, das Ihnen Folgendes mitteilt: "Hier, Link. Mehr lesen, Link. Diese Seite, Link". Das sagt Ihnen nicht wirklich etwas, oder?

Tipp: Fügen Sie den Betreff der Seite in den Link ein

Wie lässt sich dies also vermeiden? In den meisten Fällen lässt sich das Problem leicht lösen, indem man den Betreff oder Titel der Seite, auf die man sich bezieht, in den Link einfügt. Ich gebe Ihnen ein Beispiel: Sie können mehr über verschiedene Arten von Behinderungen in diesem Artikel des W3C erfahren. Nun wird der Screenreader kommunizieren: "Verschiedene Arten von Behinderungen, Link". Gewinn!

Tipp: Wiederholte Links optimieren

Ich kann mir vorstellen, dass Sie den Titel nicht in jeden "Weiterlesen"-Link unter einer Liste von Artikeln aufnehmen möchten. Das würde die Seite sehr unübersichtlich machen. Es gibt eine Reihe von verschiedenen Ansätzen, um "Weiterlesen"-Links zugänglich zu machen, und es ist von Anwendungsfall zu Anwendungsfall unterschiedlich, welcher am besten geeignet wäre. Bei der Überblick über diesen Blog haben wir uns dafür entschieden, die Links für Bildschirmleser zu optimieren, indem wir ein Aria-Label mit dem Titel des Artikels hinzugefügt haben.

Fehler 4: Bilder sind die einzige Möglichkeit, Informationen zu vermitteln

Da ich ein visueller Denker bin, weiß ich, wie viel einfacher es sein kann, etwas anhand eines Bildes zu verstehen, als einen Text zu lesen. Ich behaupte nicht, dass es schlecht ist, Bilder zu verwenden, um etwas zu erklären oder in einer Erklärung darauf zu verweisen. Ich würde sogar jeden dazu ermutigen, Bilder auf diese Weise zu verwenden, da dies bei einigen Beeinträchtigungen (wie z. B. Legasthenie) die Zugänglichkeit tatsächlich verbessert. Die Verwendung von Bildern als einzige Möglichkeit, Informationen zu vermitteln, ist jedoch eine schlechte Praxis.

Weltweit sind etwa 43 Millionen Menschen blind und etwa 295 Millionen Menschen haben eine mittlere bis schwere Sehbehinderung. Diese Zahl umfasst nicht nur die völlige Erblindung, sondern zum Beispiel auch den Verlust des zentralen oder peripheren Sehens und verschwommenes Sehen. Wenn Sie sich auf Bilder verlassen, um Ihren Standpunkt zu erläutern, riskieren Sie, dass ein Teil Ihres Publikums einen großen Teil der Informationen verpasst.

Screenshots

Ein praktisches Beispiel für dieses Problem ist die Erläuterung der Verwendung einer Schnittstelle anhand von Bildschirmfotos. Der Text lautet einfach: "Klicken Sie auf die im Screenshot markierte Schaltfläche" oder "Richten Sie Ihre Konfiguration wie auf dem folgenden Screenshot ein". Ohne diese Bilder ist es unmöglich zu wissen, was mit diesen Anweisungen zu tun ist. Wenn man bedenkt, dass diese Art von Artikeln oft in Wissensdatenbanken, Dokumentationen oder Tutorials zu finden sind, wird es noch problematischer.

Ein Beispiel für einen Screenshot aus unserem Help Center. Im Begleittext des Hilfeartikels heißt es: "Sie können die Einstellungen für Ihre Passkategorie anpassen, indem Sie auf Bearbeiten klicken".

Tipp: Ihr Text sollte auch ohne Bilder verständlich sein.

Ihr Publikum sollte in der Lage sein, die Informationen auch ohne Bilder zu verstehen. Wenn Sie Anweisungen sowohl in Text als auch in Bildern geben, kann Ihr Leser seine bevorzugte Art der Informationsaufnahme wählen oder hat eine Ausweichmöglichkeit für den Fall einer Beeinträchtigung. Ein Trick, den ich persönlich anwende, ist, den Text als Ganzes zu schreiben und die Bilder erst danach hinzuzufügen, wie ich es bei diesem Blogartikel getan habe. Auf diese Weise laufe ich nicht in die Falle, Informationen wegzulassen, weil sie in einem Bild zu sehen waren, während ich schrieb.

Fehlen von Alternativtext

Oft sind informative Bilder auf Websites entweder mit schlechtem oder gar keinem Alternativtext versehen. Das Ziel von Alt-Texten ist es, das Bild für Screenreader-Nutzer zu beschreiben. Bleibt er leer, wissen Screenreader-Nutzer nicht, was auf dem Bild zu sehen ist oder ob sie eine wichtige Information verpasst haben.

Tipp: Fügen Sie alternative Texte zu funktionalen und informativen Bildern hinzu

Der alternative Text wird einem Nutzer mitgeteilt, der das Bild nicht (richtig) sehen kann. Ich möchte jeden ermutigen, diese nicht zu ignorieren, sondern einen clear descriptive alternative text für das Bild hinzuzufügen. Dies kann im Quellcode erfolgen. In einem CMS gibt es dafür oft ein eigenes Eingabefeld.

Tipp: Dekorative Bilder für Bildschirmleser anders behandeln

Manchmal werden Bilder nur als Dekoration hinzugefügt, um eine Seite optisch attraktiver zu machen. Manchmal ist es am besten, wenn Bilder von einem Bildschirmlesegerät ganz übersprungen werden. Es gibt verschiedene Ansätze für den Umgang mit alternativen Texten, je nach Ziel des Bildes.

Text in Bildern

Text in Bildern ist auch für Menschen mit Sehbehinderungen unverständlich. Sie werden überrascht sein, wie viel Text in Bildern enthalten ist (schauen Sie sich nur eine beliebige Social-Media-Plattform an). Auch das ist an sich nicht schlecht, aber stellen Sie sicher, dass Sie den Text auch in einer Beschreibung oder als Alternativtext hinzufügen.

Fehler 5: Schlechter Farbkontrast

Wählen Sie ein HTML-Element nach seiner Bedeutung, nicht nach seinem Aussehen

Bei den automatisierten Tests von WebAIM wurde als häufigstes Problem der Zugänglichkeit kontrastarmer Text festgestellt. Dies ist nicht nur für Menschen mit Sehschwäche problematisch, sondern betrifft auch Menschen mit Farbsehschwäche (verschiedene Arten von Farbenblindheit). Etwa 1 von 12 Männern und 1 von 200 Frauen haben einen gewissen Grad an Farbfehlsichtigkeit. Manche Menschen wissen nicht einmal, dass sie darunter leiden. Wenn Sie sich das Bild unten ansehen, welche Zahl sehen Sie?

Which number do you see? Image source

Wenn Sie 74 sehen, haben Sie möglicherweise ein normales Farbsehvermögen. Wenn Sie 21 oder gar keine Zahl sehen, haben Sie möglicherweise eine Rot-Grün-Farbsehschwäche. In diesem Fall sind Sie vielleicht auf Websites gestoßen, deren Teile schwer zu lesen waren.

In den WCAG ist ein Erfolgskriterium dafür definiert, wann der Kontrast zwischen Text und Hintergrund hoch genug ist, damit Menschen mit mäßiger Sehkraft ihn lesen können. Die Richtlinien der WCAG sind in drei Konformitätsstufen eingeteilt. Bei Easy LMS streben wir die Stufe AA an. Dieses Kontrastverhältnis beträgt 4,5:1 für kleinen Text und 3:1 für großen Text.

Tipp: Verwenden Sie ein Werkzeug zur Überprüfung des Farbkontrasts

Wie können Sie also herausfinden, ob der Kontrast des Textes hoch genug ist? Es gibt viele Farbkontrast-Tools, mit denen Sie Ihre Webseite testen können. Sie können den Farbkontrast auch manuell testen, indem Sie die Farbcodes der Vorder- und Hintergrundfarbe in einen online contrast checker eingeben.

Tipp: dunklere oder hellere Schattierungen einer Farbe verwenden

Eine Herausforderung, die sich bei diesem Thema oft stellt, ist, dass die Farben der Benutzeroberfläche mit den Farben des Markenlogos übereinstimmen. Dies kann zu Schwierigkeiten führen, da die Farben sich wie ein Teil der Markenidentität anfühlen. Eine gute Praxis ist es, einen dunkleren oder helleren Farbton der gewünschten Farbe zu verwenden, um den Kontrast zu verbessern. Wir haben die Farben von Easy LMS aus diesem Grund vor ein paar Jahren angepasst!

Verwendung von Farbe als einziges Mittel zur Vermittlung von Informationen

Ich habe bereits auf die Probleme hingewiesen, die sich aus der Verwendung von Bildern als einzigem Mittel zur Informationsvermittlung ergeben. Das Gleiche gilt für Farben. Die Farben Rot und Grün werden oft als einzige Möglichkeit verwendet, um über Erfolgs- und Fehlerzustände zu informieren. Leider ist die Rot-Grün-Farbenblindheit die häufigste Form der Farbenblindheit. Für die betroffenen Benutzer sehen Rot und Grün gleich aus.

Tipp: Bieten Sie mehrere Möglichkeiten, Zustände zu kommunizieren

Es ist in Ordnung, Rot und Grün für diese Zwecke zu verwenden, aber stellen Sie sicher, dass Sie immer eine andere Möglichkeit zur Verfügung stellen, um Zustände zu kommunizieren, wie zum Beispiel Text, verschiedene Formen oder (beschriftete) Symbole.

Fehler 6: Kein visueller Hinweis auf den aktuellen Fokus

Die meisten Benutzer navigieren auf ihren Computern mit einem Zeigegerät, z. B. einer Maus oder einem Trackpad auf einem Laptop. Bei mobilen Geräten verwenden wir unsere Finger auf einem Touchscreen. Für einige Benutzer ist dies aufgrund ihrer Behinderung schwierig oder unmöglich. Beispiele dafür sind Lähmungen, ein fehlendes Körperteil, Arthritis oder eine Verletzung durch wiederholte Belastung (Repetitive Stress Injury). In diesen Fällen wechseln die Benutzer oft zu einer Tastatur oder einem alternativen Eingabegerät, das das Verhalten der Tastatur imitieren kann. Nutzer mit Sehbehinderung verwenden meist eine Tastatur zusammen mit ihrem Bildschirmlesegerät oder Gesten auf ihren mobilen Geräten.

Wenn Sie die Tabulatortaste auf Ihrer Tastatur drücken, können Sie zwischen interaktiven Elementen auf einer Webseite, wie Schaltflächen und Links, springen. Probieren Sie es auf dieser Seite aus: Nach jedem Tabulator sehen Sie eine visuelle Anzeige Ihrer Position auf dem Bildschirm.

CSS-Fokus-Stile

In CSS können Sie das Styling für mehrere verschiedene Zustände von Schaltflächen hinzufügen, z. B. Hover, Fokus und Aktiv. Oft werden einige oder alle dieser Zustände ausgelassen, und die Schaltfläche ändert ihr Aussehen bei Interaktion nicht. Ein Tastaturbenutzer befindet sich in diesem Fall im Blindflug.

Tipp: Fokussierungsstile zusammen mit den Hover-Stilen anwenden

Während Sie Stile für den Schwebezustand der Schaltflächen hinzufügen, ist es sinnvoll, sie auch für den Fokuszustand hinzuzufügen. Idealerweise sollte der Fokus-Stil deutlicher sichtbar sein als der Hover-Stil, daher können Sie sie auch separat in einem anderen Farbton hinzufügen.

Umriss des Browser-Fokus

Ein einfacher Fokusindikator wird automatisch vom Webbrowser bereitgestellt und wird normalerweise als Rahmen angezeigt. Wenn Sie gerade durch diese Seite geblättert haben, haben Sie ihn vielleicht gesehen. Leider wird diese Umrandung aus ästhetischen Gründen oft mit CSS deaktiviert. Aber wenn der Umriss deaktiviert ist und keine Fokus-Stile vorhanden sind, ist es unmöglich, eine Webseite nur mit der Tastatur zu navigieren.

Tipp: Deaktivieren Sie den Umriss nicht

Mausbenutzer sehen den Umriss des Browsers nicht, den Sie sehen, wenn Sie mit einer Tastatur durch eine Webseite navigieren. Deaktivieren Sie diesen Umriss nicht mit CSS, denn er ist ein wichtiges Hilfsmittel für Benutzer mit einer Behinderung. Er eignet sich auch gut als Backup, falls Ihre Fokus-Stile zu unklar sind oder versehentlich fehlen.

Denken Sie daran, dass die Tastaturfokusindikatoren von Browsern variieren und unterschiedliche Formen annehmen können. Aus diesem Grund können Sie sich nicht vollständig auf sie verlassen. Andererseits würde es viele Tests erfordern, um mit Sicherheit zu wissen, ob Ihre Fokus-Stile für Benutzer mit einer Behinderung klar genug sind. Deshalb würde ich dazu raten, immer beides zu haben.

Fehler 7: Verwendung von nicht beschrifteten Symbolen in Schaltflächen und Links

Die in der Software verwendeten Symbole werden bei wiederholter Verwendung wiedererkannt.

Icons sind eine gute Möglichkeit, Unordnung in Ihrem Online-Produkt zu vermeiden. Sie können auch die Zugänglichkeit für verschiedene Behinderungen verbessern, wenn sie eindeutig sind. Die meisten von uns wissen, dass ein Bleistiftsymbol für "Bearbeiten" und ein Mülleimer für "Löschen" steht. Bei der Verwendung von Symbolen in einer Benutzeroberfläche ist es am besten, wenn wir uns an die Symbole halten, die wir kennen, damit wir nicht raten müssen. Aber selbst dann kann im Hinblick auf die Zugänglichkeit eine Menge schief gehen.

Symbole können neben der entsprechenden Textbeschriftung oder allein verwendet werden. In den meisten Fällen gibt es keine Beschriftung, wenn sie allein verwendet werden. Ich füge z. B. eine Symbolschaltfläche für eine Bearbeitungsaktion hinzu, die nur ein Bleistiftsymbol enthält. Wenn ich diesem Symbol keine Textbeschriftung hinzufüge, wird die Schaltfläche zu einer leeren Schaltfläche. Das ist richtig: ein Bildschirmlesegerät wird mir mitteilen: "Schaltfläche". Das ist nicht sehr nützlich.
Es kommt noch schlimmer: Ich gehe davon aus, dass der Benutzer weiß, dass ein Stiftsymbol "Bearbeiten" bedeutet. Aber das weiß ich nicht mit Sicherheit.

Tipp: Beschriftung für Icons hinzufügen

Wenn das Symbol ein wichtiger Teil Ihrer Benutzeroberfläche ist, ist es am besten, ein Etikett hinzuzufügen. Sie können dies tun, indem Sie ein aria-label auf dem Symbol hinzufügen. Eine zweite Möglichkeit ist das Hinzufügen von Text, den Sie für Bildschirme ausblenden, der aber für Benutzer von Bildschirmlesegeräten sichtbar ist. Am besten fügen Sie auch ein Titelattribut hinzu. Wenn ein Mausbenutzer mit der Maus darüberfährt, wird die Bezeichnung angezeigt.

Icon-Schaltflächen im Easy LMS-Dashboard, die einen Titel anzeigen, wenn Sie den Mauszeiger darüber bewegen

Tipp: Deko-Symbole ausblenden

Wenn Sie eine Ikone nur als Zuckerl oben drauf gesetzt haben und die Informationen auch ohne sie verständlich sind, dann ist es am besten, das Element für Screenreader-Nutzer auszublenden.

Fazit: nicht härter arbeiten, sondern intelligenter arbeiten

Der Gedanke, dass Sie diese Dinge ändern müssen, ist vielleicht immer noch ein wenig überwältigend. Als ich zum ersten Mal von der Barrierefreiheit erfuhr, hatte ich die gleiche Reaktion. Es gibt so viel zu lernen und so viele verschiedene Arten von Behinderungen. Es ist schwer, eine Benutzeroberfläche perfekt für alle zu machen.

Aber ich möchte Ihnen sagen: Es geht nicht darum, Ihr Produkt oder Ihre Website zu überarbeiten. Ich habe festgestellt, dass dies am besten funktioniert, wenn man es in seinen Arbeitsablauf integriert. Wenn ich das nächste Mal einen Teil des Produkts erstelle oder überarbeite, wende ich das, was ich über Barrierefreiheit gelernt habe, sofort an. Auf diese Weise können wir die Zugänglichkeit Schritt für Schritt verbessern. Wie einer meiner Helden der Barrierefreiheit Léonie Watson rät: "Es muss nicht perfekt sein; es muss nur ein bisschen besser sein als gestern." Predigt!