Digitale Zugänglichkeit bezieht sich auf Verfahren zum Erstellen digitaler Inhalte und Anwendungen, die für eine breite Palette von Personen geeignet sind, einschließlich derer, die an Seh-, Motor-, Hör-, Sprach- oder kognitiven Beeinträchtigungen leiden.
Es besteht die falsche Überzeugung, dass Sie eine Website nur zugänglich machen können, indem Sie viel Aufwand und Geld investieren. Dies ist jedoch nicht erforderlich. Wenn Sie ein Projekt von Anfang an unter Berücksichtigung der relevanten Anforderungen entwerfen, müssen Sie keine speziellen Funktionen und Inhalte hinzufügen, sodass keine zusätzlichen Kosten entstehen.
Wenn es darum geht, Fehler auf einer vorhandenen Site zu korrigieren, müssen hier einige Anstrengungen unternommen werden. Als ich bei Carbon Health gearbeitet habe, haben wir die Website einmal mit einer
speziellen Erweiterung in Chrome auf Barrierefreiheit getestet. Bereits auf der Hauptseite wurden 28 Verstöße festgestellt, die beseitigt werden mussten. Auf den ersten Blick schien es ein sehr mühsamer Prozess zu sein, aber es wurde schnell klar, dass Änderungen nicht so schwierig sein würden - Sie müssen nur Zeit investieren und die Grundlagen verstehen. Wir haben es geschafft, die Anzahl der Verstöße in nur wenigen Tagen auf Null zu reduzieren.
Ich möchte einige einfache Schritte mitteilen, die wir unternommen haben und die Ihnen helfen können. Diese Prinzipien sind hauptsächlich für mobile und Webanwendungen konzipiert. Aber bevor wir beginnen, wollen wir herausfinden, warum dies notwendig ist.
Warum nach Zugänglichkeit streben?
Wir als Designer sind in der Lage und verpflichtet, alles in unserer Macht Stehende zu tun, damit alle von uns entwickelten Produkte von jedem verwendet werden können, unabhängig von Fähigkeiten, Kontext oder Situation. Das Gute ist der Wunsch nach Zugänglichkeit - es bietet letztendlich eine positivere Erfahrung für alle.
Die Zahl der Menschen mit Behinderungen erreicht in den Vereinigten Staaten 56 Millionen (dh etwas weniger als ein Fünftel der Bevölkerung) und weltweit etwa eine Milliarde. Im Jahr 2017 wurden
814 Klagen wegen Barrierefreiheit
eingereicht . Bereits diese beiden Tatsachen zeigen uns überzeugend die Bedeutung dieses Themas.
Darüber hinaus erweist sich die Barrierefreiheit
aus geschäftlicher Sicht als vorteilhaft: Studien zeigen, dass barrierefreie Websites in Suchergebnissen höhere Positionen einnehmen, gute SEO-Indikatoren aufweisen, schneller geladen werden, die Praxis des Schreibens von besserem Code anregen und sich immer durch eine hervorragende Benutzerfreundlichkeit auszeichnen.
Diese sieben Regeln sind relativ einfach zu befolgen und ermöglichen es Ihnen, das Produkt über das WCAG 2.0-System (
Web Content Accessibility Guidelines ) auf Stufe AA zu bringen, sodass es mit grundlegenden Hilfsmitteln wie Bildschirmlesegeräten, Bildschirmlupen und Spracherkennungswerkzeugen kompatibel ist.
1. Stellen Sie die Farben kontrastreich genug ein
Der Farbkontrast ist eines der häufig vergessenen Probleme bei der Barrierefreiheit von Websites. Sehbehinderte Menschen haben wahrscheinlich Schwierigkeiten, Text zu lesen, wenn er sich nicht gut genug vom Hintergrund abhebt. Nach Schätzungen der Weltgesundheitsorganisation (WHO)
in ihrem Dokument zu Sehbehinderung und Blindheit sollte das Verhältnis der Helligkeit des Textes zum Hintergrund mindestens 4,5: 1 betragen (entsprechend dem AA-Wert). Bei größeren und fett gedruckten Schriftarten sind Zulassungen zulässig - sie sind auch bei geringem Kontrast leichter zu unterscheiden. Wenn Ihre Textgröße 14-18pt oder mehr beträgt, wird der Schwellenwert auf 3: 1 reduziert.
Es gibt Tools, mit denen Sie den Kontrast schnell überprüfen können. Für diejenigen, die auf einem Mac arbeiten, empfehle ich Ihnen, die Anwendung
Contrast zu erhalten - damit können Sie das Verhältnis sofort mit einer Pipette berechnen. Wenn Sie eine detailliertere Bewertung erhalten möchten, empfehlen wir Ihnen, die erforderlichen Werte in das
Tool einzugeben, um den Kontrast von WebAIM zu überprüfen. Es berechnet das Verhältnis für verschiedene Schriftgrößen und stellt die Entsprechung zu
verschiedenen Ebenen (A, AA, AAA) her. Durch Ändern der Werte können Sie das Ergebnis in Echtzeit erhalten.
Quelle:
WCAG Visual Contrast2. Verlassen Sie sich nicht nur auf die Farbe, um wichtige Informationen zu übermitteln
Wenn Sie versuchen, dem Benutzer etwas Wichtiges mitzuteilen - um ein Beispiel für eine Aktion zu zeigen oder eine Reaktion zu provozieren, machen Sie die Farbe nicht zum einzigen visuellen Marker. Menschen mit Sehschärfe oder Farbenblindheit werden es schwer haben, Ihre Inhalte wahrzunehmen.
Versuchen Sie, die Farbe mit einem anderen Indikator zu ergänzen - zum Beispiel einer Signatur oder Textur. Wenn Sie eine Fehlermeldung auf dem Bildschirm anzeigen, hören Sie nicht auf, nur den Text in Farbe hervorzuheben - fügen Sie dem Fenster ein Symbol oder einen Titel hinzu. Verwenden Sie auch eine fette oder unterstrichene Schrift, damit die Links im Text sofort auffallen.
Elemente mit einer komplexeren Informationsstruktur - beispielsweise Diagramme - sind besonders schwer zu lesen, wenn Datentypen nur durch Farbe getrennt sind. Verwenden Sie andere visuelle Aspekte, um Informationen zu vermitteln - Form, Größe und erklärenden Text. Sie können der Füllung Muster hinzufügen, um den Unterschied deutlicher zu machen.
Die Version von Trello für Farbenblind ist ein gutes Beispiel für die Anwendung dieser Regel. Wenn Sie in diesen Modus wechseln, werden die Verknüpfungen durch Hinzufügen von Texturen allgemein verständlich.
Es gibt einen guten Weg: Drucken Sie die Grafik auf einem Schwarzweißdrucker und prüfen Sie, ob Ihnen alles klar ist. Darüber hinaus können Sie spezielle Anwendungen wie
Color Oracle verwenden , die in Echtzeit zeigen, wie der Inhalt für Personen mit den häufigsten Beeinträchtigungen der Farbwahrnehmung aussieht. All dies hilft Ihnen sicherzustellen, dass die Informationen auf Ihrer Website nicht zu stark an die Farbe gebunden sind.
Quelle:
WCAG Visueller Kontrast ohne Farbe3. Markieren Sie aktive Elemente
Haben Sie einen blauen Rahmen bemerkt, der manchmal um Links, Felder und Schaltflächen erscheint? Ein solcher Rahmen wird als Fokusindikator bezeichnet. Browser verwenden standardmäßig die CSS-Pseudoklasse, um sie auf Elementen anzuzeigen, wenn sie angeklickt werden. Vielleicht scheint es Ihnen nicht zu hübsch und Sie würden es vorziehen, es einfach zu entfernen. Wenn Sie sich jedoch dazu entschließen, den Standardstil zu entfernen, stellen Sie sicher, dass Sie eine Art Ersatz bereitstellen.
Fokusindikatoren helfen Menschen zu verstehen, mit welchem Element Sie mit der Tastatur interagieren können und wo sie sich in der Seitenstruktur befinden. Sie sind nützlich für Blinde, die Screenreader verwenden, Menschen mit körperlichen Behinderungen oder Karpaltunnelsyndrom und fortgeschrittene Benutzer, die diese Art der Navigation bevorzugen. Außerdem bevorzugen viele von uns im Prinzip das Surfen im Internet auf der Tastatur!
Zu den Elementen, für die der aktive Status visuell hervorgehoben werden soll, gehören: Links, Formularfelder, Widgets, Schaltflächen und Menüelemente. Alle benötigen Indikatoren, die sie von den umgebenden Elementen unterscheiden.
Sie können Indikatoren so gestalten, dass sie im Stil Ihrer Website gut aussehen und mit dem Markenimage kombiniert werden. Machen Sie aktive Statusmarkierungen mit hohem Kontrast gut sichtbar, damit sie unter anderem gut sichtbar sind.
Quelle:
W3C Focus sichtbar4. Fügen Sie den Eingabefeldern Beschriftungen und Anweisungen hinzu
Einer der gröbsten Fehler beim Erstellen von Formularen besteht darin, erklärende Signaturen in den Feldern selbst zu hinterlassen, damit sie bei der Dateneingabe verschwinden. Wenn auf dem Bildschirm wenig Platz ist oder Sie dem Design ein minimalistisches, modernes Aussehen verleihen möchten, ist die Versuchung groß - aber tun Sie es nicht. Der Text in den Formularfeldern ist normalerweise grau und nicht kontrastreich genug, schwer zu lesen. Und Leute wie ich vergessen außerdem auf halbem Weg, dass sie überhaupt getippt haben, so dass die verschwindende Signatur uns alle Chancen nimmt, es herauszufinden.
Personen, die Bildschirmleseprogramme verwenden, bewegen sich normalerweise mit der Tabulatortaste in Form und wechseln von einem Controller zum anderen. Beschriftungselemente werden für jedes von ihnen gezählt. Der Rest des Textes, der nicht auf sie zutrifft (dieselben erklärenden Bezeichnungen in den Feldern), wird normalerweise übersprungen.
Stellen Sie immer sicher, dass die Leute verstehen, was mit dem Formular zu tun ist und was darin zu schreiben ist. Es ist am besten, wenn die Signaturen auch während des Eingabevorgangs sichtbar bleiben - eine Person sollte beim Ausfüllen der Felder einen Kontext vor Augen haben. Durch das Ausblenden von Unterschriften und Anweisungen für das Formular
opfern Designer im Streben nach Einfachheit
die Benutzerfreundlichkeit .
Dies bedeutet nicht, dass Sie den Bildschirm mit nutzlosen Informationen überladen müssen - stellen Sie nur sicher, dass die wichtigsten Tipps verfügbar sind. Ein Datenüberschuss kann nicht weniger Probleme mit sich bringen als deren Mangel. Ihr Ziel ist es, Informationen in einem solchen Umfang bereitzustellen, dass der Benutzer den Vorgang problemlos ausführen kann.
Quelle:
WebAIM Erstellen barrierefreier Formulare5. Schreiben Sie informative alternative Beschreibungen für Bilder und andere nicht-textuelle Elemente
Sehbehinderte verwenden häufig Bildschirmleseprogramme, um das Internet zu „hören“. Sie wandeln den Text in klingende Sprache um und ermöglichen es, alles zu hören, was auf der Site geschrieben ist.
Eine alternative Beschreibung kann auf zwei Arten dargestellt werden:
- Im alt-Attribut des Bildelements
- Im unmittelbaren Kontext oder im Begleittext zum Bild
Versuchen Sie zu beschreiben, was auf dem Bild passiert und wie es sich auf die allgemeine Bedeutung bezieht, und steigen Sie nicht nur mit einem Kommentar wie „Bild“ aus. Der Kontext ist entscheidend.
Wenn das Bild nur aus Gründen der Schönheit hinzugefügt wird oder das, was es ausdrückt, im Text dupliziert wird, können Sie das Attribut hinzufügen und leer lassen. In diesem Fall überspringt der Bildschirmleser es. Wenn alternativer Text überhaupt nicht geschrieben wird, lesen einige Bildschirmleser den Dateinamen. Sie können sich nichts Schlimmeres für eine Benutzererfahrung vorstellen.
Google arbeitet derzeit an einer auf
künstlicher Intelligenz basierenden Lösung , die Bildunterschriften mit einer Genauigkeit von 94% generiert. Der Code ist gemeinfrei und wird noch finalisiert. Ich hoffe, dass wir bald sehen werden, wie diese Lösung in verschiedenen Produkten angewendet wird. Bis dahin sollten Sie die Bedeutung und den Zweck der Bilder im Kontext des restlichen Inhalts manuell registrieren.
Quelle:
W3C Verwenden von Alt-Attributen6. Markup richtig verwenden
Überschriften markieren den Anfang des Inhaltsblocks - dies sind Tags, die den Stil und den Zweck des Textes bestimmen. Darüber hinaus definieren die Überschriften die Hierarchie des Inhalts auf der Seite.
Die große Schrift in den Überschriften ermöglicht es dem Benutzer, die Struktur der Informationen besser zu verstehen. Screenreader verlassen sich beim Lesen von Inhalten auch auf Header. Menschen mit Sehbehinderung erhalten so eine Vorstellung vom allgemeinen Erscheinungsbild der Seite, indem sie Überschriften in einer hierarchischen Reihenfolge anhören.
Bei der Entwicklung einer Site müssen Sie die richtigen Strukturelemente verwenden. HTML-Elemente übermitteln dem Browser Informationen darüber, welche Art von Inhalten sie enthalten und welche Aktionen damit ausgeführt werden sollen. Es sind die Komponenten und die Struktur der Seite, die den Browser-Eingabehilfenbaum bilden, mit dem Screenreader für Sehbehinderte arbeiten.
Falsches Markup beeinträchtigt die Barrierefreiheit erheblich. Beschränken Sie die Verwendung von HTML-Tags nicht auf Stileffekte. Screenreader werden von einer Seite geleitet, die auf der hierarchischen Struktur von Überschriften basiert - echte Überschriften und nicht nur Text, der größer und dicker wird. Mit ihrer Hilfe können Benutzer die vollständige Liste der Überschriften anhören, Inhaltsblöcke überspringen, die sich nach der Art der Überschrift richten, oder zur Navigation durch die Überschriften der ersten Ebene (h1) gehen.
Quelle:
WebAIM Semantic Structure7. Unterstützung der Schlüsselsteuerung
Die Fähigkeit, Operationen über die Tastatur auszuführen, ist eine der Hauptkomponenten der Barrierefreiheit im Webdesign. Menschen mit eingeschränkter Koordination von Bewegungen und Muskeltonus, Blinden, Lesern von Bildschirmleseprogrammen und sogar einigen fortgeschrittenen Benutzern verlassen sich beim Navigieren auf der Website auf die Tastatur.
Vielleicht verwenden Sie wie ich die Tabulatortaste, um zu den gewünschten interaktiven Seitenelementen zu navigieren: Links, Schaltflächen, Eingabefelder. Mit dem Indikator für den aktiven Zustand, über den wir oben gesprochen haben, können Sie das aktuell ausgewählte Element visuell hervorheben.
Beim Bewegen auf der Seite ist die Reihenfolge, in der der Benutzer mit den Elementen interagiert, äußerst wichtig. Daher sollte die Navigation logisch und intuitiv sein. Die Übergangsreihenfolge sollte der Richtung der Blickbewegung entsprechen: von links nach rechts, von oben nach unten, zuerst die Hauptnavigation, dann die Schaltflächen, die den Inhalt verbergen, sowie die Formulare und schließlich die Fußzeile.
Es wird empfohlen, die Site nur mit der Tastatur zu testen. Gehen Sie mit der Tabulatortaste von Link zu Link und von Feld zu Feld. Überprüfen Sie, ob es zweckmäßig ist, ein Element auszuwählen, indem Sie die Eingabetaste drücken. Stellen Sie sicher, dass alle Komponenten in der richtigen Reihenfolge ausgerichtet sind und dass ihr Aussehen vorhersehbar ist. Wenn Sie alle Seiten durchgehen können, ohne die Maus zu berühren, geht es Ihnen gut!
Und noch etwas. Achten Sie auf die Volumes im Navigationssystem - dies bezieht sich auf die Anzahl der Links und auf die Größe des Textes. Das Durchlaufen aller Elemente in einer langen Liste kann Menschen mit eingeschränkten motorischen Fähigkeiten ermüden, und Menschen, die einen Bildschirmleser verwenden, werden schnell müde, lange Linktexte anzuhören. Versuchen Sie, prägnanter zu sein. Das Hinzufügen von
ARIA-Markern oder HTML 5-Strukturelementen (wie main oder nav) erleichtert auch das Navigieren auf der Seite.
Quelle:
W3C-TastaturWas kann man noch tun?
Diese Regeln sind ein guter Ausgangspunkt, aber wenn Sie etwas anderes tun möchten, um die Zugänglichkeit zu verbessern, würde ich empfehlen:
- Führen Sie ein Audit zur Verfügbarkeit durch. Verwenden Sie den speziellen Service, um herauszufinden, ob Ihr Produkt in Konflikt mit Zusatzgeräten steht und ob es die Anforderungen der Stufe AA erfüllt. Nehmen Sie die erforderlichen Änderungen basierend auf den Ergebnissen vor und wiederholen Sie den Test.
- Ernennen Sie einen Wirtschaftsprüfer. Sie können einen der Mitarbeiter anweisen, solche Audits regelmäßig durchzuführen - beispielsweise an jemanden aus dem Testteam. Wenn keine Personen mit der erforderlichen Erfahrung vorhanden sind, können Sie sich an einen externen Spezialisten wenden.
- Berücksichtigen Sie beim Sammeln von Informationen die Barrierefreiheitsfaktoren. Überprüfen Sie bei der Durchführung von Recherchen, ob Ihre Annahmen zur Barrierefreiheit bestätigt wurden, und suchen Sie nach Möglichkeiten, etwas zu verfeinern. Menschen mit Behinderungen einzubeziehen ist etwas schwieriger. Nehmen Sie Kontakt mit Verbänden und Gemeinden auf - in der Regel helfen sie gerne weiter.
Fazit
Nun, das ist alles. Dies waren sieben Regeln, mit denen Sie Ihre Website
gemäß den Richtlinien für die Barrierefreiheit von Webinhalten auf ein ungefähres AA-Niveau bringen können.
Ich arbeite immer noch daran, Design zugänglicher zu machen, und ich versuche, die Prinzipien zu beachten, die ich anderen predige. Früher schien es mir, dass dies alles zu kompliziert ist und immer noch keine Rolle spielt. Aber ich habe mich geirrt. Ich schlage vor, dass Sie den Prozess mit diesen Regeln starten und das Gespräch darüber fortsetzen, warum Barrierefreiheit wichtig ist.
Die Förderung von Barrierefreiheitspraktiken liegt in der Verantwortung der Designer. Mit ihrer Hilfe eröffnen wir allen Menschen den Weg zur Technologie, unabhängig von ihren Fähigkeiten, ihrem Lebensstandard, ihrem Alter, ihrer Ausbildung und ihrem Wohnort. Übernehmen Sie Verantwortung beim Entwerfen. Vielen Dank!
Referenzliste
WebAIM - Artikel, Ressourcen und
Fallstudien zur Barrierefreiheit im Webdesign
"
7 Dinge, die ein Designer über Barrierefreiheit wissen muss " ist ein großartiger Artikel von Salesforce mit genauen Beobachtungen
UCLA Disabilities and Computing Program - Die Website ist natürlich nicht die schönste und modernste, aber sie ist sehr reich an Ressourcen
UX-Mythen - Eine umfangreiche Liste von Missverständnissen im UX-Design mit Widerlegungen; Einige von ihnen berühren Zugänglichkeitsprobleme
Workflows für die Barrierefreiheit von Farben - hier zeigt
Geri Coady , wie Sie mit der Auswahl der Farben auf den Punkt kommen
W3C - die Bibel der Barrierefreiheit im Webdesign. Sie können sogar durch die Fülle an Materialien verwirrt werden. Wenn Sie die Struktur verstehen, finden Sie großartige Beispiele, Tipps und Ressourcen.
Nützliche Werkzeuge
WebAIM Color Contrast Checker - ein intelligentes Tool zur Überprüfung des Kontrasts, das unmittelbar nach der Eingabe und für verschiedene Textgrößen ein Ergebnis liefert
Inklusive Komponenten - eine Texturbibliothek, die als Blog konzipiert ist. Besonderes Augenmerk wird auf Fragen des erschwinglichen Designs gelegt. Jeder Beitrag analysiert einige gemeinsame Schnittstellenkomponenten und bietet eine zuverlässigere und kostengünstigere Version seines Designs.
Color Oracle ist ein kostenloser farbenblinder Simulator für Windows, Mac und Linux. In Echtzeit wird gezeigt, wie Menschen mit weit verbreiteten Farbwahrnehmungsstörungen sehen.
Richtlinien für die
Barrierefreiheit von Vox-Produkten - Vollständige Liste der Anforderungen für Designer, Entwickler und Projektmanager
AX Google Chrome-Erweiterung - Überprüfen Sie jede Website mit dem Inspector for Chrome auf Verstöße gegen die Barrierefreiheit
Contrast ist eine Mac-App, die sofortigen Zugriff auf WGAG-Helligkeitsverhältnisse bietet.