Technologische Neuigkeiten, Bewertungen und Tipps!

UX-Checklistenreihe: Barrierefreies Design

Hinweis: Der folgende Artikel hilft Ihnen weiter: UX-Checklistenreihe: Barrierefreies Design

Dieser Beitrag stammt aus unserer User Experience (UX)-Checklistenreihe:

Was ist barrierefreies Design?

Als Designer haben wir die Macht, Entscheidungen zu treffen, die unsere digitalen Erlebnisse für alle besser machen. Wenn wir barrierefreie Designentscheidungen treffen, werden unsere Designs nicht nur für Menschen mit Behinderungen, sondern auch für alle nutzbarer.

Barrierefreies Design bedeutet, Design so zu gestalten, dass es den Bedürfnissen von Menschen mit Behinderungen gerecht wird. Es handelt sich um ein Design, das alle Benutzer einbezieht, auch Benutzer mit dauerhaften oder vorübergehenden körperlichen oder kognitiven Behinderungen.

Inwiefern interagiert eine Person mit Farbenblindheit möglicherweise anders mit Ihrem Design als ein Benutzer mit Hörverlust? Oder Sehschwäche? Was ist mit körperlichen Behinderungen? Dyslexie? Beeinträchtigungen der Mobilität? Blindheit? Interagieren Benutzer über Bildschirmleseprogramme oder eine reine Tastaturnavigation?

Wessen Bedürfnisse bleiben vom traditionellen Designprozess ausgeschlossen? Barrierefreies Design berücksichtigt all diese Erfahrungen und bietet proaktiv Designlösungen, die für alle nutzbar sind.

Was ist der Unterschied zwischen universellem Design und barrierefreiem Design?

Universelles Design, inklusives Design und barrierefreies Design werden oft synonym verwendet; Was ist also der Unterschied?

Obwohl diese Begriffe alle auf die Verbesserung der Benutzerfreundlichkeit für eine breitere Benutzergruppe zurückzuführen sind, weisen ihre Definitionen einige geringfügige Nuancen auf:

  1. universal Design ist der breiteste im Bunde. Damit ist gemeint, für jeden so zu gestalten, dass es möglichst benutzerfreundlich ist. Ein häufig verwendetes Beispiel für universelles Design ist die Schaffung der Bürgersteigrampe, da sie die Benutzerfreundlichkeit für alle, die eine Straße überqueren, erhöht, nicht nur für Rollstuhlfahrer.
  2. Inklusives Design ist sehr verwandt, berücksichtigt aber das gesamte Spektrum der menschlichen Vielfalt. Inklusives Design fordert uns heraus, unsere eigenen Vorurteile zu berücksichtigen und darauf zu achten, wer ausgeschlossen wird. Ein Beispiel für integratives Design wäre die Bereitstellung von Optionen für allgemeine und benutzerdefinierte Antworten, wenn in einem Formular nach Geschlechtsinformationen gefragt wird.
  3. Barrierefreies Design ist speziell für Menschen mit Behinderungen konzipiert, führt jedoch häufig zu einer besseren Benutzererfahrung für alle. Barrierefreies Design erfüllt die Bedürfnisse von Menschen mit dauerhaften oder vorübergehenden Behinderungen, wird jedoch häufig auch den Bedürfnissen von Menschen mit situativen Einschränkungen gerecht. Beispielsweise bieten Untertitel ein besseres Erlebnis für Menschen mit Hörverlust, sie sind aber auch praktisch für diejenigen, die in aller Ruhe einen Film ansehen, während ein schlafendes Baby im Nebenzimmer sitzt.

Entwerfen für Barrierefreiheit und Inklusion

Als UX-Designer ist es unsere Aufgabe, darüber nachzudenken, wie unterschiedliche Benutzer mit unterschiedlichen Bedürfnissen mit unseren Designs interagieren könnten. Wir denken vielleicht, dass wir beim Entwerfen eine große Mehrheit der Bevölkerung berücksichtigen, aber wir übersehen dies oft Jeder vierte Erwachsene leidet unter Behinderungen. Das sind 25 % der Bevölkerung, bei Erwachsenen ab 65 Jahren sind es etwa 40 %.

Als Das öffentliche Bewusstsein für Barrierefreiheit steigt, ist es wichtig, dass wir beim Entwerfen aktiv über unsere eigenen Vorurteile und Fähigkeiten hinausdenken. Abgesehen davon, dass Sie auf der falschen Seite von Moral und Ethik stehen, kann das Ignorieren der Barrierefreiheit im Design auch den Ruf Ihrer Marke negativ beeinflussen oder sogar dazu führen teure Klagen und Rechtsstreitigkeiten. Ganz zu schweigen davon, dass es für 25 % Ihrer Kunden wirklich schwierig (wenn nicht unmöglich) ist, Ihr Produkt oder Ihre Dienstleistung zu nutzen.

Die folgende Checkliste führt Sie durch eine Liste mit Designtipps, die Ihnen den Einstieg erleichtern sollen. Obwohl dies keine vollständige Prüfung der Barrierefreiheit ersetzt (und auch nicht ersetzen sollte), kann es für einige schnelle Erfolge genutzt werden, um Ihre Designs etwas integrativer zu gestalten.

Checkliste und Richtlinien zur UX-Barrierefreiheit

Farbe

  • Textfarbe und Kontrast: Verwenden Sie einen Kontrastprüfer, z Das Online-Tool von WebAIM, um sicherzustellen, dass die Farbe Ihres Textes vor der Hintergrundfarbe lesbar ist. Je kleiner Ihr Text ist, desto höher muss der Kontrast sein, damit die Farbkombination den Barrierefreiheitsstandards entspricht. Meiner Erfahrung nach ist der Farbkontrast ein ziemlich häufiges Problem bei der Barrierefreiheit und kann eine gute Möglichkeit sein, Ihren Kunden Best Practices zur Barrierefreiheit vorzustellen.
  • Nachrichten: Verlassen Sie sich nicht nur auf die Farbe, um eine Botschaft zu vermitteln. Erwägen Sie die Verwendung von Farbe, Form und Text, um Ihre Botschaft noch stärker hervorzuheben. Versuchen Sie beispielsweise, Ikonografie in Ihre Fehlermeldungen einzubeziehen, wenn Sie Formularfeldfehler visuell kommunizieren, und nicht nur die Farbe.
  • Links: Die Linkfarben sollten sich optisch von Ihrem Fließtext unterscheiden. Verlassen Sie sich jedoch, ähnlich wie oben, nicht nur auf die Farbe, um Ihre Links zu gestalten. Jakobs Gesetz sagt uns auch, dass Menschen Designmuster mögen, die ihnen vertraut sind. Das Unterstreichen Ihrer Links verbessert die allgemeine Benutzerfreundlichkeit durch die Verwendung eines vertrauten Designmusters, verbessert aber auch die Zugänglichkeit für Benutzer mit Sehbehinderung oder Farbenblindheit.

Text

  • Textgröße: Stellen Sie sicher, dass Ihr Text groß genug ist, damit die Leute ihn lesen können, ohne sich anzustrengen oder die Augen zusammenzukneifen. Entsprechend Überwältigendes Magazin16 Pixel (oder größer) ist die Größe, die Ihr Fließtext haben soll. Sekundär- oder Tertiärtext kann kleiner sein, aber der Hauptinhalt bleibt groß und lesbar.
  • Vergrößerbarer Text: Lassen Sie die Leute die Textgröße selbst anpassen und vergrößern. Dies gilt auch für wichtige Symbole! Wenn Ihre Schaltfläche über ein „Download“-Symbol verfügt, dieses Symbol jedoch nicht mit der Beschriftung Ihrer Schaltfläche größer wird, übersehen die Leute möglicherweise wichtigen Kontext.
  • Klarheit: Ihre Seitentitel sollten klar, beschreibend und auf den Punkt gebracht sein. Verwenden Sie außerdem die aktive Stimme und seien Sie direkt in Ihrer Kommunikation, um die kognitive Belastung Ihrer Benutzer zu verringern. Beispielsweise ist „Denise hat einen Blog geschrieben“ weniger interpretierbar als „Es wurde ein Blog geschrieben“.
  • Scanbarkeit: Verwenden Sie nach Möglichkeit Aufzählungszeichen, um Ihren Text in kleinere, leicht verdauliche Abschnitte zu unterteilen. Vermeiden Sie große und überwältigende Textwände, indem Sie längere Inhaltsabschnitte in kleinere Absätze mit beschreibenden Unterüberschriften aufteilen, um die Scanbarkeit zu verbessern.
  • Struktur: Verwenden Sie HTML und Überschriften-Tags (H1, H2, H3 usw.), um eine Seitenstruktur zu erstellen, die für Screenreader sinnvoll ist. Interessante Tatsache: Eine klare Seitenstruktur wird auch für Suchmaschinen sinnvoller sein. Eine solide Struktur kann also nicht nur das Erlebnis für Ihre Nutzer verbessern, sondern sich auch positiv auf Ihr technisches SEO auswirken!
  • Ausrichtung und Länge: Die Linksausrichtung Ihres Textes kann dazu beitragen, die Lesbarkeit für Menschen mit kognitiven Behinderungen zu verbessern. Vermeiden Sie es, Ihren Text zu zentrieren oder rechtsbündig auszurichten, insbesondere wenn Ihr Textblock über mehrere Zeilen umbrochen wird. Apropos Umbruch: Auch die Zeilenlänge ist wichtig zu berücksichtigen. Baymard-Institut empfiehlt 50-60 Zeichen pro Zeile (einschließlich Leerzeichen!). Zu breite Zeilen sind schwer zu verstehen, während zu kurze Zeilen zu Ermüdung und Stress beim Leser führen können.

Navigation

  • Semmelbrösel: Breadcrumbs können als wichtige Navigationswerkzeuge verwendet werden. Das Hinzufügen von Breadcrumbs kann den dringend benötigten Kontext bereitstellen und Ihren Benutzern bei der Orientierung helfen.
  • Tastaturnavigation: Stellen Sie sicher, dass Ihre Seite für Bildschirmleseprogramme zugänglich ist und nur per Sprache oder Tastatur navigiert werden kann.
  • Fokusindikatoren: Um noch einen Schritt weiter zu gehen: Menschen, die ihre Tastatur zum Navigieren verwenden, verlassen sich auf Fokuskonturen auf Schaltflächen, Links und anderen Elementen, um zu wissen, wo sie sich auf der Seite befinden. Sie können Ihrem Fokusindikator etwas Stil hinzufügen, um ihn an Ihren Designstil anzupassen, aber entfernen Sie diesen NIEMALS!

Links, Schaltflächen und Beschriftungen

  • Linkbeschreibungen: Bei Links handelt es sich in der Regel um Navigationslinks. Daher sollte Ihr Linktext beschreibend sein und erklären, wohin der Link Sie führt. Beispielsweise ist „Lesen Sie mehr über barrierefreies Design“ hilfreicher als „Lesen Sie mehr“.
  • Schaltflächenbeschriftungen: Ähnlich wie bei Textlinks sollten Ihre Schaltflächenbeschriftungen die richtigen Erwartungen wecken, indem sie die Aktion beschreiben, die Ihre Schaltfläche auslöst. „Kontaktieren Sie unser Team“ bereitet uns besser auf das vor, was wir erwarten können, als „Hier klicken“.
  • Abstand: Alles, was angetippt oder angeklickt werden kann, sollte ausreichend Platz um sich herum haben. Fordern Sie keine Präzision und drängen Sie die Tasten nicht eng zusammen. Es macht (für niemanden) Spaß, zu versuchen, genau auf einen kleinen Link neben drei anderen kleinen Links zu klicken. Für Mobilgeräte versuchen wir, als Faustregel für alles, was angetippt werden kann, eine minimale Tippgröße von 44 x 44 Pixel einzuhalten.
  • Formularbeschriftungen: Um die kognitive Belastung Ihrer Formulare zu verringern, stellen Sie sicher, dass die Beschriftungen Ihrer Formularfelder klar, beschreibend und immer sichtbar sind. Ihre Feldbeschriftungen sollten niemals durch Platzhaltertext ersetzt werden oder verschwinden, wenn der Benutzer mit der Eingabe beginnt.

Bilder und Videos

  • Alternative Beschreibungen: Fügen Sie Ihren Bildern, Videos und anderen Medien immer beschreibende Alt-Tags hinzu. Denken Sie daran, dass nicht jeder Ihre Bilder sehen kann. Versuchen Sie daher, Ihre Beschreibungen so detailliert wie möglich zu gestalten. Neben der Verbesserung der Zugänglichkeit spielen Alt-Tags eine wichtige Rolle SEO-Vorteile sowie.
  • Kommunikation: Verwenden Sie Bilder zur Unterstützung Ihres Textes, aber verwenden Sie niemals Bilder an Ort und Stelle von Text. Bilder eignen sich hervorragend zur Unterstützung komplexer oder komplizierter Konzepte, diese Konzepte sollten jedoch immer im Klartext beschrieben werden.
  • Videotranskripte: Videos sind großartige und ansprechende Formen von Medieninhalten, aber vergraben Sie wichtige Konzepte nicht in Ihren Videos. Wenn Sie Videos verwenden, stellen Sie sicher, dass Sie Untertitel oder Videotranskripte für Benutzer hinzufügen, die diese nicht ansehen können.
  • Klarheit: Symbole eignen sich hervorragend für die Scanbarkeit, aber nicht alle Symbole sind intuitiv. Für zusätzliche Klarheit kombinieren Sie Ihre Symbole mit beschreibenden Beschriftungen.
  • Überlagerungen: Ähnlich wie bei der Zugänglichkeit von Farben kann Text über Bildern hinsichtlich der Lesbarkeit problematisch sein. Wenn Sie Ihre Bilder mit Text überlagern möchten, sollten Sie darüber nachdenken, eine Farbüberlagerung hinzuzufügen, damit Ihr Text den Farbkontraststandards zum Hintergrund entspricht.

Wenn es um barrierefreies Design geht, leben wir, was wir predigen

Während wir diese Checkliste zusammengestellt haben, haben wir eine schnelle Prüfung der Barrierefreiheit auf unserer eigenen Website durchgeführt. Und wie Sie vielleicht bemerkt haben, gibt es einige Probleme direkt auf unserer eigenen Homepage:

Wie bei jedem Projekt erfordern Design- und Entwicklungsaktualisierungen Zeit und Ressourcen. Sie benötigen die Zustimmung Ihrer Führung, aber es muss sich nicht wie ein harter Kampf anfühlen. Hier sind die Schritte, die wir unternehmen möchten, um unsere eigenen Barrierefreiheitsprobleme anzugehen:

  1. Identifizieren Sie das Problem: Verwenden Sie eine Checkliste wie die obige, überprüfen Sie Ihre Website und dokumentieren Sie Ihre bekannten Probleme. Dies kann Ihnen helfen, den Aufwand zu verstehen, der zur Behebung der Probleme erforderlich ist.
  2. Bilden Sie durch Empathie: Setzen Sie sich für Barrierefreiheit ein und erklären Sie, warum dies für Ihr Team wichtig ist! Bauen Sie bei den notwendigen Stakeholdern Empathie für Ihre Benutzer auf. Zum Glück ist Empathie bereits ein zentraler Bestandteil der Werte von Seer.
  3. Protokollieren Sie Probleme und behandeln Sie sie wie Fehler: Wie würde Ihr Team andere Fehler auf Ihrer Website beheben? Barrierefreiheitsprobleme sind im Kern Usability-Fehler. Die Leute können Ihre Button-Beschriftungen nicht lesen? Das ist ein kritisches Usability-Problem! Behandeln Sie es wie ein solches und priorisieren Sie entsprechend.
  4. Erstellen Sie einen Plan für laufende Optimierungen: Websites sind Lebewesen mit vielen beweglichen Teilen, und die Planung regelmäßiger Barrierefreiheitsprüfungen kann Ihnen dabei helfen, neue Probleme im Auge zu behalten. Besser noch: Wenn in Ihrem Team das Bewusstsein für Barrierefreiheit wächst, nutzen Sie diese Dynamik, um Barrierefreiheit von Anfang an zu einem Teil Ihres Designprozesses zu machen.

Note: Die in diesem Blogbeitrag bereitgestellten Informationen stellen keine Rechtsberatung in Bezug auf die ADA-Konformität oder anderweitig dar und sind auch nicht als solche gedacht und sollten auch nicht als solche behandelt werden.

Suchen Sie engagierte Kreativ- und Designunterstützung?

Schauen Sie sich die Fähigkeiten, Arbeitsproben usw. von Seer an in Kontakt kommen.

Abonnieren Sie unbedingt unseren Newsletter, um weitere UX-Best Practices sowie Tipps und Tricks für digitales Marketing zu erhalten!