Denken Sie an Ihre Lieblingswebsite oder ‑app. Was macht sie zu Ihrer Lieblingswebsite oder ‑app? Denken Sie nun an eine Website oder App, die Sie nicht mögen. Was gefällt Ihnen daran nicht? Die Interaktion von Nutzern mit Ihrem Design und ihre Erfahrungen auf Ihrer Website und in Ihrer App können variieren.
Diese Erfahrungen können sich je nach Tageszeit, verwendetem Gerätetyp, ausreichendem Schlaf in der Nacht zuvor, Unwohlsein, Verwendung von Hilfstechnologien und vielen anderen Faktoren ä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 Nutzerbedürfnisse gleichzeitig berücksichtigen? Hier kommt das inklusive Design ins Spiel. Beim inklusiven Design wird ein nutzerorientierter Ansatz verwendet, bei dem Inklusion, Nutzerfreundlichkeit und Barrierefreiheit miteinander verbunden werden.
Anders als beim universellen Design, bei dem ein einzelnes Design im Mittelpunkt steht, das von möglichst vielen Menschen verwendet werden kann, konzentrieren sich die Prinzipien des inklusiven Designs auf das Design für eine bestimmte Person oder einen bestimmten Anwendungsfall und die anschließende Erweiterung dieses Designs auf andere.
Es gibt sieben Prinzipien des inklusiven Designs, die sich auf die Barrierefreiheit konzentrieren:
- _Vergleichbare Nutzungserfahrung bieten_: Die Benutzeroberfläche muss für alle Nutzer gleich sein, damit sie Aufgaben auf eine Weise erledigen können, die ihren Bedürfnissen entspricht, ohne die Qualität der Inhalte zu beeinträchtigen.
- Situation berücksichtigen: Die Benutzeroberfläche muss Nutzern unabhängig von ihren Umständen eine wertvolle Nutzungserfahrung bieten.
- Konsistent sein: Verwenden Sie bekannte Konventionen und wenden Sie sie auf logische Weise an.
- Kontrolle ermöglichen: Nutzer müssen auf die Inhalte zugreifen und mit ihnen auf die von ihnen bevorzugte Weise interagieren können.
- Auswahl anbieten: Bieten Sie Nutzern verschiedene Möglichkeiten, Aufgaben zu erledigen, insbesondere bei komplexen oder nicht standardmäßigen 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 bieten: Berücksichtigen Sie den Zweck und die Bedeutung von Funktionen und wie sie die Nutzungserfahrung für verschiedene Nutzer verbessern.
Nutzeridentitäten
Bei der Entwicklung eines neuen Designs oder einer neuen Funktion verwenden viele Teams Nutzer identitäten, um sich durch den Prozess zu leiten. Nutzeridentitäten sind fiktive Charaktere, die Ihre digitalen Produkte verwenden. Sie basieren oft auf quantitativer und qualitativer Nutzerforschung.
Nutzeridentitäten bieten auch eine schnelle und kostengünstige Möglichkeit, diese Funktionen während des gesamten Design- und Entwicklungsprozesses zu testen und zu priorisieren. Sie helfen, Entscheidungen zu Websitekomponenten zu treffen, indem sie der Diskussion eine Ebene der realen Welt hinzufügen, um die Strategie abzustimmen und Ziele zu erstellen, die auf bestimmte Nutzergruppen ausgerichtet sind.
Behinderungen berücksichtigen
„Jeder Mensch ist anders. Ich kann nur aus meiner Erfahrung sprechen. Wenn Sie eine gehörlose Person treffen, haben Sie eine gehörlose Person getroffen – nicht alle von uns.“
Meryl Evans im ID24-Vortrag Deaf Tech: Travel Through Time from Past to Future.
Nutzeridentitäten können als inklusives Designtool verwendet werden, wenn Sie Personen mit Behinderungen in Ihre Nutzeridentitäten einbeziehen. Es gibt viele verschiedene Möglichkeiten, dies zu tun. Sie können spezifische Nutzeridentitäten für Behinderungen, Behinderungen zu vorhandenen Nutzeridentitäten hinzufügen oder sogar ein Persona Spectrum erstellen, um die dynamische Realität von situativen, vorübergehenden und dauerhaften Behinderungen widerzuspiegeln.
Unabhängig davon, wie Sie Personen mit Behinderungen in Ihre Nutzeridentitäten einbeziehen, sollten sie nicht auf echten Personen oder Stereotypen basieren. Nutzeridentitäten sind niemals ein Ersatz für Nutzertests.
- Name: Jane Bennet
- Alter: 57 Jahre
- Standort: Essex, Vereinigtes Königreich
- Beruf: UX-Entwicklerin
- Behinderung: Handtremor aufgrund von Parkinson im Frühstadium
- Ziele: Spracheingabe verwenden, um das Hinzufügen von Codevorschlägen zu erleichtern; Fahrradausrüstung online mit minimalen Tasteneingaben finden.
- Frustrationen: Websites ohne Unterstützung für die reine Tastaturbedienung; 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 von entscheidender Bedeutung sind. Sie unterstützt den ganzen Tag über viele Teammitglieder. Sie ist die Expertin für die Behebung technischer Probleme und die Anlaufstelle für alle in der Abteilung, wenn unerwartet etwas passiert.
Aufgrund des Tremors verliert sie ihre Feinmotorik, was es ihr zunehmend erschwert, eine Maus zu verwenden. Sie verlässt sich immer mehr auf die Tastatur, um im Web zu navigieren. Jane hat sich immer für ihre körperliche Fitness eingesetzt. Sie liebt Straßenrennen und BMX. Umso mehr war es ein Schock, als bei ihr letztes Jahr Parkinson im Frühstadium diagnostiziert wurde.
Simulatoren für Behinderungen
Seien Sie äußerst vorsichtig, wenn Sie Simulatoren für Behinderungen verwenden, um Ihre Nutzeridentitäten zu emulieren oder zu ergänzen.
Simulatoren für Behinderungen 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 sind gegen die Verwendung von Simulatoren für Behinderungen und empfehlen, nach Filmen, Demos, Tutorials und anderen Inhalten zu suchen, die von Personen mit Behinderungen erstellt wurden, und sich aus erster Hand über ihre Erfahrungen zu informieren.
„Ich denke, wir müssen ganz ehrlich sein, dass sich keine Simulation auf einige der wichtigsten Erkenntnisse auswirkt, die wir von sehenden Menschen erwarten. 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, vollständig teilzunehmen, und diese falschen Einschränkungen führen zu etwas, das uns zurückhält."
Mark Riccobono, Präsident der National Federation of the Blind.
Heuristiken zur Barrierefreiheit
Erwägen Sie, Heuristiken in Ihren Workflow einzubinden, wenn Sie Ihre Nutzeridentitäten und Designs erstellen. Heuristiken sind Regeln für das Interaktionsdesign, die 1990 von Jakob Nielsen und Rolf Molich eingeführt wurden. Diese zehn Prinzipien wurden auf der Grundlage jahrelanger Erfahrung im Bereich der Nutzerfreundlichkeit entwickelt und werden seitdem in Design- und Mensch-Computer-Interaktionsprogrammen verwendet.
Im Jahr 2019 erstellte und veröffentlichte das Designteam von Deque eine neue Reihe von Heuristiken, die sich auf die digitale Barrierefreiheit konzentrieren. Laut ihrer Forschung können bis zu 67% aller Fehler im Zusammenhang mit der Barrierefreiheit einer Website oder App vermieden werden, wenn die Barrierefreiheit Teil des Designprozesses ist. Das ist eine enorme Wirkung, die erzielt 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, indem sie die von ihnen gewählte Eingabemethode verwenden (z. B. Maus, Tastatur, 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 verstehen und wissen, wie sie im System navigieren können.
- Fehlervermeidung und ‑zustände: Interaktive Steuerelemente haben dauerhafte, aussagekräftige Anweisungen, um Fehler zu vermeiden. Außerdem werden Nutzern klare Fehlerzustände angezeigt, die angeben, was die Probleme sind und wie sie behoben werden können, wenn Fehler zurückgegeben werden.
- Kontrast und Lesbarkeit: Nutzer können Text und andere wichtige Informationen leicht unterscheiden und lesen.
- Sprache und Lesbarkeit: Nutzer können die Inhalte leicht lesen und verstehen.
- Vorhersehbarkeit und Konsistenz: Nutzer können den Zweck jedes Elements vorhersagen. Es ist klar, wie sich jedes Element auf das System als Ganzes bezieht.
- Zeit und Aufbewahrung: Nutzer haben genügend Zeit, um ihre Aufgaben zu erledigen, und verlieren keine Informationen, wenn ihre Zeit (z.B. eine Sitzung) abläuft.
- Bewegung und Blinken: Nutzer können Elemente auf der Seite anhalten, die sich bewegen, blinken oder animiert sind. Nutzer sollten durch diese Elemente nicht abgelenkt oder anderweitig 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 ein grundlegendes Verständnis dieser Heuristiken zur Barrierefreiheit haben, können Sie sie auf eine Nutzeridentität oder ein Design anwenden. Verwenden Sie dazu das Arbeitsblatt zu Heuristiken zur Barrierefreiheit und folgen Sie der Anleitung. Diese Übung ist aufschlussreicher, wenn Sie mehrere Perspektiven einbeziehen.
Eine Beispielprüfung der Heuristiken zur Barrierefreiheit für den Prüfpunkt „Navigation und Orientierung“ könnte so aussehen:
| Prüfpunkte für Navigation und Orientierung | Sehr gut (+2 Punkte) | Bestanden (+1 Punkt) | Nicht bestanden (-1 Punkt) | Nicht zutreffend (0 Punkte) |
|---|---|---|---|---|
| Wird bei allen aktiven Elementen, wenn sie den Fokus erhalten, ein klarer, sichtbarer Indikator gesetzt? | ||||
| Hat die Seite einen aussagekräftigen Titeltext, wobei die seitenspezifischen Informationen zuerst stehen? | ||||
| Sind das Seitentitelelement und H1 identisch oder ähnlich? | ||||
| Gibt es aussagekräftige Überschriften für jeden Hauptabschnitt? | ||||
| Wird der Zweck der Links allein aus dem Linktext oder dem unmittelbaren Kontext definiert? | ||||
| Gibt es ganz oben auf der Seite einen Link zum Überspringen und wird er beim Fokus angezeigt? | ||||
| Erleichtert die Organisation der Navigationselemente die Orientierung? |
Nachdem sich alle im Team die Seite oder Komponente angesehen und ihre Prüfung der Heuristiken zur Barrierefreiheit durchgeführt haben, werden die Summen für jeden Prüfpunkt ermittelt. An diesem Punkt können Sie entscheiden, wie Sie gefundene Probleme beheben oder Auslassungen korrigieren, die für die Unterstützung der digitalen Barrierefreiheit von entscheidender Bedeutung sind.
Annotationen zur Barrierefreiheit
Bevor Sie Ihr Design an das Entwicklungsteam übergeben, sollten Sie Annotationen zur Barrierefreiheit hinzufügen.
Annotationen werden im Allgemeinen verwendet, um kreative Entscheidungen zu erläutern und verschiedene Aspekte des Designs zu beschreiben. Annotationen zur Barrierefreiheit konzentrieren sich auf Bereiche, in denen Entwickler mit Unterstützung des Designteams oder eines Spezialisten für Barrierefreiheit barrierefreiere programmatische Entscheidungen treffen können.
Annotationen zur Barrierefreiheit können in jeder Phase des Designprozesses angewendet werden, von Wireframes bis hin zu Hi-Fi-Mockups. Sie können Nutzerflows, bedingte Zustände und Funktionen enthalten. Oft werden Symbole und Labels verwendet, um den Prozess zu optimieren und das Design im Mittelpunkt zu behalten.
Die folgenden Designbeispiele stammen aus dem Kit für Annotationen zur Barrierefreiheit von Indeed.com für Figma.
Je nach Designprogramm sollten Sie mehrere Starterkits für Annotationen zur Barrierefreiheit zur Auswahl haben. Alternativ können Sie auch ein eigenes Kit erstellen. In beiden Fällen sollten Sie entscheiden, welche Informationen an das Übergabeteam weitergegeben werden müssen und welches Format am besten geeignet ist.
Einige Bereiche, die für Annotationen zur Barrierefreiheit infrage kommen:
- Farbe: Geben Sie die Kontrastverhältnisse aller verschiedenen Kombinationen von Farben in der Palette an.
- Schaltflächen und Links: Geben Sie die Zustände „Standard“, „Hover“, „Aktiv“, „Fokus“ und „Deaktiviert“ an.
- Links zum Überspringen: Heben Sie die verborgenen und sichtbaren Designaspekte hervor und geben Sie an, wohin sie auf der Seite verlinken.
- Bilder und Symbole: Fügen Sie Empfehlungen für Alternativtext für wichtige Bilder und Symbole hinzu.
- Audio und Video: Heben Sie Bereiche und Links für Untertitel, Transkripte und Audiobeschreibungen hervor.
- Ü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: Geben Sie anklickbare Elemente, Hover-Effekte und den Fokus bereich an.
- Tastatur: Geben Sie an, wo der Fokus beginnen soll (Alpha-Stopp) und die folgende Tab-Reihenfolge.
- Formulare: Fügen Sie Feldlabels, Hilfetext, Fehlermeldungen und Erfolgs meldungen hinzu.
- Barrierefreie Namen: Geben Sie an, wie Hilfstechnologien das Element erkennen sollen.