Web Accessibility 101: Design für alle

Beim Webdesign geht es um Barrierefreiheit. Die meisten Webdesigner zielen darauf ab, Produkte für die größtmögliche Anzahl von Menschen innerhalb ihres Publikums zu entwickeln, und werfen ihre Designs wie klaffende Netze aus, um ihnen den größten Zustrom von Benutzern zu bescheren.

Und obwohl dieses Designprinzip logisch ist, überschattet es ein etwas einfacheres und umfassenderes Prinzip: Design für alle Menschen, nicht für die meisten.

Optimieren Sie den Inhalt, damit jeder mögliche Benutzer Ihre Website genießen und mit ihr interagieren und auf die verfügbaren Informationen und Daten zugreifen kann. Die Teilnahme an dieser Praxis wird dazu beitragen, einen breiteren Markt zu erschließen und Ihren Kundenstamm zu diversifizieren. 15 % der Weltbevölkerung haben ein gewisses Maß an Behinderung.

Das sind Menschen, die wie alle anderen das Internet oft nutzen und stark auf digitale Kommunikation und Tools angewiesen sind. Die Optimierung Ihrer Website, um sicherzustellen, dass Benutzer ein großartiges Erlebnis genießen können, kann Ihr Interaktionsnetz erweitern. Indem Sie die Einbeziehung in Ihr Design üben, können Sie Millionen von Menschen erreichen, die oft übersehen werden.

Barrierefreies Design muss nicht schwer sein. Es muss nur einfach sein und Rücksicht auf alle potenziellen Benutzer nehmen. So optimieren Sie Ihre Website für maximale Zugänglichkeit.

Verstehen Sie Ihre Benutzer

Die Kenntnis Ihres Publikums ist bei jedem Projekt von entscheidender Bedeutung, daher ist dies der beste Ausgangspunkt. Verstehen Sie, dass Ihre Benutzer Personen mit unterschiedlichen Fähigkeiten umfassen können. Einige Ihrer Benutzer sind möglicherweise hör- oder sehbehindert, andere haben möglicherweise Anfallsleiden, wieder andere haben möglicherweise Mobilitätsprobleme.

Sie können zwar nicht für jedes mögliche Szenario entwerfen, aber Sie erweitern Ihren Designhorizont, wenn Sie sich die Zeit nehmen, an so viele wie möglich zu denken. Nachdem Sie über Ihr erweitertes Publikum nachgedacht haben, recherchieren Sie. Lesen Sie Fallstudien, sprechen Sie mit Freunden, die Erfahrungen haben, konsultieren Sie Leitfäden zur Barrierefreiheit.

Versuchen Sie vielleicht, eine Seite aus dem Bildungsbereich zu nehmen, Prinzipien des universellen Designs sind eine gute Referenz.

Denken Sie an UX

Nachdem Sie nun ein Verständnis mit Ihren zukünftigen Benutzern entwickelt haben, setzen Sie dieses Verständnis in Ihr User Experience (UX)-Framework ein. Dieser Schritt wird Ihnen helfen, sich in Ihre Benutzer einzufühlen und Dinge zu berücksichtigen, an die Sie vielleicht vorher nicht gedacht haben. Es weist Sie auch in die Richtung einer Vielzahl von Definitionen von Hilfstechnologien.

So wie ein Designer das Verhalten einer Website in jedem gängigen Browser berücksichtigen sollte, sollten unterstützende Technologien Teil der Funktionalitäts-Checkliste sein. Manchmal können sogar die kleinsten Änderungen im Webdesign behinderten Benutzern neue Türen öffnen.

Eine einfache Änderung

Die möglicherweise am einfachsten zu implementierende Änderung ist beispielsweise die Verwendung von Hervorhebungs-Tags.

Optisch gibt es keinen Unterschied zwischen <b> und <strong> und <i> sieht auch nicht anders aus als <em> . Aber für Menschen mit Behinderungen können diese Tags ihre Benutzererfahrung stark verändern.

Während sie dasselbe darstellen, effektiv fett und kursiv , unterscheiden sich diese Tags jedoch in ihrer Funktion. Während die einfacheren fetten und kursiven Tags der Präsentation dienen (die Art und Weise, wie der Text wiedergegeben wird, ändern), weisen stark und Betonung auf unterschiedliche Sprachmuster für Hilfstechnologien hin.

Aber es ist nicht so einfach, alle <b> blind durch <strong> zu ersetzen. Viele Überschriften verwenden zum Beispiel fetten Text als Kontrast, aber vielleicht ist es für Benutzer mit Behinderungen nicht das Beste, hier ein <strong> -Tag zu sehen. Überlegen Sie: „Muss dieser Text anders gesprochen werden, damit ein Benutzer seine volle Bedeutung erfahren kann?“ Wenn nicht, ziehen Sie in Betracht, <strong> oder <em> wegzulassen, es sei denn, sie sind wirklich notwendig.

Subtile Änderungen und Überlegungen wie diese können für Benutzer mit Behinderungen den Unterschied ausmachen. Es ist wichtig, die UX zu aktualisieren und nicht herunterzustufen.

Design für Sehbehinderte

Während die oben genannten Ratschläge den Sehbehinderten bereits zugute kommen, wird nicht jeder mit Sehproblemen den gleichen Grad oder Typ der Beeinträchtigung haben. Ebenso wichtig ist es, Optionen anzubieten, die für diejenigen geeignet sind, die ihre Sehkraft behalten.

Berücksichtigen Sie diese Elemente:

• Erlauben Sie Benutzern, die Schrift zu vergrößern. Die meisten Browser werden dies mit oder ohne Ihre Zustimmung tun, aber es sieht besser aus, wenn Sie CSS dafür vorbereitet haben.
• Vermeiden Sie bestimmte Farbkombinationen wie Rot und Grün oder Blau und Gelb. Warum nicht stattdessen Farbe verwenden, um die Conversions zu steigern und gleichzeitig die Zugänglichkeit zu verbessern?
• Code im „Alt-Text“. Alternativer Text kann von Hilfstechnologien gelesen werden und alle Grafiken auf der Seite erklären.
• Verwenden Sie Punkte in Abkürzungen, auch in den bekannten. Die Art und Weise, wie ein Screenreader Informationen verarbeitet, ist oft phonetisch: Stellen Sie sich vor, Sie hören „Fibby“ vs. FBI

Weitere Informationen zur Integration von Elementen für sehbehinderte Benutzer finden Sie bei der American Foundation for the Blind.

Design für Hörgeschädigte

Obwohl Hörgeschädigte weniger Anpassungen benötigen, haben die jüngsten Trends bei der Verwendung von Videos auf Websites den Bedarf an intelligenten Designentscheidungen erhöht. Wenn Ihre Website also auditive Komponenten enthält, verwenden Sie Untertitel oder Dolmetschen in Gebärdensprache.

Widerstehen Sie der Versuchung, automatische Untertitel zu verwenden – schauen Sie bei beliebigen Videos vorbei, die mit automatisierter Transkription verarbeitet wurden, um Wortübersetzungen zu sehen, die keinen Sinn ergeben und produktiv sein können.

Die Empfehlungen der National Association of the Deaf für spezifische Untertitelungsrichtlinien finden Sie hier.

Design für lichtempfindliche Epilepsie

Eines der Designprobleme in Bezug auf die vorherrschende Verwendung von Videos, insbesondere von Videos, die eine Autoplay-Funktion verwenden, betrifft Benutzer mit lichtempfindlicher Epilepsie. Bei diesen Benutzern können Anfälle auftreten, die durch Blitzlichteffekte oder bewegte Bilder ausgelöst werden. Webdesigner können das Photosensitive Epilepsy Analysis Tool verwenden, um die Wahrscheinlichkeit zu überprüfen, dass ihre Inhalte einen Anfall auslösen.

Wenn der Inhalt als gefährdet identifiziert wurde, aber nicht geändert werden kann, um das Risiko zu verringern, warne immer vor dem Potenzial und spiele das Video nicht automatisch ab. Stellen Sie sicher, dass die Warnung sichtbar ist und sich in der Nähe der Wiedergabetaste befindet.

Design für Mobilitätseinschränkungen

Einige Mobilitätseinschränkungen reichen vom totalen Verlust der Feinmotorik bis hin zu einem leichten Zittern. Jeder Grad der Beeinträchtigung führt zu derselben Benutzererfahrung auf einer Website, die sie nicht berücksichtigt hat:

• Benutzer müssen sich mehr anstrengen, um Links zu erreichen, und können schnell ermüden.
• Benutzer können nicht auf der Website navigieren, da sie keine Tastaturverwendung zulässt.
• Das Scrollen durch eine lange Seite führt zu Ermüdung, da es keine „Zurück zum Anfang“- oder Überspringen-Option gibt.

Websites, die für Touchscreens oder feine Mauseingaben optimiert sind, können schwerwiegendere Folgen für mobilitätseingeschränkte Personen haben und die Website möglicherweise unbrauchbar machen.

Das Einbinden von Designelementen wie Navigation, die über die Tastatur bedient werden kann, und häufige Ankerlinks, die den Benutzer zu verschiedenen Abschnitten der Seite führen können, kann diesen Benutzern sehr helfen.

Erstellen Sie eine „einfache“ Website-Option

Ihr Design ist makellos, interaktiv und auffällig, nutzt die neuesten und besten Trends, die auf dem freien Markt verfügbar sind – und ist für keinen der oben beschriebenen Benutzer zugänglich.

Wenn das nach Ihrem Webdesign klingt, kann eine einfachere Alternative darin bestehen, ein „einfaches“ Layout zu erstellen, das Benutzer ein- und ausschalten können. Dies wird nicht nur behinderte Benutzer ansprechen: Für Benutzer, die beispielsweise an durch hohe Kontraste ausgelöster Migräne leiden, kann ein leicht zugänglicher Schalter den Unterschied ausmachen, ob sie Kunde werden oder gehen müssen, um mit einer dreistündigen Migräne zu kämpfen.

Hören Sie auch hier nicht auf. Wenden Sie die gleiche Option für Ihre Abonnementlisten an, damit Benutzer ihre Einstellungen einfach bearbeiten können, bevor sie E-Mail-Marketing erhalten.

Verstehen Sie Ihre verschiedenen Benutzer weiterhin. Denken Sie weiter an sie. Je mehr Sie Ihre Benutzer verstehen und sich in sie einfühlen, desto einfacher wird das UX-Design zugänglich. Wer weiß? Sie können sogar die Welt von jemandem verändern.