Denken Sie an Ihre Lieblingswebsite oder ‑app. Was macht sie zu Ihrer Lieblingswebsite oder ‑app? Denken Sie nun an eine Website oder App, die Ihnen nicht gefällt. Was gefällt Ihnen daran nicht? Die Interaktion von Nutzern mit Ihrem Design und ihre Erfahrung auf Ihrer Website und in Ihrer App kann variieren.
Die Erfahrung kann sich je nach Tageszeit, verwendetem Gerät, Schlafmenge in der Nacht zuvor, Gesundheitszustand und Verwendung von unterstützenden Technologien ändern. Bei fast acht Milliarden Menschen weltweit sind die Möglichkeiten, wie Menschen Ihre Designs nutzen und erleben, unbegrenzt.
Inklusives Design
Wie können wir alle potenziellen Nutzeranforderungen gleichzeitig erfüllen? Geben Sie „inklusives Design“ ein. Inklusives Design basiert auf einem nutzerorientierten Ansatz, bei dem Inklusivität, Nutzerfreundlichkeit und Barrierefreiheit ineinandergreifen.
Im Gegensatz zum universellen Design, bei dem es um ein einzelnes Design geht, das so viele Menschen wie möglich nutzen können, konzentrieren sich die Grundsätze des inklusiven Designs auf das Design für eine bestimmte Person oder einen bestimmten Anwendungsfall und die anschließende Ausweitung dieses Designs auf andere.
Es gibt sieben inklusive Designprinzipien, die sich auf die Barrierefreiheit konzentrieren:
- Vergleichbare Nutzerfreundlichkeit: Sorgen Sie dafür, dass Ihre Benutzeroberfläche für alle Nutzer gleich gut nutzbar ist. So können sie Aufgaben auf eine Weise erledigen, die ihren Bedürfnissen entspricht, ohne die Qualität der Inhalte zu beeinträchtigen.
- Situation berücksichtigen: Achten Sie darauf, dass Ihre Benutzeroberfläche für alle Nutzer einen Mehrwert bietet, unabhängig von ihren Umständen.
- Einheitlichkeit: Verwenden Sie vertraute Konventionen und wenden Sie sie auf logische Weise an.
- Kontrolle geben: Sorgen Sie dafür, dass Nutzer auf Inhalte zugreifen und mit ihnen interagieren können, wie sie es bevorzugen.
- Wahlmöglichkeiten bieten: Bieten Sie Nutzern verschiedene Möglichkeiten, Aufgaben zu erledigen, insbesondere komplexe oder nicht standardmäßige Aufgaben.
- Inhalte priorisieren: Helfen Sie Nutzern, sich auf die wichtigsten Aufgaben, Funktionen und Informationen zu konzentrieren, indem Sie diese Elemente in der bevorzugten Reihenfolge im Inhalt und Layout anordnen.
- Mehrwert schaffen: Überlegen Sie, welchen Zweck und welche Bedeutung die Funktionen haben und wie sie die Nutzerfreundlichkeit für verschiedene Nutzer verbessern.
Nutzeridentitäten:
Bei der Entwicklung eines neuen Designs oder einer neuen Funktion verlassen sich viele Teams auf Nutzer-Personas, um den Prozess zu steuern. Personas sind fiktive Charaktere, die Ihre digitalen Produkte nutzen. Sie basieren häufig auf quantitativer und qualitativer Nutzerforschung.
Personas bieten außerdem eine schnelle und kostengünstige Möglichkeit, diese Funktionen während des Design- und Entwicklungsprozesses zu testen und zu priorisieren. Sie helfen dabei, Entscheidungen in Bezug auf Websitekomponenten zu treffen, indem sie der Diskussion eine Ebene mit realen Überlegungen hinzufügen, um die Strategie abzustimmen und Ziele zu erstellen, die auf bestimmte Nutzergruppen ausgerichtet sind.
Berücksichtigung von Menschen mit Behinderung
„Menschen sind alle unterschiedlich. Ich kann nur aus meiner Erfahrung sprechen. Wenn Sie eine gehörlose Person treffen, haben Sie eine gehörlose Person getroffen – nicht alle.“
Meryl Evans vom ID24-Vortrag Deaf Tech: Travel Through Time from Past to Future.
Personas können als inklusives Designtool verwendet werden, wenn Sie Menschen mit Behinderungen in Ihre Personas einbeziehen. Dazu gibt es viele verschiedene Möglichkeiten. Sie können Personas für Menschen mit Beeinträchtigungen erstellen, bestehenden Nutzer-Personas Beeinträchtigungen hinzufügen oder sogar ein Persona-Spektrum erstellen, um die dynamische Realität von situationsabhängigen, vorübergehenden und dauerhaften Beeinträchtigungen abzubilden.
Unabhängig davon, wie Sie Menschen mit Behinderungen in Ihre Personas einbeziehen, sollten diese nicht auf echten Personen oder Stereotypen basieren. Personas sind kein Ersatz für Nutzertests.
- Name: Jane Bennet
- Alter: 57 Jahre
- Standort: Essex, Vereinigtes Königreich
- Beruf: UX-Engineer
- Beeinträchtigung: Handzittern aufgrund von Parkinson im jungen Erwachsenenalter
- Ziele: Spracheingabe verwenden, um das Hinzufügen von Codevorschlägen zu vereinfachen; mit minimalem Aufwand online nach Fahrradausrüstung suchen.
- Frustrationen: Websites, die keine reine Tastaturbedienung unterstützen; Apps für das Design mit kleinen Bereichen für die Touch-Interaktion.
Als UX-Entwicklerin entwirft und erstellt Jane Seiten, die für die Relevanz der Website ihres Unternehmens unerlässlich sind. Sie unterstützt den ganzen Tag über viele Teammitglieder. Sie ist die Königin der technischen Problemlösung und die erste Anlaufstelle für alle in der Abteilung, wenn etwas Unerwartetes passiert.
Aufgrund von Tremor hat sie ihre Feinmotorik verloren und es fällt ihr immer schwerer, eine Maus zu verwenden. Sie nutzt die Tastatur immer häufiger, um im Web zu navigieren. Jane hat sich immer für körperliche Fitness eingesetzt. Sie liebt Straßenrennen und BMX. Umso schlimmer war es, als sie letztes Jahr die Diagnose „Parkinson im jungen Erwachsenenalter“ erhielt.
Simulatoren für Behinderungen
Seien Sie äußerst vorsichtig, wenn Sie Simulatoren für Menschen mit Behinderung verwenden, um Personas zu emulieren oder zu ergänzen.
Simulatoren für Menschen mit Behinderung sind ein zweischneidiges Schwert, da sie Sympathie oder Empathie wecken können. Das hängt von der Person, dem Kontext, in dem der Simulator verwendet wird, und vielen anderen unkontrollierbaren Faktoren ab. Viele Befürworter der Barrierefreiheit lehnen die Verwendung von Tools zur Simulation von Behinderungen ab und empfehlen, sich Filme, Demos, Tutorials und andere Inhalte anzusehen, die von Menschen mit Behinderungen erstellt wurden, um aus erster Hand mehr über ihre Erfahrungen zu erfahren.
„Wir müssen ganz ehrlich sein: Simulationsaktivitäten haben keinen Einfluss auf einige der wichtigsten Erkenntnisse, die wir Menschen mit Sehvermögen vermitteln möchten. Blindheit ist nicht das Merkmal, das uns definiert. Die Missverständnisse und geringen Erwartungen an Blinde sind unser größtes Hindernis.
Diese Missverständnisse schaffen künstliche Barrieren, die uns daran hindern, uns voll und ganz einzubringen. Diese falschen Einschränkungen halten uns zurück.“
Mark Riccobono, Präsident der National Federation of the Blind.
Heuristiken zur Barrierefreiheit
Sie sollten Heuristiken in Ihren Workflow einbeziehen, wenn Sie Ihre Personas und Designs erstellen. Heuristiken sind Regeln für das Interaktionsdesign, die 1990 von Jakob Nielsen und Rolf Molich eingeführt wurden. Diese zehn Grundsätze wurden auf der Grundlage jahrelanger Erfahrung im Bereich der Benutzerfreundlichkeit entwickelt und werden seitdem in Design- und Mensch-Computer-Interaktionsprogrammen verwendet.
2019 erstellte und veröffentlichte das Designteam von Deque eine neue Reihe von Heuristiken für digitale Barrierefreiheit. Laut ihrer Studie können bis zu 67% aller Barrierefreiheitsfehler einer Website oder App vermieden werden, wenn Barrierefreiheit Teil des Designprozesses ist. Das ist ein großer Einfluss, der ausgeübt werden kann, bevor auch nur eine Zeile Code geschrieben wird.
Ähnlich wie bei den ursprünglichen Heuristiken gibt es zehn Heuristiken zur Barrierefreiheit, die Sie bei der Planung Ihres Designs berücksichtigen sollten.
- Interaktionsmethoden und ‑modalitäten: Nutzer können effizient mit dem System interagieren und dabei die von ihnen bevorzugte Eingabemethode verwenden (z. B. Maus, Tastatur oder Touch).
- Navigation und Orientierung: Nutzer können jederzeit im System navigieren, Inhalte finden und ihren Standort bestimmen.
- Struktur und Semantik: Nutzer können die Struktur der Inhalte auf jeder Seite nachvollziehen und verstehen, wie sie das System bedienen müssen.
- Fehlervermeidung und Status: Interaktive Steuerelemente haben dauerhafte, aussagekräftige Anleitungen, um Fehler zu vermeiden. Außerdem werden Nutzern klare Fehlerstatus angezeigt, die angeben, welche Probleme vorliegen und wie sie behoben werden können, wenn Fehler zurückgegeben werden.
- Kontrast und Lesbarkeit: Nutzer können Text und andere wichtige Informationen leicht erkennen und lesen.
- Sprache und Lesbarkeit: Nutzer können die Inhalte leicht lesen und verstehen.
- Vorhersagbarkeit und Konsistenz: Nutzer können den Zweck der einzelnen Elemente vorhersagen. Es ist klar, wie sich die einzelnen Elemente auf das Gesamtsystem beziehen.
- Zeit und Aufbewahrung: Nutzer haben genügend Zeit, um ihre Aufgaben zu erledigen, und verlieren keine Informationen, wenn ihre Zeit (d.h. eine Sitzung) abläuft.
- Bewegung und Blinken: Nutzer können Elemente auf der Seite anhalten, die sich bewegen, blinken oder animiert sind. Nutzer dürfen durch diese Elemente nicht abgelenkt oder auf andere Weise beeinträchtigt werden.
- Visuelle und auditive Alternativen: Nutzer können auf textbasierte Alternativen für alle visuellen oder auditiven Inhalte zugreifen, die Informationen vermitteln.
Sobald Sie die Grundlagen dieser Barrierefreiheitsheuristiken verstanden haben, können Sie sie mithilfe des Arbeitsblatts für Barrierefreiheitsheuristiken und der bereitgestellten Anleitung auf eine Persona oder ein Design anwenden. Diese Übung ist aufschlussreicher, wenn Sie mehrere Perspektiven einholen.
Ein Beispiel für eine heuristische Überprüfung der Barrierefreiheit für den Prüfpunkt „Navigation und Orientierung“ könnte so aussehen:
| Prüfpunkte für Navigation und Orientierung | Hervorragend (+2 Punkte) | Bestanden (+1 Punkt) | Nicht bestanden (-1 Punkt) | – (0 Punkte) |
|---|---|---|---|---|
| Wird bei allen aktiven Elementen, wenn sie den Fokus erhalten, eine deutliche, sichtbare Anzeige eingeblendet? | ||||
| Enthält die Seite einen aussagekräftigen Titeltext, in dem zuerst seitenbezogene Informationen stehen? | ||||
| Sind das Seitentitelelement und H1 identisch oder ähnlich? | ||||
| Gibt es aussagekräftige Überschriften für jeden wichtigen Abschnitt? | ||||
| Wird der Zweck der Links allein durch den Linktext oder den unmittelbaren Kontext definiert? | ||||
| Ist ganz oben auf der Seite ein Link zum Überspringen vorhanden, der bei Fokussierung angezeigt wird? | ||||
| Erleichtert die Anordnung der Navigationselemente die Orientierung? |
Nachdem sich alle Teammitglieder die Seite oder Komponente angesehen und ihre heuristische Prüfung der Barrierefreiheit durchgeführt haben, werden die Gesamtzahlen für jeden Prüfpunkt ermittelt. An diesem Punkt können Sie entscheiden, wie Sie die gefundenen Probleme beheben oder Auslassungen korrigieren, die für die digitale Barrierefreiheit von entscheidender Bedeutung sind.
Annotationen zur Barrierefreiheit
Bevor Sie Ihr Design an das Entwicklerteam übergeben, sollten Sie Anmerkungen zur Barrierefreiheit hinzufügen.
Mit Anmerkungen werden im Allgemeinen Creative-Entscheidungen erläutert und verschiedene Aspekte des Designs beschrieben. Bedienungshilfen-Anmerkungen konzentrieren sich auf Bereiche, in denen Entwickler mit Unterstützung des Designteams oder eines auf Bedienungshilfen spezialisierten Experten barrierefreiere programmatische Entscheidungen treffen können.
Anmerkungen zur Barrierefreiheit können in jeder Phase des Designprozesses angewendet werden, von Wireframes bis hin zu High-Fidelity-Modellen. Sie können Nutzerabläufe, bedingte Status und Funktionen enthalten. Sie verwenden häufig Symbole und Labels, um den Prozess zu optimieren und das Design in den Mittelpunkt zu stellen.
Die folgenden Beispiele für Designillustrationen stammen aus dem Barrierefreiheits-Annotationskit von Indeed.com für Figma.
Je nach Designprogramm sollten Sie mehrere Starterkits für Barrierefreiheitsanmerkungen zur Auswahl haben. Alternativ können Sie auch ein eigenes Set erstellen. In beiden Fällen sollten Sie entscheiden, welche Informationen an das Team, das die Aufgabe übernimmt, weitergegeben werden müssen und welches Format am besten geeignet ist.
Hier sind einige Bereiche, die Sie für Anmerkungen zur Barrierefreiheit in Betracht ziehen können:
- Farbe: Geben Sie Kontrastverhältnisse für alle verschiedenen Farbkombinationen in der Palette an.
- Schaltflächen und Links: Identifizieren Sie die Standard-, Hover-, Aktiv-, Fokus- und deaktivierten Status.
- Überspringen von Links: Heben Sie die verborgenen und sichtbaren Designaspekte hervor und geben Sie an, wohin sie auf der Seite verweisen.
- Bilder und Symbole: Wir fügen Empfehlungen für Alternativtext für wichtige Bilder und Symbole hinzu.
- Audio und Video: Bereiche und Links für Untertitel, Transkripte und Audiodeskriptionen hervorheben.
- Überschriften: Fügen Sie programmatische Ebenen hinzu und berücksichtigen Sie alles, was wie eine Überschrift aussieht.
- Landmarks: Heben Sie die verschiedenen Abschnitte des Designs mit HTML oder ARIA hervor.
- Interaktive Komponenten: Anklickbare Elemente, Hover-Effekte und Fokusbereich identifizieren.
- Tastatur: Legen Sie fest, wo der Fokus beginnen soll (Alpha-Stopp) und die folgende Tab-Reihenfolge.
- Formulare: Fügen Sie Feldlabels, Hilfetext, Fehlermeldungen und Erfolgsmeldungen hinzu.
- Barrierefreie Namen: geben an, wie assistive Technologien das Element erkennen sollen.