Der Leitfaden für Designer zur digitalen Barrierefreiheit
Der Begriff der Zugänglichkeit in digitalen Designs erinnert vielleicht an Bildschirmleser und Sprachsteuerung, aber es geht um viel mehr. Einige Beeinträchtigungen bleiben beispielsweise häufig unbemerkt. Nehmen Sie Farbenblindheit: Jeder Zwölfte leidet unter dieser Krankheit, sodass ein Design, das nur Farbe zur Übermittlung von Informationen verwendet, für eine große Anzahl von Benutzern nutzlos ist.
Dann gibt es diejenigen, die technisch nicht blind sind, aber ein gewisses Maß an Sehbehinderung haben. Das Entwerfen für diese Benutzer hilft ihnen nicht nur, sondern erleichtert Ihnen die Arbeit für alle. Die Tatsache, dass die meisten Menschen grauen Text auf weißem Hintergrund lesen können, bedeutet nicht, dass es Spaß macht, dies zu tun.
Bei Websites haben einige Benutzer eine kognitive Beeinträchtigung. Es kann dauerhaft sein, z. B. eine Lernschwäche, oder es kann sich um eine vorübergehende Beeinträchtigung handeln, z. B. um Trunkenheit (stellen Sie sich beispielsweise einen Taxidienst vor) oder sogar um einen Schock (denken Sie an Materialien für ein Krankenhaus).
Das Entwerfen für diese Personen bedeutet, Unordnung zu minimieren, intelligente, einfache Kopien zu verwenden und Benutzerreisen leicht verständlich zu machen. Diese Eigenschaften sind etwas, das jeder schätzt.
Barrierefreiheit als Erweiterung des UX-Designs
Experte für Barrierefreiheit Heydon Pickering empfiehlt, Barrierefreiheit als Erweiterung des UX-Designs zu betrachten. Stellen Sie sich vor, wie Menschen mit unterschiedlichen Behinderungen denselben Inhalt erleben. Es ist Teil des Designprozesses und nicht etwas, das Sie später 'anschrauben'.
Überlegen Sie, wie Benutzer von Bildschirmleseprogrammen Ihre Seite beim Schreiben Ihres Markups erleben: Die Reihenfolge ist wichtig. 'Wenn Ihr Navigationsmenü visuell oben auf der Seite, aber unten im HTML-Dokument positioniert ist, unterscheidet sich die Erfahrung für Tastaturbenutzer frustrierend von der für Benutzer, die mit der Maus klicken und klicken können. Sie müssen den gesamten Seiteninhalt mit der Tabulatortaste durchgehen, um auf das Menü zuzugreifen. '
Wenn Sie ein Druckdesigner sind und nicht viel Webarbeit geleistet haben, kann es schmerzhaft sein zu erkennen, dass Ihre Liebe zum Detail verloren geht, wenn Ihre Designs nicht genau so im Web implementiert werden können, wie Sie sie erstellt haben.
'Sei kein Sklave der Tyrannei der' Pixel-Perfektion '', rät Pickering. „Im Druckdesign kann man anspruchsvoll sein, aber im Web ist es sinnlos, es zu versuchen. Design-Interaktionen, keine Annäherungen. Benutzer sind keine Galeriebesucher, sondern Teilnehmer. '
Halten Sie Designs einfach
Versuchen Sie vor allem, die Dinge so einfach wie möglich zu halten. 'Der größte Feind der Barrierefreiheit ist die Komplexität', sagt Pickering. 'Die Komplexität macht Schnittstellen für jedermann unzugänglich, insbesondere für diejenigen, deren Inhalte durch unterstützende Technologien prozedural angekündigt wurden.'
Komplexität erschwert auch Menschen mit kognitiven Unterschieden wie Autismus, Legasthenie oder ADHS.
Jamie Knight, Senior Accessibility Specialist bei der BBC, unterteilt den kognitiven Prozess, der erforderlich ist, um etwas zu tun, in drei Teile: Empfangen von Informationen, Verarbeiten von Informationen und anschließendes Ergreifen von Maßnahmen. Anschließend bewertet er, wie gut eine Website es jemandem ermöglicht, jeden Teil zu erledigen.
Unter 'Informationen empfangen' wird verstanden, ob eine Person die vorhandenen Informationen aufnehmen und Dinge erkennen kann, mit denen sie eine Aufgabe ausführen kann, z. B. Schaltflächen, Menüs und Textbereiche.
Unter 'Informationen verarbeiten' wird verstanden, ob eine Person die Dinge herausfiltern kann, die sie nicht benötigt, um eine Entscheidung zu treffen, z. B. Anzeigen, Links zu anderen Bereichen der Website usw. Je mehr irrelevante Elemente vorhanden sind, desto schwieriger ist es, zu filtern und zu entscheiden.
'Handeln' bezieht sich darauf, ob jemand einen Aktionsplan auf der Grundlage der Entscheidung, die er im vorherigen Schritt getroffen hat, erstellen und vervollständigen kann. Knight fragt: „Kann der Benutzer die Informationen wahrnehmen und herausfinden, was getan werden kann? Können sie die Informationen filtern, um eine Entscheidung zu treffen? Können sie dann eine Aktion planen und abschließen? '
Knight ist selbst und in autistisch dieser Beitrag Er erklärt, wie er ein Zoom-Werkzeug verwendet, um Werbung und andere Unordnung von seinem Bildschirm auszuschließen, damit er sich besser konzentrieren kann, und aus demselben Grund auch einen Bildschirmleser.
Farbkontrast
Der Farbkontrast ist einer der wichtigsten Faktoren für die Lesbarkeit von Text. Barrierefreiheit war eine Priorität für die Webdesign-Agentur Domain7 als es die Website für das Imperial College London neu gestaltete.
Tracey Falk, Leiterin des Designteams, erklärt: „Während das Festhalten an Schwarz auf Weiß immer am sichersten ist (und für die Kopie des Primärkörpers empfohlen wird), ist die Verwendung eines Online-Tools, das die Schriftfarbe anhand der Hintergrundfarben auf Kontrast prüft, der Schlüssel. Sie wären überrascht, was diese Kontrasttests nicht besteht. '
Der Kontrast muss auch berücksichtigt werden, wenn ein Typ verwendet wird, der über Bildern liegt. Miriam Thomas, UX-Designerin und Front-End-Entwicklungsleiterin bei Domain7, sagte uns: 'Dies ist weiterhin ein großer Webtrend und wir sind überrascht, wie oft die Lesbarkeit in diesem Designmuster übersehen wird.'
„Oft besteht die Lösung darin, Bilder mit einer dunklen oder hellen Überlagerung zu neutralisieren und zu entsättigen, damit Text gelesen werden kann. Imperial verfügte jedoch über eine riesige Bibliothek mit hellen Bildern. Deshalb haben wir uns dafür entschieden, Blockhintergründe hinter Text über Bildern zu färben, um diese Lebendigkeit aufrechtzuerhalten. '
Unzugängliches Branding
Was aber, wenn die Markenfarben keine Kontrasttests bestehen? Geri Coady , Autor von Eine Taschenanleitung zur Farbzugänglichkeit , erklärt: 'Wenn Markenfarben bereits ausgewählt wurden und aus irgendeinem Grund leider nicht zugänglich sind, versuchen Sie, alternative Wege zu finden, um sie umzusetzen', rät sie.
'Ein Logo mit unzureichendem Kontrast kann durch beschreibenden alternativen Text ergänzt werden. Versuchen Sie jedoch, für Textelemente wie Textkopien und Überschriften einen dunkleren, kontrastkonformen Farbton derselben Farbe einzuführen, um Ihre Markenpalette zu erweitern.'
'Wenn dies zu einem Pushback Ihres Kunden führt, haben Sie keine Angst davor, das potenzielle Risiko von Rechtsstreitigkeiten und Kundenverlusten von einer unzugänglichen Website aus zu erhöhen. Geldgespräche. ' (Disney stand vor einem Zugänglichkeitsklage in 2011.)
Coady empfiehlt Lea Verous Kontrastkontrolle um sicherzustellen, dass Ihre Palette lesbar ist und mehr Details in ihr enthalten sind Artikel über Kontrastprüfungen . Siehe auch die Richtlinien für die Barrierefreiheit von Webinhalten .
Alle Experten, mit denen wir gesprochen haben, waren sich einig, dass das Testen der Schlüssel ist, um Ihre Arbeit zugänglich zu machen und Probleme auszubügeln. Testen Sie in regelmäßigen Abständen und schließen Sie Personen mit kognitiven Unterschieden wie Autismus-Spektrum oder ADHS sowie Personen mit Seh- und Motorikstörungen in Ihre Testgruppe ein.
Die Vollversion dieses Artikels erschien zuerst im Inneren Computer Arts Ausgabe 242 , eine Sonderausgabe der Typografie. Illustrationen von Becca Allen.
Beim London generieren Am 22. September hilft Ihnen Léonie Watson dabei, die Mechanismen der Barrierefreiheit im Browser zu verstehen, um unerwartete Folgen zu vermeiden. Die Konferenz bietet 15 weitere Präsentationen zu den Themen Webleistung, Animationen, UX-Strategie, Prototyping, adaptive Schnittstellen, reaktionsschnelle CSS-Komponenten und vieles mehr. Reservieren Sie noch heute Ihren Platz !
Zum Thema passende Artikel:
- Léonie Watson über die Integration der Barrierefreiheit in den Webdesign-Prozess
- Die Regeln der reaktionsschnellen Web-Typografie
- Aaron Gustafson: Die Zukunft adaptiver Benutzeroberflächen ist inklusive
