Gestaltung für Barrierefreiheit und Inklusion

„Barrierefreiheit wird in der Entwurfsphase gelöst.“ Diesen Satz hörten Daniel Na und sein Team immer wieder, als sie an einer Konferenz teilnahmen. Zugänglichkeit zu entwerfen bedeutet, auf die Bedürfnisse Ihrer Benutzer einzugehen . Dazu gehören Ihre Zielbenutzer, Benutzer außerhalb Ihrer Zielgruppe, Benutzer mit Behinderungen und sogar Benutzer aus verschiedenen Kulturen und Ländern. Das Verständnis dieser Bedürfnisse ist der Schlüssel zur Gestaltung besserer und zugänglicherer Erfahrungen für sie.

Eines der häufigsten Probleme beim Entwerfen für Barrierefreiheit besteht darin, zu wissen, für welche Anforderungen Sie entwerfen sollten. Es ist nicht so, dass wir absichtlich darauf abzielen, Benutzer auszuschließen, es ist nur so, dass „wir nicht wissen, was wir nicht wissen“. Wenn es also um Barrierefreiheit geht, gibt es viel zu wissen.

Wie gehen wir vor, um die unzähligen Benutzer und ihre Bedürfnisse zu verstehen? Wie können wir sicherstellen, dass ihre Bedürfnisse in unserem Design erfüllt werden? Um diese Fragen zu beantworten, habe ich festgestellt, dass es hilfreich ist, eine kritische Analysetechnik anzuwenden, bei der ein Design durch verschiedene Linsen betrachtet wird.

„Gutes [zugängliches] Design entsteht, wenn man sein [Design] aus vielen verschiedenen Perspektiven oder Linsen betrachtet.“

— The Art of Game Design: A Book of Lenses

Eine Linse ist „ein verengter Filter, durch den ein Thema betrachtet oder untersucht werden kann“. Objektive, die oft zur Untersuchung von Kunstwerken, Literatur oder Filmen verwendet werden, fordern uns auf, unsere Weltanschauung hinter uns zu lassen und die Welt stattdessen aus einem anderen Kontext zu betrachten.

Wenn wir beispielsweise Kunst durch die Linse der Geschichte betrachten, müssen wir das „soziale, politische, wirtschaftliche, kulturelle und/oder intellektuelle Klima der Zeit“ verstehen. Dadurch können wir besser verstehen, welche Welteinflüsse den Künstler beeinflusst haben und wie dies das Kunstwerk und seine Botschaft geprägt hat.

Zugänglichkeitsobjektive sind ein Filter, mit dem wir verstehen können, wie sich verschiedene Aspekte des Designs auf die Bedürfnisse der Benutzer auswirken. Jedes Objektiv enthält eine Reihe von Fragen, die Sie sich während des gesamten Designprozesses stellen müssen. Durch die Verwendung dieser Linsen können Sie die Bedürfnisse Ihrer Benutzer umfassender berücksichtigen, sodass Sie eine zugänglichere Benutzererfahrung für alle gestalten können.

Die Linsen der Barrierefreiheit sind:

• Linse der Animation und Effekte
• Objektiv von Audio und Video
• Linse der Farbe
• Linse der Kontrollen
• Linse der Schrift
• Linse von Bildern und Symbolen
• Linse der Tastatur
• Linse des Layouts
• Objektiv der materiellen Ehrlichkeit
• Linse der Lesbarkeit
• Linse der Struktur
• Linse der Zeit

Sie sollten wissen, dass nicht jedes Objektiv für jedes Design geeignet ist. Während einige auf jedes Design zutreffen können, sind andere eher situativ. Was in einem Design am besten funktioniert, funktioniert möglicherweise nicht in einem anderen.

Die von jedem Objektiv bereitgestellten Fragen sind lediglich ein Hilfsmittel, um Ihnen zu helfen, zu verstehen, welche Probleme auftreten können. Wie immer sollten Sie Ihr Design mit Benutzern testen, um sicherzustellen, dass es für sie verwendbar und zugänglich ist.

Linse der Animation und Effekte

Effektive Animationen können dazu beitragen, eine Seite und eine Marke zum Leben zu erwecken, den Fokus des Benutzers zu lenken und einen Benutzer bei der Orientierung zu unterstützen. Aber Animationen sind ein zweischneidiges Schwert. Der Missbrauch von Animationen kann nicht nur Verwirrung stiften oder ablenken, sondern für manche Benutzer auch tödlich sein.

Schnelle Blinkeffekte (definiert als Blinken mehr als dreimal pro Sekunde) oder hochintensive Effekte und Muster können Anfälle verursachen, die als „lichtempfindliche Epilepsie“ bekannt sind. Lichtempfindlichkeit kann auch Kopfschmerzen, Übelkeit und Schwindel verursachen. Benutzer mit lichtempfindlicher Epilepsie müssen bei der Nutzung des Internets sehr vorsichtig sein, da sie nie wissen, wann etwas einen Anfall verursachen könnte.

Andere Effekte, wie Parallaxe oder Bewegungseffekte, können bei manchen Benutzern Schwindel oder Schwindelgefühle aufgrund von vestibulärer Sensibilität hervorrufen. Das vestibuläre System steuert das Gleichgewicht und den Bewegungssinn einer Person. Wenn dieses System nicht so funktioniert, wie es sollte, verursacht es Schwindel und Übelkeit.

„Stellen Sie sich eine Welt vor, in der Ihr internes Gyroskop nicht richtig funktioniert. Ganz ähnlich wie bei einem Rausch, scheinen sich die Dinge von selbst zu bewegen, deine Füße scheinen nie ganz stabil unter dir zu sein und deine Sinne bewegen sich schneller oder langsamer als dein Körper.“

— Eine Einführung in vestibuläre Störungen

Ständige Animationen oder Bewegungen können Benutzer auch ablenken, insbesondere für Benutzer, die Konzentrationsschwierigkeiten haben. GIFs sind besonders problematisch, da unsere Augen von Bewegung angezogen werden, was es leicht macht, von allem abgelenkt zu werden, das ständig aktualisiert oder bewegt wird.

Das soll nicht heißen, dass Animation schlecht ist und Sie sie nicht verwenden sollten. Stattdessen sollten Sie verstehen, warum Sie die Animation verwenden und wie Sie sicherere Animationen entwerfen können. Im Allgemeinen sollten Sie versuchen, Animationen zu entwerfen, die kleine Entfernungen abdecken, die Richtung und Geschwindigkeit anderer sich bewegender Objekte (einschließlich Bildlauf) anpassen und relativ klein für die Bildschirmgröße sind.

Sie sollten auch Steuerelemente oder Optionen bereitstellen, um die Erfahrung für den Benutzer bereitzustellen. Mit Slack können Sie beispielsweise animierte Bilder oder Emojis sowohl als globale Einstellung als auch auf Bildbasis ausblenden.

Um das Lens of Animation and Effects zu verwenden, stellen Sie sich folgende Fragen:

• Gibt es irgendwelche Effekte, die einen Anfall verursachen könnten?
• Gibt es Animationen oder Effekte, die durch Bewegung Schwindel oder Schwindel verursachen könnten?
• Gibt es Animationen, die durch ständige Bewegung, Blinken oder automatische Aktualisierung ablenken könnten?
• Ist es möglich, Steuerelemente oder Optionen zum Stoppen, Anhalten, Ausblenden oder Ändern der Häufigkeit von Animationen oder Effekten bereitzustellen?

Objektiv von Audio und Video

Das automatische Abspielen von Videos und Audio kann ziemlich nervig sein. Sie brechen nicht nur die Konzentration eines Benutzers, sondern zwingen den Benutzer auch, die anstößigen Medien zu jagen und sie stumm zu schalten oder zu stoppen. Als allgemeine Regel sollten Sie Medien nicht automatisch wiedergeben.

„Verwenden Sie Autoplay sparsam. Autoplay kann ein leistungsstarkes Engagement-Tool sein, aber es kann Benutzer auch verärgern, wenn unerwünschter Ton abgespielt wird oder sie unnötigen Ressourcenverbrauch (z. B. Daten, Akku) als Ergebnis einer unerwünschten Videowiedergabe wahrnehmen.“

— Google Autoplay-Richtlinien

Sie fragen sich jetzt wahrscheinlich: „Aber was ist, wenn ich das Video automatisch im Hintergrund wiedergebe, es aber stumm lasse?“ Während die Verwendung von Videos als Hintergrund ein wachsender Trend im heutigen Webdesign sein mag, leiden Hintergrundvideos unter den gleichen Problemen wie GIFs und sich ständig bewegende Animationen: Sie können ablenken. Daher sollten Sie Steuerelemente oder Optionen zum Anhalten oder Deaktivieren des Videos bereitstellen.

Neben Steuerelementen sollten Videos Transkripte und/oder Untertitel enthalten, damit die Benutzer den Inhalt so nutzen können, wie es für sie am besten funktioniert. Benutzer, die sehbehindert sind oder die das Video lieber lesen möchten, benötigen ein Transkript, während Benutzer, die das Video nicht anhören können oder wollen, Untertitel benötigen.

Um das Lens of Audio and Video zu verwenden, stellen Sie sich folgende Fragen:

• Gibt es Audio- oder Videodateien, die durch die automatische Wiedergabe lästig sein könnten?
• Ist es möglich, Steuerelemente zum Stoppen, Anhalten oder Ausblenden von Audio oder Videos bereitzustellen, die automatisch abgespielt werden?
• Haben Videos Transkripte und/oder Untertitel?

Linse der Farbe

Farbe spielt eine wichtige Rolle in einem Design. Farben rufen Emotionen, Gefühle und Ideen hervor. Farben können auch dazu beitragen, die Botschaft und Wahrnehmung einer Marke zu stärken. Doch die Kraft der Farben geht verloren, wenn ein Nutzer sie nicht sehen kann oder anders wahrnimmt.

Farbenblindheit betrifft etwa 1 von 12 Männern und 1 von 200 Frauen. Deuteranopie (Rot-Grün-Farbenblindheit) ist die häufigste Form der Farbenblindheit und betrifft etwa 6 % der Männer. Benutzer mit Rot-Grün-Farbenblindheit nehmen Rot, Grün und Orange typischerweise als gelblich wahr.

Die Farbbedeutung ist auch für internationale Benutzer problematisch. Farben haben in verschiedenen Ländern und Kulturen unterschiedliche Bedeutungen. In westlichen Kulturen wird Rot typischerweise verwendet, um negative Trends und grüne positive Trends darzustellen, aber das Gegenteil ist in östlichen und asiatischen Kulturen der Fall.

Da Farben und ihre Bedeutung entweder durch kulturelle Unterschiede oder Farbenblindheit verloren gehen können, sollten Sie immer eine nicht farbliche Kennung hinzufügen. Identifikatoren wie Symbole oder Textbeschreibungen können helfen, kulturelle Unterschiede zu überbrücken, während Muster gut funktionieren, um zwischen Farben zu unterscheiden.

Übersättigte Farben, kontrastreiche Farben und sogar nur die Farbe Gelb können für einige Benutzer unangenehm und beunruhigend sein, insbesondere für diejenigen im Autismus-Spektrum. Es ist am besten, hohe Konzentrationen dieser Art von Farben zu vermeiden, damit sich die Benutzer wohl fühlen.

Ein schlechter Kontrast zwischen Vorder- und Hintergrundfarben erschwert die Sicht für Benutzer mit Sehbehinderung, die einen Low-End-Monitor verwenden oder die sich nur in direktem Sonnenlicht befinden. Alle Texte, Symbole und alle Fokusindikatoren, die für Benutzer verwendet werden, die eine Tastatur verwenden, sollten ein Mindestkontrastverhältnis von 4,5:1 zur Hintergrundfarbe aufweisen.

Sie sollten auch sicherstellen, dass Ihr Design und Ihre Farben in verschiedenen Einstellungen des Windows-Modus mit hohem Kontrast gut funktionieren. Eine häufige Gefahr besteht darin, dass Text auf bestimmten Hintergründen mit hohem Kontrastmodus unsichtbar wird.

Um die Lens of Color zu verwenden, stellen Sie sich diese Fragen:

• Wenn die Farbe aus dem Design entfernt würde, welche Bedeutung würde verloren gehen?
• Wie könnte ich Bedeutung vermitteln, ohne Farbe zu verwenden?
• Sind Farben übersättigt oder weisen einen hohen Kontrast auf, der dazu führen könnte, dass Benutzer überstimuliert werden oder sich unwohl fühlen?
• Entspricht die Vorder- und Hintergrundfarbe aller Texte, Symbole und Fokusindikatoren den Richtlinien für das Kontrastverhältnis von 4,5:1?

Linse der Kontrollen

Steuerelemente, auch „interaktiver Inhalt“ genannt, sind alle UI-Elemente, mit denen der Benutzer interagieren kann, seien es Schaltflächen, Links, Eingaben oder beliebige HTML-Elemente mit einem Ereignis-Listener. Zu kleine oder zu dicht beieinander liegende Steuerelemente können den Benutzern viele Probleme bereiten.

Kleine Steuerelemente lassen sich nur schwer anklicken für Benutzer, die mit einem Zeiger nicht genau arbeiten können, wie z. Die Standardgröße von Checkboxen und Radiobuttons beispielsweise kann ältere Nutzer vor Probleme stellen. Selbst wenn ein Label bereitgestellt wird, auf das stattdessen geklickt werden könnte, wissen nicht alle Benutzer, dass sie dies tun können.

Bedienelemente, die zu nahe beieinander liegen, können Benutzern von Touchscreens Probleme bereiten. Die Finger sind groß und es ist schwierig, präzise zu sein. Das versehentliche Berühren des falschen Steuerelements kann zu Frustration führen, insbesondere wenn dieses Steuerelement Sie wegnavigiert oder dazu führt, dass Sie Ihren Kontext verlieren.

Steuerelemente, die in einem anderen Steuerelement verschachtelt sind, können ebenfalls zu Berührungsfehlern beitragen. Es ist nicht nur in der HTML-Spezifikation nicht erlaubt, es erleichtert auch die versehentliche Auswahl des übergeordneten Steuerelements anstelle des gewünschten.

Um Benutzern genug Platz zu geben, um ein Steuerelement genau auszuwählen, beträgt die empfohlene Mindestgröße für ein Steuerelement 34 x 34 geräteunabhängige Pixel, aber Google empfiehlt mindestens 48 x 48 Pixel, während die WCAG-Spezifikation mindestens 44 x 44 Pixel empfiehlt. Diese Größe umfasst auch alle Polsterungen, die das Steuerelement hat. Ein Steuerelement könnte also visuell 24 x 24 Pixel groß sein, aber mit zusätzlichen 10 Pixeln Polsterung auf allen Seiten würde es auf 44 x 44 Pixel kommen.

Es wird außerdem empfohlen, die Bedienelemente weit genug voneinander entfernt zu platzieren, um Berührungsfehler zu reduzieren. Microsoft empfiehlt einen Abstand von mindestens 8 Pixeln, während Google einen Abstand von Steuerelementen von mindestens 32 Pixeln empfiehlt.

Steuerelemente sollten auch eine sichtbare Textbeschriftung haben. Screenreader benötigen nicht nur die Textbezeichnung, um zu wissen, was das Steuerelement tut, sondern es hat sich gezeigt, dass Textbezeichnungen allen Benutzern helfen, den Zweck eines Steuerelements besser zu verstehen. Dies ist besonders wichtig für Formulareingaben und Symbole.

Um das Lens of Controls zu verwenden, stellen Sie sich diese Fragen:

• Sind Bedienelemente nicht groß genug, um sie zu berühren?
• Sind irgendwelche Bedienelemente zu nahe beieinander, sodass man leicht das falsche berühren könnte?
• Gibt es Steuerelemente innerhalb eines anderen Steuerelements oder anklickbaren Bereichs?
• Haben alle Bedienelemente eine sichtbare Textbeschriftung?

Linse der Schriftart

In den Anfängen des Webs gestalteten wir Webseiten mit einer Schriftgröße zwischen 9 und 14 Pixel. Das hat damals gut geklappt, da Monitore eine relativ bekannte Bildschirmgröße hatten. Wir haben das Design so konzipiert, dass das Browserfenster eine Konstante ist, etwas, das nicht geändert werden kann.

Die Technik ist heute ganz anders als vor 20 Jahren. Heutzutage können Browser auf jedem Gerät jeder Größe verwendet werden, von einer kleinen Uhr bis zu einem riesigen 4K-Bildschirm. Wir können für die Gestaltung unserer Seiten keine festen Schriftgrößen mehr verwenden. Schriftgrößen müssen so ansprechend sein wie das Design selbst.

Nicht nur die Schriftgrößen sollten ansprechend sein, sondern das Design sollte auch flexibel genug sein, um Benutzern zu ermöglichen, die Schriftgröße, Zeilenhöhe oder den Buchstabenabstand an ein angenehmes Leseniveau anzupassen. Viele Benutzer verwenden benutzerdefiniertes CSS, das ihnen hilft, ein besseres Leseerlebnis zu haben.

Die Schrift selbst sollte gut lesbar sein. Sie fragen sich vielleicht, ob eine Schriftart besser lesbar ist als eine andere. Die Wahrheit ist, dass die Schriftart keinen wirklichen Einfluss auf die Lesbarkeit hat. Stattdessen spielt der Schriftstil eine wichtige Rolle für die Lesbarkeit einer Schrift.

Dekorative oder kursive Schriftarten sind für viele Benutzer schwieriger zu lesen, aber besonders problematisch für Benutzer mit Legasthenie. Kleine Schriftgrößen, kursiver Text und Text in Großbuchstaben sind ebenfalls schwierig für Benutzer. Insgesamt können größerer Text, kürzere Zeilenlängen, größere Zeilenhöhen und größere Buchstabenabstände allen Benutzern helfen, ein besseres Leseerlebnis zu haben.

Um das Lens of Font zu verwenden, stellen Sie sich diese Fragen:

• Ist das Design flexibel genug, dass die Schriftart vom Benutzer auf ein angenehmes Leseniveau geändert werden kann?
• Ist der Schriftstil gut lesbar?

Objektiv von Bildern und Symbolen

Sie sagen: „Ein Bild sagt mehr als tausend Worte.“ Trotzdem, ein Bild, das man nicht sehen kann, macht sprachlos, oder?

Bilder können in einem Design verwendet werden, um eine bestimmte Bedeutung oder ein bestimmtes Gefühl zu vermitteln. In anderen Fällen können sie verwendet werden, um komplexe Ideen zu vereinfachen. Was auch immer für das Bild zutrifft, einem Benutzer, der einen Bildschirmleser verwendet, muss gesagt werden, was die Bedeutung des Bildes ist.

Als Designer verstehen Sie am besten die Bedeutung oder Information, die das Bild vermittelt. Daher sollten Sie das Design mit diesen Informationen versehen, damit sie später nicht ausgelassen oder falsch interpretiert werden. Dies wird verwendet, um den Alt-Text für das Bild zu erstellen.

Wie Sie ein Bild beschreiben, hängt ganz vom Kontext ab oder davon, wie viele Textinformationen bereits verfügbar sind, die die Informationen beschreiben. Es hängt auch davon ab, ob das Bild nur der Dekoration dient, eine Bedeutung vermittelt oder Text enthält.

„Man beschreibt fast nie, wie das Bild aussieht, sondern erklärt die Informationen, die das Bild enthält.“

— Fünf goldene Regeln für konformen Alt-Text

Da es schwierig sein kann, ein Bild zu beschreiben, gibt es einen praktischen Entscheidungsbaum, der bei der Entscheidung hilft. Im Allgemeinen sind keine weiteren Informationen erforderlich, wenn das Bild dekorativ ist oder umgebender Text die Informationen des Bildes bereits beschreibt. Andernfalls sollten Sie die Informationen des Bildes beschreiben. Wenn das Bild Text enthält, wiederholen Sie den Text auch in der Beschreibung.

Beschreibungen sollten prägnant sein. Es wird empfohlen, nicht mehr als zwei Sätze zu verwenden, aber streben Sie nach Möglichkeit einen prägnanten Satz an. Dadurch können Benutzer das Bild schnell verstehen, ohne sich eine lange Beschreibung anhören zu müssen.

Wenn Sie beispielsweise dieses Bild für einen Screenreader beschreiben müssten, was würden Sie sagen?

Da wir die Informationen des Bildes und nicht das Bild selbst beschreiben, könnte die Beschreibung Vincent van Goghs Sternennacht sein, da es keinen anderen umgebenden Kontext gibt, der es beschreibt. Was Sie nicht schreiben sollten, ist eine Beschreibung des Stils des Gemäldes oder wie das Bild aussieht.

Wenn die Informationen des Bildes eine längere Beschreibung erfordern würden, z. B. ein komplexes Diagramm, sollten Sie diese Beschreibung nicht in den Alt-Text einfügen. Stattdessen sollten Sie immer noch eine kurze Beschreibung für den Alt-Text verwenden und dann die lange Beschreibung entweder als Bildunterschrift oder als Link zu einer anderen Seite bereitstellen.

Auf diese Weise können Benutzer immer noch schnell die wichtigsten Informationen erhalten, aber die Möglichkeit haben, sich weiter zu vertiefen, wenn sie dies wünschen. Wenn es sich bei dem Bild um ein Diagramm handelt, sollten Sie die Daten des Diagramms so wiederholen, wie Sie es für Text im Bild tun würden.

Wenn die Plattform, für die Sie entwerfen, es Benutzern ermöglicht, Bilder hochzuladen, sollten Sie dem Benutzer eine Möglichkeit bieten, den Alt-Text zusammen mit dem Bild einzugeben. Beispielsweise erlaubt Twitter seinen Benutzern, Alt-Text zu schreiben, wenn sie ein Bild in einen Tweet hochladen.

Um die Linse von Bildern und Symbolen zu verwenden, stellen Sie sich diese Fragen:

• Enthält ein Bild Informationen, die verloren gehen würden, wenn es nicht sichtbar wäre?
• Wie könnte ich die Informationen auf nicht-visuelle Weise bereitstellen?
• Wenn das Bild vom Benutzer gesteuert wird, ist es möglich, ihm eine Möglichkeit zu bieten, die Alternativtextbeschreibung einzugeben?

Objektiv der Tastatur

Die Zugänglichkeit der Tastatur gehört zu den wichtigsten Aspekten eines barrierefreien Designs, wird aber auch am häufigsten übersehen.

Es gibt viele Gründe, warum ein Benutzer eine Tastatur anstelle einer Maus verwenden würde. Benutzer, die einen Bildschirmleser verwenden, verwenden die Tastatur, um die Seite zu lesen. Ein Benutzer mit Zittern kann eine Tastatur verwenden, da sie eine bessere Genauigkeit als eine Maus bietet. Selbst Power-User werden eine Tastatur verwenden, weil sie schneller und effizienter ist.

Ein Benutzer, der eine Tastatur verwendet, verwendet normalerweise die Tabulatortaste, um nacheinander zu jedem Steuerelement zu navigieren. Eine logische Reihenfolge für die Tab-Reihenfolge hilft Benutzern sehr dabei, zu wissen, wohin sie der nächste Tastendruck führen wird. In westlichen Kulturen bedeutet dies normalerweise von links nach rechts, von oben nach unten. Unerwartete Tab-Reihenfolgen führen dazu, dass Benutzer verloren gehen und hektisch suchen müssen, wohin der Fokus gegangen ist.

Sequenzielle Tab-Reihenfolge bedeutet auch, dass sie alle Steuerelemente durchlaufen müssen, die sich vor dem gewünschten befinden. Wenn diese Steuerung Dutzende oder Hunderte von Tastenanschlägen entfernt ist, kann dies ein echter Schmerzpunkt für den Benutzer sein.

Indem wir die wichtigsten Benutzerabläufe weiter oben in der Tab-Reihenfolge platzieren, können wir dazu beitragen, dass unsere Benutzer effizienter und effektiver arbeiten. Dies ist jedoch nicht immer möglich oder praktikabel. In diesen Fällen kann die Bereitstellung einer Möglichkeit, schnell zu einem bestimmten Ablauf oder Inhalt zu springen, immer noch effizient sein. Aus diesem Grund sind „Zum Inhalt springen“-Links hilfreich.

Ein gutes Beispiel hierfür ist Facebook, das ein Tastaturnavigationsmenü bereitstellt, mit dem Benutzer zu bestimmten Abschnitten der Website springen können. Dies beschleunigt die Interaktion eines Benutzers mit der Seite und den gewünschten Inhalten erheblich.

Beim Navigieren durch ein Design sollten Fokusstile immer sichtbar sein, sonst kann sich ein Benutzer leicht verirren. Genau wie eine unerwartete Tab-Reihenfolge führt das Fehlen guter Fokusindikatoren dazu, dass Benutzer nicht wissen, was gerade fokussiert ist, und die Seite scannen müssen.

Das Ändern des Aussehens der Standardfokusanzeige kann manchmal die Erfahrung für Benutzer verbessern. Ein guter Fokusindikator verlässt sich nicht nur auf Farbe, um den Fokus anzuzeigen (Lens of Color), und sollte deutlich genug sein, damit der Benutzer ihn leicht finden kann. Beispielsweise ist ein blauer Fokusring um eine ähnlich gefärbte blaue Taste möglicherweise nicht visuell erkennbar, um zu erkennen, dass er fokussiert ist.

Obwohl sich diese Linse auf die Zugänglichkeit der Tastatur konzentriert, ist es wichtig zu beachten, dass sie für jede Art und Weise gilt, wie ein Benutzer ohne Maus mit einer Website interagieren kann. Geräte wie Mundstifte, Schalterzugriffstasten, Saug- und Zugtasten und Eye-Tracking-Software erfordern alle, dass die Seite über die Tastatur zugänglich ist.

Indem Sie die Barrierefreiheit über die Tastatur verbessern, ermöglichen Sie einer Vielzahl von Benutzern einen besseren Zugriff auf Ihre Website.

Stellen Sie sich die folgenden Fragen, um das Objektiv der Tastatur zu verwenden:

• Welche Reihenfolge der Tastaturnavigation ist für das Design am sinnvollsten?
• Wie kann ein Tastaturbenutzer auf dem schnellsten Weg zu dem gelangen, was er möchte?
• Ist die Fokusanzeige immer sichtbar und visuell deutlich?

Linse des Layouts

Das Layout trägt viel zur Benutzerfreundlichkeit einer Website bei. Ein leicht verständliches Layout mit leicht zu findenden Inhalten macht den Unterschied für Ihre Benutzer. Ein Layout sollte für den Benutzer eine sinnvolle und logische Abfolge haben.

Mit dem Aufkommen von CSS Grid ist es einfacher als je zuvor, das Layout so zu ändern, dass es basierend auf dem verfügbaren Platz aussagekräftiger ist. Das Ändern des visuellen Layouts führt jedoch zu Problemen für Benutzer, die sich auf das strukturelle Layout der Seite verlassen.

Das strukturelle Layout wird von Screenreadern und Benutzern verwendet, die eine Tastatur verwenden. Wenn sich das visuelle Layout ändert, aber nicht das zugrunde liegende strukturelle Layout, können diese Benutzer verwirrt werden, da ihre Tab-Reihenfolge nicht mehr logisch ist. Wenn Sie das visuelle Layout ändern müssen, sollten Sie dies tun, indem Sie das strukturelle Layout ändern, damit Benutzer, die eine Tastatur verwenden, eine sequentielle und logische Tab-Reihenfolge beibehalten.

Das Layout sollte auf mindestens 320 Pixel in der Größe anpassbar und flexibel sein, ohne horizontale Bildlaufleisten, damit es bequem auf einem Telefon angezeigt werden kann. Das Layout sollte auch flexibel genug sein, um auf 400 % vergrößert werden zu können (ebenfalls ohne horizontale Bildlaufleisten), für Benutzer, die die Schriftgröße für ein besseres Leseerlebnis erhöhen müssen.

Benutzer, die eine Bildschirmlupe verwenden, profitieren davon, wenn sich verwandte Inhalte in unmittelbarer Nähe zueinander befinden. Eine Bildschirmlupe bietet dem Benutzer nur eine kleine Ansicht des gesamten Layouts, sodass Inhalte, die verwandt, aber weit entfernt sind, oder sich weit entfernt vom Ort der Interaktion ändern, schwer zu finden sind und unbemerkt bleiben können.

Um das Lens of Layout zu verwenden, stellen Sie sich folgende Fragen:

• Hat das Layout eine sinnvolle und logische Abfolge?
• Was soll mit dem Layout passieren, wenn es auf einem kleinen Bildschirm angezeigt oder auf 400 % vergrößert wird?
• Befinden sich Inhalte, die durch Benutzerinteraktion zusammenhängen oder sich ändern, in unmittelbarer Nähe zueinander?

Linse der materiellen Ehrlichkeit

Materialehrlichkeit ist ein architektonischer Designwert, der besagt, dass ein Material ehrlich zu sich selbst sein und nicht als Ersatz für ein anderes Material verwendet werden sollte. Das bedeutet, dass Beton wie Beton aussehen und nicht wie Ziegel gestrichen oder geformt werden sollte.

Material Ehrlichkeit schätzt und feiert die einzigartigen Eigenschaften und Eigenschaften jedes Materials. Ein Architekt, der Materialehrlichkeit befolgt, weiß, wann welches Material verwendet werden sollte und wie er es verwenden kann, ohne sich selbst zu beflecken.

Materielle Ehrlichkeit ist jedoch keine feste Regel. Es liegt auf einem Kontinuum. Wie alle Werte darf man sie brechen, wenn man sie versteht. Wie das Sprichwort sagt, sind sie „mehr das, was man ‚Richtlinien‘ nennen würde, als tatsächliche Regeln“.

Auf das Webdesign angewendet bedeutet Material Ehrlichkeit, dass ein Element oder eine Komponente nicht so aussehen, sich verhalten oder funktionieren sollte, als wäre es ein anderes Element oder eine andere Komponente. Dies würde den Benutzer betrügen und zu Verwirrung führen. Ein gängiges Beispiel hierfür sind Schaltflächen, die wie Links aussehen, oder Links, die wie Schaltflächen aussehen.

Links und Schaltflächen haben unterschiedliche Verhaltensweisen und Angebote. Ein Link wird mit der Eingabetaste aktiviert, führt Sie normalerweise zu einer anderen Seite und verfügt über ein spezielles Kontextmenü bei Rechtsklick. Schaltflächen werden mit der Leertaste aktiviert, die hauptsächlich zum Auslösen von Interaktionen auf der aktuellen Seite verwendet werden, und haben kein solches Kontextmenü.

Wenn ein Link so gestaltet ist, dass er wie eine Schaltfläche aussieht oder umgekehrt, könnte ein Benutzer verwirrt werden, da er sich nicht so verhält und funktioniert, wie er aussieht. Wenn der „Button“ den Benutzer unerwartet wegnavigiert, kann er frustriert sein, wenn er dabei Daten verliert.

„Auf den ersten Blick sieht alles gut aus, hält aber einer genauen Überprüfung nicht stand. Sobald eine solche Website durch die tatsächliche Nutzung über eine Reihe von Browsern einem Stresstest unterzogen wird, bröckelt die Fassade.“

— Belastbares Webdesign

Am problematischsten wird dies, wenn ein Link und eine Schaltfläche gleich gestaltet sind und nebeneinander platziert werden. Da es keinen Unterschied zwischen den beiden gibt, kann ein Benutzer versehentlich navigieren, wenn er dachte, dass er es nicht tun würde.

Wenn sich eine Komponente anders als erwartet verhält, kann dies leicht zu Problemen für Benutzer führen, die eine Tastatur oder einen Bildschirmleser verwenden. Ein solches Beispiel ist ein Autocomplete-Menü, das mehr ist als ein Autocomplete-Menü.

Die automatische Vervollständigung wird verwendet, um den Rest eines Wortes vorzuschlagen oder vorherzusagen, den ein Benutzer eingibt. Ein Autocomplete-Menü ermöglicht es einem Benutzer, aus einer großen Liste von Optionen auszuwählen, wenn nicht alle Optionen angezeigt werden können.

Ein Autovervollständigungsmenü ist normalerweise an ein Eingabefeld angehängt und wird mit den Aufwärts- und Abwärtspfeiltasten navigiert, wobei der Fokus innerhalb des Eingabefelds bleibt. Wenn ein Benutzer eine Option aus der Liste auswählt, überschreibt diese Option den Text im Eingabefeld. Menüs mit automatischer Vervollständigung sind als reine Textlisten gedacht.

Das Problem tritt auf, wenn ein Autocomplete-Menü anfängt, mehr Verhalten zu erlangen. Sie können nicht nur eine Option aus der Liste auswählen, sondern sie auch bearbeiten, löschen oder sogar Abschnitte erweitern oder reduzieren. Das Autocomplete-Menü ist nicht mehr nur eine einfache Liste mit auswählbarem Text.

Die hinzugefügten Verhaltensweisen bedeuten nicht mehr, dass Sie einfach die Aufwärts- und Abwärtspfeile verwenden können, um eine Option auszuwählen. Jede Option hat jetzt mehr als eine Aktion, sodass ein Benutzer in der Lage sein muss, zwei Dimensionen zu durchqueren, anstatt nur eine. Dies bedeutet, dass ein Benutzer, der eine Tastatur verwendet, bei der Bedienung der Komponente verwirrt werden könnte.

Screenreader leiden am meisten unter dieser Verhaltensänderung, da es keine einfache Möglichkeit gibt, ihnen dabei zu helfen, sie zu verstehen. Es ist viel Arbeit erforderlich, um sicherzustellen, dass das Menü für einen Bildschirmleser zugänglich ist, indem nicht standardmäßige Mittel verwendet werden. Als solches kann dies zu einer unterdurchschnittlichen oder unzugänglichen Erfahrung für sie führen.

Um diese Probleme zu vermeiden, ist es am besten, ehrlich zum Benutzer und zum Design zu sein. Anstatt zwei unterschiedliche Verhaltensweisen zu kombinieren (ein Menü zur automatischen Vervollständigung und Funktionen zum Bearbeiten und Löschen), belassen Sie sie als zwei separate Verhaltensweisen. Verwenden Sie ein Autocomplete-Menü, um einfach den Namen eines Benutzers automatisch zu vervollständigen, und haben Sie eine andere Komponente oder Seite, um Benutzer zu bearbeiten und zu löschen.

Stellen Sie sich folgende Fragen, um die Linse der materiellen Ehrlichkeit zu verwenden:

• Ist das Design ehrlich zum Benutzer?
• Gibt es Elemente, die sich wie andere Elemente verhalten, aussehen oder funktionieren?
• Gibt es Komponenten, die unterschiedliche Verhaltensweisen in einer einzigen Komponente kombinieren? Macht dies die Komponente materiell unehrlich?

Linse der Lesbarkeit

Haben Sie jemals ein Buch in die Hand genommen, nur um ein paar Absätze oder Seiten hineinzubekommen, und wollten es aufgeben, weil der Text zu schwer zu lesen war? Schwer lesbare Inhalte sind mental anstrengend und ermüdend.

Satzlänge, Absatzlänge und Komplexität der Sprache tragen alle dazu bei, wie lesbar der Text ist. Komplexe Sprache kann Probleme für Benutzer darstellen, insbesondere für Benutzer mit kognitiven Behinderungen oder Personen, die die Sprache nicht fließend beherrschen.

Neben der Verwendung einer einfachen und einfachen Sprache sollten Sie sicherstellen, dass sich jeder Absatz auf eine einzelne Idee konzentriert. Ein Absatz mit einer einzigen Idee ist leichter zu merken und zu verdauen. Dasselbe gilt für einen Satz mit weniger Wörtern.

Ein weiterer Beitrag zur Lesbarkeit von Inhalten ist die Länge einer Zeile. Die ideale Zeilenlänge wird oft mit 45 bis 75 Zeichen angegeben. Eine zu lange Linie führt dazu, dass Benutzer die Konzentration verlieren und es schwieriger machen, korrekt zur nächsten Zeile zu wechseln, während eine zu kurze Linie dazu führt, dass Benutzer zu oft springen, was zu Ermüdung der Augen führt.

„Das Unterbewusstsein wird aktiviert, wenn man zur nächsten Zeile springt. Am Anfang jeder neuen Zeile ist der Leser fokussiert, aber dieser Fokus lässt über die Dauer der Zeile allmählich nach.“

— Typografie: Ein Handbuch des Designs

Sie sollten den Inhalt auch mit Überschriften, Listen oder Bildern aufbrechen, um dem Leser Denkpausen zu geben und unterschiedliche Lernstile zu unterstützen. Verwenden Sie Überschriften, um die Informationen logisch zu gruppieren und zusammenzufassen. Überschriften, Links, Steuerelemente und Beschriftungen sollten klar und aussagekräftig sein, um das Verständnis der Benutzer zu verbessern.

Um die Lesbarkeitslinse zu verwenden, stellen Sie sich folgende Fragen:

• Ist die Sprache klar und einfach?
• Konzentriert sich jeder Absatz auf eine einzelne Idee?
• Gibt es lange Absätze oder lange Blöcke mit ununterbrochenem Text?
• Sind alle Überschriften, Links, Steuerelemente und Beschriftungen klar und aussagekräftig?

Linse der Struktur

Wie in der Linse des Layouts erwähnt, wird das strukturelle Layout von Bildschirmlesegeräten und Benutzern verwendet, die eine Tastatur verwenden. Während sich das Lens of Layout auf das visuelle Layout konzentrierte, konzentriert sich das Lens of Structure auf das strukturelle Layout oder das zugrunde liegende HTML und die Semantik des Designs.

Als Designer schreiben Sie möglicherweise nicht das strukturelle Layout Ihrer Designs. Dies sollte Sie jedoch nicht davon abhalten, darüber nachzudenken, wie Ihr Design letztendlich strukturiert sein wird. Andernfalls kann Ihr Design zu einem unzugänglichen Erlebnis für einen Screenreader führen.

Nehmen Sie zum Beispiel ein Design für ein Single-Elimination-Turnier-Bracket.

Woher wissen Sie, ob dieses Design für einen Benutzer zugänglich ist, der einen Bildschirmleser verwendet? Ohne Struktur und Semantik zu verstehen, vielleicht nicht. So wie es aussieht, würde das Design wahrscheinlich zu einer unzugänglichen Erfahrung für einen Benutzer führen, der einen Bildschirmleser verwendet.

Um zu verstehen, warum das so ist, müssen wir zunächst verstehen, dass ein Screenreader eine Seite und ihren Inhalt in sequenzieller Reihenfolge liest. Das bedeutet, dass jeder Name in der ersten Spalte des Turniers gelesen wird, gefolgt von allen Namen in der zweiten Spalte, dann der dritten und dann der letzten.

„George, Fred, Linus, Lucy, Jack, Jill, Fred, Ginger, George, Lucy, Jack, Ginger, George, Ginger, Ginger.“

Wenn Sie nur eine Liste mit scheinbar zufälligen Namen hätten, wie würden Sie die Ergebnisse des Turniers interpretieren? Können Sie sagen, wer das Turnier gewonnen hat? Oder wer hat Spiel 6 gewonnen?

Mit nichts mehr zu arbeiten, wäre ein Benutzer, der einen Bildschirmleser verwendet, wahrscheinlich etwas verwirrt über die Ergebnisse. Um die visuelle Gestaltung nachvollziehen zu können, müssen wir dem Nutzer weitere Informationen in der strukturellen Gestaltung zur Verfügung stellen.

Das bedeutet, dass Sie als Designer wissen müssen, wie ein Screenreader mit den HTML-Elementen auf einer Seite interagiert, damit Sie wissen, wie Sie das Erlebnis verbessern können.

• Landmark-Elemente (Kopf-, Navigations-, Haupt- und Fußzeile)
  Allow a screen reader to jump to important sections in the design.
• Headings ( h1 → h6 )
  Allow a screen reader to scan the page and get a high level overview. Screen readers can also jump to any heading.
• Lists ( ul and ol )
  Group related items together, and allow a screen reader to easily jump from one item to another.
• Buttons
  Trigger interactions on the current page.
• Links
  Navigate or retrieve information.
• Form labels
  Tell screen readers what each form input is.

Knowing this, how might we provide more meaning to a user using a screen reader?

To start, we could group each column of the tournament into rounds and use headings to label each round. This way, a screen reader would understand when a new round takes place.

Next, we could help the user understand which players are playing against each other each game. We can again use headings to label each game, allowing them to find any game they might be interested in.

By just adding headings, the content would read as follows:

“__Round 1, Game 1__, George, Fred, __Game 2__, Linus, Lucy, __Game 3__, Jack, Jill, __Game 4__, Fred, Ginger, __Round 2, Game 5__, George, Lucy, __Game 6__, Jack, Ginger, __Round 3__, __Game 7__, George, Ginger, __Winner__, Ginger.”

This is already a lot more understandable than before.

The information still doesn't answer who won a game though. To know that, you'd have to understand which game a winner plays next to see who won the previous game. For example, you'd have to know that the winner of game four plays in game six to know who advanced from game four.

We can further enhance the experience by informing the user who won each game so they don't have to go hunting for it. Putting the text “(winner)” after the person who won the round would suffice.

We should also further group the games and rounds together using lists. Lists provide the structural semantics of the design, essentially informing the user of the connected nodes from the visual design.

If we translate this back into a visual design, the result could look as follows:

Since the headings and winner text are redundant in the visual design, you could hide them just from visual users so the end visual result looks just like the first design.

“If the end result is visually the same as where we started, why did we go through all this?” You may ask.

The reason is that you should always annotate your design with all the necessary structural design requirements needed for a better screen reader experience. This way, the person who implements the design knows to add them. If you had just handed the first design to the implementer, it would more than likely end up inaccessible.

To use the Lens of Structure , ask yourself these questions:

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens Of Time

Periodically in a design you may need to limit the amount of time a user can spend on a task. Sometimes it may be for security reasons, such as a session timeout. Other times it could be due to a non-functional requirement, such as a time constrained test.

Whatever the reason, you should understand that some users may need more time in order finish the task. Some users might need more time to understand the content, others might not be able to perform the task quickly, and a lot of the time they could just have been interrupted.

“The designer should assume that people will be interrupted during their activities”

— The Design of Everyday Things

Users who need more time to perform an action should be able to adjust or remove a time limit when possible. For example, with a session timeout you could alert the user when their session is about to expire and allow them to extend it.

To use the Lens of Time , ask yourself this question:

• Is it possible to provide controls to adjust or remove time limits?

Bringing It All Together

So now that you've learned about the different lenses of accessibility through which you can view your design, what do you do with them?

The lenses can be used at any point in the design process, even after the design has been shipped to your users. Just start with a few of them at hand, and one at a time carefully analyze the design through a lens.

Ask yourself the questions and see if anything should be adjusted to better meet the needs of a user. As you slowly make changes, bring in other lenses and repeat the process.

By looking through your design one lens at a time, you'll be able to refine the experience to better meet users' needs. As you are more inclusive to the needs of your users, you will create a more accessible design for all your users.

Using lenses and insightful questions to examine principles of accessibility was heavily influenced by Jesse Schell and his book “The Art of Game Design: A Book of Lenses.”