Bedienungshilfen

Barrierefreiheit auf Webseiten verbessern

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

Diese Dokumentreihe ist eine textbasierte Version eines Teils der Inhalte, die im Udacity-Kurs zur Barrierefreiheit behandelt werden. Anstatt den Videokurs direkt zu transkribieren, soll er die Prinzipien und Praktiken für die Barrierefreiheit besser veranschaulichen und dabei den Originalinhalt des Kurses als Grundlage verwenden.

Zusammenfassung

  • Hier erfahren Sie, was Barrierefreiheit bedeutet und wie sie auf die Webentwicklung angewendet wird.
  • Erfahren Sie, wie Sie Websites für alle barrierefrei zugänglich und nutzbar machen.
  • Hier erfahren Sie, wie Sie grundlegende Bedienungshilfen mit minimalen Auswirkungen auf die Entwicklung einbeziehen.
  • Hier erfahren Sie, welche HTML-Funktionen verfügbar sind und wie Sie damit die Barrierefreiheit verbessern können.
  • Sie lernen erweiterte Bedienungshilfen für ausgefeilte Bedienungshilfen kennen.

Wenn Sie die Barrierefreiheit, den Umfang und die Auswirkung verstehen, können Sie zu einem besseren Webentwickler beitragen. In diesem Leitfaden erfahren Sie, wie Sie Ihre Websites für alle zugänglich und nutzbar machen.

Die Schreibweise von "Barrierefreiheit" ist nicht immer einfach. In diesem Leitfaden erfahren Sie, wie Sie mit minimalem Aufwand die Barrierefreiheit verbessern können, wie Sie die integrierten HTML-Funktionen nutzen können, um barrierefreiere und robustere Oberflächen zu erstellen, und wie Sie einige erweiterte Techniken zum Erstellen ausgefeilter barrierefreier Angebote nutzen.

Außerdem werden Sie feststellen, dass viele dieser Techniken Ihnen dabei helfen, Benutzeroberflächen zu erstellen, die für alle Nutzer angenehmer und nutzerfreundlicher sind, nicht nur für Nutzer mit Beeinträchtigungen.

Natürlich wissen viele Entwickler, was Barrierefreiheit bedeutet – das hat mit Regierungsverträgen, Checklisten und Screenreadern zu tun. – und viele Missverständnisse kursieren. Viele Entwickler sind beispielsweise der Meinung, dass sie sich bei der Bewältigung der Barrierefreiheit entscheiden müssen, ob sie eine angenehme und ansprechende Umgebung schaffen oder ob die App schwerfällig, hässlich, aber barrierefrei ist.

Das ist natürlich gar nicht der Fall. Lassen Sie das klären, bevor wir zu etwas anderem kommen. Was meinen wir mit Barrierefreiheit und worüber erfahren wir mehr?

Was ist Barrierefreiheit?

Wenn wir sagen, dass eine Website barrierefrei ist, meinen wir damit, dass die Inhalte der Website für jeden Nutzer verfügbar sind und ihre Funktionen genutzt werden können. Als Entwickler gehen wir davon aus, dass alle Nutzer eine Tastatur, eine Maus oder einen Touchscreen sehen und verwenden und mit Ihrem Seiteninhalt auf die gleiche Weise interagieren können wie Sie. Dies kann zu einer Erfahrung führen, die für einige gut funktioniert, aber zu Problemen führt, die von einfachen Ärgernisse bis hin zu Auffälligkeiten für andere reichen.

Barrierefreiheit bezieht sich dann auf die Erfahrung von Nutzern, die sich möglicherweise außerhalb des engen Bereichs des „typischen“ Nutzers befinden und anders als erwartet auf Dinge zugreifen oder damit interagieren. Das betrifft insbesondere Nutzer mit Beeinträchtigungen oder Beeinträchtigungen, die nicht physisch oder nur vorübergehend eingeschränkt sind.

Obwohl wir unsere Diskussion über Barrierefreiheit oft auf Nutzer mit körperlichen Beeinträchtigungen konzentrieren, können wir uns alle auf die Nutzung einer Oberfläche beziehen, die uns aus anderen Gründen nicht zugänglich ist. Hattest du schon einmal Probleme bei der Nutzung einer Desktop-Website auf einem Smartphone oder hast die Meldung „Dieser Inhalt ist in deiner Region nicht verfügbar“ gesehen oder ein bekanntes Menü auf einem Tablet nicht gefunden? All das sind Probleme mit der Barrierefreiheit.

Wenn Sie mehr über die Barrierefreiheit erfahren, werden Sie feststellen, dass die allgemeinere Herangehensweise an die Barrierefreiheit in diesem Bereich die User Experience für alle verbessert. Sehen wir uns ein Beispiel an:

Ein Formular mit schlechter Zugänglichkeit

Bei diesem Formular gibt es mehrere Probleme beim Zugriff auf das Formular.

  • Der Text hat einen geringen Kontrast, der für Nutzer mit eingeschränktem Sehvermögen schwer zu lesen ist.
  • Wenn Labels auf der linken Seite und Felder auf der rechten Seite zu sehen sind, ist es für viele Menschen schwierig, sie zuzuordnen, und für Nutzer, die heranzoomen müssen, um die Seite zu verwenden, ist es fast unmöglich, sich dies auf einem Smartphone anzusehen und zu schwenken, um herauszufinden, was damit zusammenhängt.
  • Das Label "Details speichern?" ist nicht mit dem Kästchen verknüpft. Sie müssen also nur auf das kleine Quadrat tippen oder klicken, anstatt nur auf das Label zu klicken. Außerdem hätte ein Screenreader Schwierigkeiten, die Zuordnung herauszufinden.

Winken Sie nun mit dem Stab zur Barrierefreiheit, um das Formular zu sehen, in dem diese Probleme behoben wurden. Wir machen den Text dunkler, ändern das Design so, dass die Labels den Elementen entsprechen, die sie beschriften, und korrigieren das Label, das mit dem Kästchen verknüpft ist, sodass Sie es ein- und ausblenden können, indem Sie auch auf das Label klicken.

Ein Formular mit verbesserter Barrierefreiheit

Was würdest du lieber verwenden? Wenn Sie die barrierefreie Version erwähnt haben, sind Sie auf dem besten Weg, die Hauptvoraussetzung dieses Leitfadens zu verstehen. Oft ist etwas, das für einige Nutzer ein vollständiges Hindernis darstellt, auch für viele ein Problem. Wenn Sie also das Problem mit der Barrierefreiheit beheben, verbessern Sie die Nutzerfreundlichkeit für alle.

Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines, WCAG)

In diesem Leitfaden beziehen wir uns auf die Richtlinien für barrierefreie Webinhalte (WCAG) 2.0. Diese Richtlinien und Best Practices wurden von Experten für Barrierefreiheit zusammengestellt, um methodisch anzugehen, was „Barrierefreiheit“ bedeutet.

WCAG basiert auf vier Prinzipien, die häufig auch von dem Akronym POUR genannt werden:

  • Wahrnehmbar: Können Nutzer die Inhalte erkennen? Wenn etwas nur mit einem Sinn wahrnehmbar ist, z. B. dem Sehen, bedeutet das nicht, dass es von allen Nutzern wahrgenommen wird.

  • Nutzbar: Können Nutzer UI-Komponenten verwenden und durch die Inhalte navigieren? Elemente, die eine Mouseover-Interaktion erfordern, können beispielsweise nicht von Personen bedient werden, die keine Maus oder einen Touchscreen verwenden können.

  • Verständlich: Können Nutzer die Inhalte verstehen? Können Nutzer die Benutzeroberfläche verstehen und ist sie einheitlich genug, um Verwirrung zu vermeiden?

  • Stabil: Können die Inhalte von einer Vielzahl von User-Agents (Browsern) verarbeitet werden? Funktioniert es mit assistiven Technologien?

Die WCAG bietet zwar einen umfassenden Überblick darüber, was es bedeutet, dass Inhalte barrierefrei sind, kann aber auch überwältigend sein. Um dies zu verhindern, hat die Gruppe WebAIM(Web Accessibility in Mind) die WCAG-Richtlinien in einer übersichtlichen Checkliste zusammengefasst, die sich speziell auf Webinhalte bezieht.

Die WebAIM-Checkliste kann Ihnen eine kurze, allgemeine Zusammenfassung dessen geben, was Sie implementieren müssen, und einen Link zur zugrunde liegenden WCAG-Spezifikation bereitstellen, falls Sie eine erweiterte Definition benötigen.

Mit diesem Tool können Sie eine Richtung für Ihre Arbeit zur Barrierefreiheit festlegen und sicher sein, dass Ihr Projekt, solange Ihr Projekt die beschriebenen Kriterien erfüllt, eine positive Erfahrung mit dem Zugriff auf Ihre Inhalte haben sollten.

Die Vielfalt der Nutzer verstehen

Wenn Sie mehr über Barrierefreiheit erfahren, ist es hilfreich, ein wenig über das vielfältige Spektrum von Nutzern auf der Welt und die Themenbereiche der Barrierefreiheit zu erfahren, die sie betreffen. Hier ist eine informative Frage-und-Antwort-Runde mit Victor Tsaran, einem Technical Program Manager bei Google, der völlig blind ist.

Victor Tsaran.
Victor Tsaran

Woran arbeiten Sie bei Google?

Hier bei Google ist es meine Aufgabe, dafür zu sorgen, dass unsere Produkte für alle unsere unterschiedlichen Nutzer funktionieren, unabhängig von Beeinträchtigungen oder Beeinträchtigungen.

Welche Arten von Beeinträchtigungen haben Nutzer?

Wenn wir über die Arten von Beeinträchtigungen nachdenken, die es Menschen erschweren würden, auf unsere Inhalte zuzugreifen, werden viele Menschen sofort von einem blinden Nutzer wie mir denken. Es stimmt, diese Beeinträchtigung kann es wirklich frustrierend oder sogar unmöglich machen, viele Websites zu nutzen.

Viele moderne Webtechniken haben den leider Nebeneffekt, dass Websites erstellt werden, die mit den Tools, die von blinden Nutzern für den Zugriff auf das Internet verwendet werden, nicht gut funktionieren. Tatsächlich gibt es jedoch noch mehr zur Barrierefreiheit. Wir finden es hilfreich, sich die Beeinträchtigungen in vier verschiedene Kategorien einzuteilen: visuelle, motorische, Hör- und kognitive Beeinträchtigungen.

Sehen wir uns diese genauer an. Können Sie Beispiele für Sehbeeinträchtigungen nennen?

Sehbehinderte können in verschiedene Kategorien unterteilt werden: Nutzer ohne Sehvermögen wie ich verwenden möglicherweise einen Screenreader, eine Brailleschrift oder eine Kombination aus beidem.

Ein Braille-Lesegerät.
Braillelesegerät

Eigentlich ist es ziemlich ungewöhnlich, dass Sie buchstäblich kein Sehvermögen haben, aber es ist gut, dass Sie mindestens eine Person kennen oder getroffen haben, die gar nichts sehen kann. Es gibt jedoch auch viel mehr Nutzer mit eingeschränktem Sehvermögen.

Das ist ein breites Spektrum, von einer Frau wie meiner Frau, die keine Hornhaut hat – sie kann zwar Dinge sehen, die sie schwer zu lesen ist und als rechtlich blind gilt, bis hin zu jemandem, der einfach nur schlecht sehen kann und eine sehr starke Brille zu tragen hat.

Die Bandbreite ist riesig, und natürlich gibt es auch eine große Auswahl an Unterkünften, die Menschen in dieser Kategorie nutzen: Einige verwenden einen Screenreader oder eine Braillezeile (eine Frau hat sogar gehört, die Brailleschrift auf dem Bildschirm liest, weil sie leichter zu sehen ist als gedruckter Text) oder eine Sprachausgabetechnologie ohne volle Screenreader-Funktion oder eine Lupe oder eine Lupe verwenden. Sie können auch Optionen mit hohem Kontrast verwenden, wie einen Betriebssystemmodus mit hohem Kontrast, eine kontrastreiche Browsererweiterung oder ein Design mit hohem Kontrast für eine Website.

Modus mit hohem Kontrast.
Modus mit hohem Kontrast

Viele Nutzer verwenden sogar eine Kombination davon, wie meine Freundin Laura, die eine Kombination aus Modus mit hohem Kontrast, Browserzoom und Sprachausgabe verwendet.

Viele Menschen können sich mit eingeschränktem Sehvermögen identifizieren. Zunächst einmal verschlechtert sich mit zunehmendem Alter das Sehvermögen. Es ist also gut möglich, dass sich eure Eltern darüber beschwert haben, auch wenn ihr das noch nicht erlebt habt. Aber viele Menschen sind frustriert, wenn sie ihren Laptop vor einem sonnigen Fenster herausnehmen und plötzlich nichts mehr lesen können. Oder jeder, der zuvor eine Laseroperation hatte oder vielleicht einfach etwas vom anderen Ende des Raums lesen muss, hat vielleicht eine der von mir erwähnten Unterkünften genutzt. Daher finde ich es ziemlich einfach, Empathie für Nutzende mit eingeschränktem Sehvermögen zu entwickeln.

Oh, und ich sollte nicht vergessen, Menschen mit einem schlechten Farbsehvermögen zu erwähnen: etwa 9% der Männer haben eine Form von Farbblindheit! Und etwa 1% der Frauen. Vielleicht haben sie Schwierigkeiten, Rot und Grün oder Gelb und Blau zu unterscheiden. Denken Sie daran, wenn Sie das nächste Mal eine Formularvalidierung entwerfen.

Was ist mit motorischen Einschränkungen?

Ja, motorische Einschränkungen oder feinmotorische Einschränkungen. Zu dieser Gruppe gehören Menschen, die lieber keine Maus verwenden würden, weil sie vielleicht eine RSI oder etwas haben und es schmerzhaft empfinden, bis hin zu Personen, die körperlich gelähmt sind und in bestimmten Körperteilen nur eine begrenzte Bewegungsfreiheit haben.

Eine Person, die ein Eyetracking-Gerät verwendet.
Eyetracking-Gerät

motorisch beeinträchtigte Nutzer können eine Tastatur, ein Schaltergerät, eine Sprachsteuerung oder sogar ein Eyetracking-Gerät für die Interaktion mit ihrem Computer verwenden.

Ähnlich wie bei Sehbehinderungen kann die Beweglichkeit auch ein vorübergehendes oder situatives Problem sein: Vielleicht haben Sie ein gebrochenes Handgelenk in der Maushand. Vielleicht ist das Touchpad auf dem Laptop kaputt oder Sie fahren in einem wackeligen Zug. Es kann viele Situationen geben, in denen die Mobilität eines Nutzers eingeschränkt ist. Wenn wir uns um sie kümmern, wird die Nutzung insgesamt verbessert – sowohl für alle mit dauerhaften Beeinträchtigungen als auch für alle, die vorübergehend feststellen, dass sie keine zeigerbasierte UI verwenden können.

Sehr gut. Sprechen wir nun über Hörbehinderungen.

Zu dieser Gruppe zählen Menschen mit Hör- oder Hörbehinderung. Ähnlich wie beim Sehvermögen neigt das Hörvermögen mit dem Alter zu. Viele von uns nutzen alltägliche Angebote wie Hörgeräte.

Ein Fernseher mit Untertiteln.
Bildschirmuntertitel

Für hörgeschädigte Nutzer müssen wir sicherstellen, dass wir uns nicht auf Töne verlassen. Verwenden Sie also beispielsweise Videountertitel und -transkripte und bieten Sie eine Alternative an, wenn Ton Teil der Benutzeroberfläche ist.

Wie wir bei Seh- und motorischen Beeinträchtigungen gesehen haben, können wir uns leicht eine Situation vorstellen, in der auch jemand, dessen Ohren gut funktionieren, von diesen Unterkünften profitieren würde. Viele meiner Freunde finden es toll, wenn sie ein Video mit Untertiteln und Transkripten haben.

Okay, können Sie uns etwas über kognitive Beeinträchtigungen erzählen?

Es gibt eine Reihe von kognitiven Erkrankungen wie ADS, Legasthenie und Autismus. Dies kann bedeuten, dass Menschen einen anderen Zugang zu Dingen haben oder benötigen. Die Unterkünfte für diese Gruppen sind von Natur aus extrem vielfältig, aber es gibt definitiv einige Überschneidungen mit anderen Bereichen, z. B. die Verwendung der Zoomfunktion, um das Lesen oder Konzentrieren zu erleichtern. Außerdem stellen diese Nutzer möglicherweise fest, dass wirklich minimalistisches Design am besten funktioniert, da es Ablenkung und kognitive Belastung minimiert.

Ich denke, jeder kann sich mit dem Stress kognitiver Überlastung identifizieren. Es ist also klar, dass wenn wir etwas entwickeln, das für Menschen mit kognitiven Beeinträchtigungen gut funktioniert, dann schaffen wir etwas, das für alle ein angenehmes Erlebnis ist.

Wie würden Sie also zusammenfassen, was Sie über Barrierefreiheit denken?

Wenn man sich das breite Spektrum an Fähigkeiten und Beeinträchtigungen ansieht, kann man erkennen, dass es sehr eng gefasst ist, Produkte nur für Menschen zu entwickeln und zu entwickeln, die ein perfektes Seh- und Hörvermögen sowie Fingerfertigkeit und Wahrnehmung haben. Das ist fast selbsterklärend, weil wir die Nutzung für alle stressiger und weniger nutzungsfreundlich gestalten. Für manche Nutzer ist das eine Erlebnis, das sie sogar komplett ausschließt.

In diesem Interview identifizierte Victor eine Reihe von Beeinträchtigungen und teilte diese in vier große Kategorien ein: visuell, motorisch, Hörvermögen und kognitive. Außerdem wies er darauf hin, dass jede Art von Beeinträchtigung situativ, temporär oder dauerhaft sein kann.

Sehen wir uns einige Beispiele aus der Praxis an. Beachten Sie, dass einige Beeinträchtigungen mehr als eine Kategorie oder einen Typ umfassen können.

Situationsbezogen Temporär Dauerhaft
Grafisch Gehirnerschütterung Blindheit
Motor mit einem Baby in der Hand gebrochener Arm, RSI* RSI*
Hörhilfen lautes Büro
Kognition Gehirnerschütterung

Repetitive-strahlen-Verletzung: z.B. Karpaltunnelsyndrom, Tennisarm, Triggerfinger

Weitere Informationen

Wir haben bereits einiges behandelt! Sie haben gelesen über

  • Was Barrierefreiheit ist und warum sie für alle wichtig ist
  • die WCAG und die WebAIM-Checkliste zur Barrierefreiheit
  • Arten von Beeinträchtigungen, die Sie in Betracht ziehen sollten

Im weiteren Verlauf dieses Leitfadens gehen wir auf die praktischen Aspekte beim Erstellen barrierefreier Websites ein. Wir konzentrieren uns dabei auf drei Hauptthemenbereiche:

  • Fokus: Wir sehen uns an, wie man Dinge baut, die mit einer Tastatur statt mit einer Maus bedient werden können. Natürlich ist das für Nutzer mit motorischen Beeinträchtigungen wichtig, aber es sorgt auch dafür, dass Ihre UI für alle Nutzer in einem guten Zustand ist.

  • Semantik: Wir achten darauf, dass unsere Benutzeroberfläche auf eine robuste Weise ausgedrückt wird, die mit einer Vielzahl von Hilfstechnologien kompatibel ist.

  • Stil: Wir schauen uns das visuelle Design und einige Techniken an, mit denen die visuellen Elemente der Benutzeroberfläche so flexibel und nutzbar wie möglich gestaltet werden können.

Jedes dieser Themen könnte einen ganzen Kurs belegen. Daher gehen wir nicht auf jeden Aspekt der Erstellung barrierefreier Websites ein. Allerdings geben wir Ihnen für den Einstieg genügend Informationen und weisen Sie auf einige gute Seiten hin, an denen Sie mehr über die einzelnen Themen erfahren können.