Als ich in der Welt der Softwareentwicklung anfing, hatte ich keine Ahnung, was Barrierefreiheit ist. Es war einfach ein Thema, das weit weg von meinem Wissen und meinem täglichen Leben zu sein schien, aber manchmal wurde ich mit etwas darüber konfrontiert (Linkedin, Medium oder Job).
Jedes Mal, wenn ich darüber nachdachte, war die Rede immer die gleiche. Der Grund war, dass wir Barrierefreiheit einführen sollten, weil ein gewisser Prozentsatz der Bevölkerung irgendeine Art von Defizit hat oder weil diese Zahl jedes Jahr wächst.
Das ist nicht der Mengenansatz, den ich gerne einbringen möchte. Barrierefreiheit bedeutet für mich, dass eine Anwendung ✨ zugänglich sein muss ✨ und zwar bis zum Ende. Für den Sehbehinderten, für die alte Oma, für den Autisten, für den Farbenblinden, für den Studenten, den Angestellten, den Arbeitslosen. Kurzum, für alle. Bei der Barrierefreiheit geht es um die Demokratisierung von Informationen.
Barrierefreiheit ist die Möglichkeit, dass jeder, unabhängig von seinem Zustand, Zugang zu etwas hat.
Ich sage das, weil Barrierefreiheit zu 100 % mit der Benutzererfahrung, der berühmten UX, zusammenhängt. Eine zugängliche Anwendung bedeutet, dass sie einfach zu benutzen, direkt in ihren Absichten, klar in ihren Ideen und elegant in der Umsetzung ist.
Letzten Endes sind Benutzerfreundlichkeit und Zugänglichkeit Zwillingsschwestern.
Wenn Sie bei Ihren Implementierungen heute noch nicht an Barrierefreiheit denken, sollten Sie das nachholen, denn es wird das Niveau Ihrer Lieferungen mit Sicherheit erhöhen.
Die Erstellung eines zugänglichen Bildschirms ist nicht so schwierig, wie es auf den ersten Blick erscheinen mag. Lassen Sie uns Punkte auflisten und darüber sprechen:
Diese ist ziemlich objektiv. Verwenden Sie sie möglichst korrekt, z. B. unter Beachtung der Semantik der Elemente und ihrer Eigenschaften.
Respektieren Sie die Konzepte, Attribute und Eigenschaften von Tags. Bildschirmlesegeräte, Bildschirmlupen und andere Hilfsmittel stützen sich stark auf HTML, um sie zu steuern.
Seien Sie vorsichtig mit Farben und deren Kontrasten. Versuchen Sie, den Anfang und das Ende von Farben zu definieren, und sorgen Sie für einen ausreichenden Kontrast, damit sie gut definiert sind. Dies gewährleistet, dass Menschen mit Sehschwäche oder Farbenblindheit richtig sehen können, und macht es im Allgemeinen für alle einfacher.
Bildschirmlesegeräte können Bilder nicht lesen. Beschreiben Sie daher das Bild mit dem "alt"-Attribut des "img"-Tags.
Wenn das Bild nicht wichtig ist und nur der Dekoration dient, lassen Sie das "alt"-Attribut leer. Auf diese Weise weiß der Bildschirmleser, dass er das Bild übergehen soll.
Kennen Sie dieses wirklich coole Video? Vergessen Sie nicht, es auch mit Untertiteln anzuschauen.
Untertitel sind sehr wichtig.
HTML hat eine Hierarchie für Text, die befolgt werden muss. Indem Sie die Hierarchie einhalten, machen Sie deutlich, dass Ihre Schnittstelle einen Lesefluss hat, dem Sie folgen müssen.
Verwenden Sie die Tags title, subtitle, paragraph usw. in angemessener Weise.
Es ist äußerst wichtig, dass Ihre Anwendung auch von Personen genutzt werden kann, die motorische Schwierigkeiten haben und daher die Tastatur zum Navigieren verwenden.
Behalten Sie eine hierarchische Struktur von HTML bei. Halten Sie sich an die HTML-Tags, damit es möglich ist, mit der Tastatur durch die Anwendung zu navigieren.
Wie im Thema "Tastaturnavigation" beschrieben, sollten die Links navigierbar sein, so dass man mit der Tabulatortaste leicht durch sie navigieren kann.
Achten Sie außerdem darauf, dass Ihr Link wie ein Link aussieht (lol).
Formulare haben sich in Richtung eines minimalistischen Ansatzes entwickelt, was gut ist... aber auch schlecht sein kann. Verstecken Sie die Beschriftungen und Begrenzungen nicht.
Beschriften Sie die Felder, um sie zu identifizieren, und verwenden Sie visuelle Elemente (Farben, Meldungen, Symbole usw.), um den Zustand des Formulars anzuzeigen und den Benutzer über Anforderungen, Fehler und Erfolge zu informieren.
Schriftarten können ein heikles Thema sein. Bei der Wahl der Schriftart sollten Sie Ihren gesunden Menschenverstand walten lassen. Eine schwere und komplexe Schriftart erschwert nur das Lesen.
Achten Sie außerdem auf die Schriftgröße und den Zeilenabstand, Sie müssen nicht alles klein machen.
Ideal ist eine Sprache, die von allen verstanden wird. Vermeiden Sie schwierige Botschaften und komplizierte Wörter. Schreiben Sie einfach! Sei klar!
Geben Sie das Element an, das im Mittelpunkt steht, und machen Sie diese Information durch visuelle Indikatoren sichtbar.
ARIA ist eine vom W3C kontrollierte Spezifikation. ARIA ist eine Erweiterung von HTML, die Attribute, Eigenschaften und Zustände zur Unterstützung und Verbesserung der Erfahrung mit unterstützenden Technologien definiert.
Dieses Thema ist äußerst wichtig, sehen Sie sich die Dokumentation an.
Landmarken funktionieren wie Referenzpunkte. Sie dienen dazu, wichtige Punkte in der Anwendung zu kennzeichnen, damit der Benutzer sie leichter erreichen kann.
Um sie zu verwenden, fügen Sie einfach das Attribut "role" in das Element ein.
Verwenden Sie, wenn möglich, geräteunabhängige JavaScript-Ereignishandler.
Ein Beispiel ist das onMouseOver-Ereignis, das mit der Maus zusammenhängt (und wer benutzt keine Maus?), in diesem Fall ändern Sie es in onFocus.
Innovieren Sie. Anders sein. Es ist möglich, einzigartig und dennoch zugänglich zu sein.
Die Verwendung von Farbe ist nicht die einzige Möglichkeit, interaktive Informationen zu vermitteln. Verwenden Sie auch visuelle Indikatoren und haben Sie einen zweiten Kommunikationskanal.
Legen Sie nicht alles zu eng aneinander, sondern verwenden Sie Leerraum, um Grenzen zu markieren (einfach!). Scheuen Sie sich nicht, klare Abstände zu verwenden.
Nicht jeder hat ein schnelles Internet.
Das Ziel von ARIA ist es, das Erlebnis zu verbessern, und nicht, Zugänglichkeitsprobleme zu beheben, die durch schlecht geschriebenes HTML verursacht werden.
Reaktionsfähigkeit bedeutet, dass eine Website oder Anwendung auf Geräten unterschiedlicher Größe zugänglich ist. Stellen Sie sicher, dass Sie dies testen!
Bildschirmleser wissen möglicherweise nicht, wie man das Wort richtig ausspricht. Außerdem weiß vielleicht nicht jeder, wie man diese Symbole richtig liest, was den Text noch komplexer und schwerer verständlich macht. Es gibt Techniken für nicht-sexistisches Schreiben, die stattdessen verwendet werden können.
Wenn die Antwort nein lautet, ist es vielleicht an der Zeit, darüber nachzudenken, warum dies nicht der Fall ist, und zu versuchen, dieses Szenario jetzt zu ändern! Wenn ja, kommen Sie sich näher! Koexistenz schafft Wissen, Empathie und Freundschaft.
Aber tun Sie Ihr Bestes!
Zugänglichkeitsprüfung für Entwickler in Chrome.
Automatisiertes Open-Source-Tool zur Verbesserung der Leistung, Qualität und Zugänglichkeit Ihrer Webanwendungen.
Analyse der Zugänglichkeit Ihrer Website.
Eine Reihe von Werkzeugen, die Autoren dabei helfen, ihre Webinhalte für Menschen mit Behinderungen besser zugänglich zu machen.
Kostenloser Bildschirmleser.
Ich hoffe, ich konnte einige Informationen liefern, einen Einblick geben und ein wichtiges Thema auf gute Weise darstellen.
Natürlich ist dies ein umfangreiches Thema, und es geht nicht darum, alles über Barrierefreiheit zu wissen und zu wissen, wie man sie sofort umsetzt, sondern zu wissen, dass sie existiert. Sie ist wichtig, und sie muss in Anwendungen vorhanden sein. Den Rest werden Sie nach und nach lernen.
Vielen Dank für die Lektüre!