Hey Frontender, lasst uns über Barrierefreiheit sprechen?

CoderStudio, 17.03.2023 02:23
Hey Frontender, lasst uns über Barrierefreiheit sprechen?

Ein bisschen über die Theorie, die Umsetzung und ein paar Tipps

Einführung

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.

"Aber Alter, wie mache ich meine Lieferungen zugänglich"?

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:

HTML .

Die Erstellung eines zugänglichen Bildschirms ist nicht so schwierig wie es auf den

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.

Farben und Kontrast

Respektieren Sie die Konzepte Attribute und Eigenschaften von Tags Bildschirmlesegeräte

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.

Bilder

Seien Sie vorsichtig mit Farben und deren Kontrasten Versuchen Sie den Anfang und das

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.

Videos

Wenn das Bild nicht wichtig ist und nur der Dekoration dient lassen Sie das

Kennen Sie dieses wirklich coole Video? Vergessen Sie nicht, es auch mit Untertiteln anzuschauen.

Untertitel sind sehr wichtig.

Hierarchie der Texte

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.

Tastaturnavigation

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.

Links

Behalten Sie eine hierarchische Struktur von HTML bei Halten Sie sich an die HTML-Tags

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

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

Beschriften Sie die Felder um sie zu identifizieren und verwenden Sie visuelle Elemente

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.

Linguagem

Achten Sie außerdem auf die Schriftgröße und den Zeilenabstand Sie müssen nicht alles

Ideal ist eine Sprache, die von allen verstanden wird. Vermeiden Sie schwierige Botschaften und komplizierte Wörter. Schreiben Sie einfach! Sei klar!

Konzentriere dich auf

Ideal ist eine Sprache die von allen verstanden wird Vermeiden Sie schwierige

Geben Sie das Element an, das im Mittelpunkt steht, und machen Sie diese Information durch visuelle Indikatoren sichtbar.

ARIA

Geben Sie das Element an das im Mittelpunkt steht und machen Sie diese Information durch

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.

Wahrzeichen

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.

Javascript-Ereignisse

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.

15 Tipps und bewährte Praktiken

  1. Legen Sie die Sprache Ihrer Anwendung fest - und Elemente, wenn sie spezifischer sein müssen;
  2. Icon-Schriftquellen sind nicht gut für die Zugänglichkeit - versuchen Sie, SVG zu wählen;
  3. Machen Sie Links selbsterklärend und leicht verständlich - vermeiden Sie "Klicken Sie hier"-Text;
  4. Ausgerichteter Text kann beim Lesen problematisch sein;
  5. Gruppieren Sie Optionsschaltflächen zusammen;
  6. Spielen Sie keine Videos (insbesondere mit Ton) und Musik automatisch ab. Das ist lästig und kann Menschen abschrecken;
  7. Verwenden Sie keine veralteten Elemente - wie Zusammenfassung (table), Name (a) und Rahmen (img);
  8. Wenn Sie einer Tabelle einen Titel hinzufügen, verwenden Sie das caption-Tag innerhalb des table-Tags - das macht es für Screenreader einfacher;
  9. Verwenden Sie den title-Tag richtig - er ist für Bildschirmleser nützlich;
  10. Vermeiden Sie die Verwendung von Bildern mit Text innerhalb des Bildes - entscheiden Sie sich gegebenenfalls für ein Overlay;
  11. Achten Sie auf Schleifenanimationen - sie können für manche Menschen eine Ablenkung darstellen;
  12. Fenster, Dialogfelder, Modalfelder usw. sollten mit der Escape-Taste geschlossen werden können;
  13. Deaktivieren Sie den Zoom nicht - viele Menschen nutzen ihn, um sich wohler zu fühlen;
  14. Vermeiden Sie die Verwendung von Bindestrichen im Satzbau;
  15. Vermeiden Sie Abkürzungen.

Wahrheiten

a) Zugänglichkeit ist kein Hindernis für Innovation

Innovieren Sie. Anders sein. Es ist möglich, einzigartig und dennoch zugänglich zu sein.

b) Farbe ist nicht die einzige Möglichkeit, Informationen sauber zu vermitteln

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.

c) Warum sollte man sich davor scheuen, weißen Raum zu nutzen?

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.

d) Leistung bedeutet auch, zugänglich zu sein.

Nicht jeder hat ein schnelles Internet.

e) ARIA dient der Verbesserung der Erfahrung

Das Ziel von ARIA ist es, das Erlebnis zu verbessern, und nicht, Zugänglichkeitsprobleme zu beheben, die durch schlecht geschriebenes HTML verursacht werden.

f) Wie sieht es mit der Reaktionsfähigkeit aus?

Reaktionsfähigkeit bedeutet, dass eine Website oder Anwendung auf Geräten unterschiedlicher Größe zugänglich ist. Stellen Sie sicher, dass Sie dies testen!

g) Seien Sie vorsichtig bei der Verwendung von "x" und "@" für geschlechtsneutrale Sprache.

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.

h) Gibt es in Ihrem Unternehmen Menschen mit Behinderungen?

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.

i) Leider werden Sie nicht in der Lage sein, eine perfekte Erfahrung für alle zu bieten.

Aber tun Sie Ihr Bestes!

Werkzeuge, die dir helfen

axe - Prüfung der Barrierefreiheit im Web

Zugänglichkeitsprüfung für Entwickler in Chrome.

Zugänglichkeitsprüfung für Entwickler in Chrome

Lighthouse

Automatisiertes Open-Source-Tool zur Verbesserung der Leistung, Qualität und Zugänglichkeit Ihrer Webanwendungen.

Automatisiertes Open-Source-Tool zur Verbesserung der Leistung Qualität und

BORREAU OF INTERNET ACCESSIBILITY - a11y Tool And Services for WCAG 2.0 Compliance

Analyse der Zugänglichkeit Ihrer Website.

Analyse der Zugänglichkeit Ihrer Website

WAVE Web Accessibility Evaluation Tool

Eine Reihe von Werkzeugen, die Autoren dabei helfen, ihre Webinhalte für Menschen mit Behinderungen besser zugänglich zu machen.

Eine Reihe von Werkzeugen die Autoren dabei helfen ihre Webinhalte für Menschen mit

NVDA

Kostenloser Bildschirmleser.

Kostenloser Bildschirmleser

Fazit

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!

Referenzen

  • WAI-ARIA
  • Checkliste für Barrierefreiheit
  • HTML 5 und ARIA Orientierungspunkte

Weitere Artikel zum Thema

  • Barrierefreies Design - wie man diese Welt zu einem besseren Ort für alle macht
  • Zugänglichkeitsrichtlinien für UX-Designer
  • Barrierefreiheit zu gestalten ist gar nicht so schwer
  • 7 Dinge, die jeder Designer über Barrierefreiheit wissen muss