Barrierefreiheit im Web

Der Zugang zu webbasierten Inhalten wie öffentlichen Diensten, Bildung, E-Commerce-Seiten und Unterhaltung ist ein Menschenrecht. Niemand sollte aufgrund von Behinderung, Rasse, geografischer Lage oder anderen menschlichen Merkmalen ausgeschlossen werden. In diesem Modul werden die Best Practices und Techniken besprochen, die Sie erlernen sollten, um Ihre Websites so barrierefrei wie möglich zu gestalten.

Voraussetzungen

Sie sollten mit HTML, CSS und JavaScript vertraut sein, bevor Sie mit diesem Modul beginnen.

Hinweis: Wenn Sie auf einem Computer/Tablet/anderen Geräten arbeiten, auf denen Sie keine eigenen Dateien erstellen können, können Sie die meisten der Codebeispiele in einem Online-Coding-Programm wie JS Bin oder Glitch ausprobieren.

Tutorials und Herausforderungen

Was ist Barrierefreiheit?: Dieser Artikel startet das Modul mit einem guten Einblick in die Barrierefreiheit – dazu gehört, welche Personengruppen wir berücksichtigen müssen und warum, welche Werkzeuge verschiedene Menschen verwenden, um mit dem Web zu interagieren, und wie wir Barrierefreiheit in unseren Webentwicklungs-Workflow integrieren können.
Tooling für Barrierefreiheit und assistive Technologien: Danach richten wir den Blick auf Tools für Barrierefreiheit und bieten Informationen zu den Werkzeugen, die Sie verwenden können, um Barrierefreiheitsprobleme zu lösen, sowie zu den assistiven Technologien, die von Menschen mit Behinderungen beim Surfen im Web verwendet werden. Diese Tools werden in den folgenden Artikeln verwendet.
HTML: Eine gute Grundlage für Barrierefreiheit: Ein Großteil der Webinhalte kann barrierefrei gestaltet werden, indem sichergestellt wird, dass die richtigen HTML-Elemente immer für den richtigen Zweck verwendet werden. Dieser Artikel untersucht im Detail, wie HTML verwendet werden kann, um maximale Barrierefreiheit zu gewährleisten.
CSS- und JavaScript-Praktiken für Barrierefreiheit: CSS und JavaScript können, wenn sie richtig eingesetzt werden, ebenfalls barrierefreie Web-Erfahrungen ermöglichen, aber bei falscher Anwendung kann die Barrierefreiheit erheblich beeinträchtigt werden. Dieser Artikel beschreibt einige CSS- und JavaScript-Best-Practices, die berücksichtigt werden sollten, um sicherzustellen, dass auch komplexe Inhalte so barrierefrei wie möglich sind.
Grundlagen von WAI-ARIA: Im Anschluss an den vorherigen Artikel kann es manchmal schwierig sein, komplexe UI-Steuerelemente zu erstellen, die unsemantisches HTML und dynamisch mithilfe von JavaScript aktualisierte Inhalte umfassen. WAI-ARIA ist eine Technologie, die bei solchen Problemen helfen kann, indem sie zusätzliche Semantik hinzufügt, die von Browsern und assistiven Technologien erkannt und verwendet werden kann, um den Nutzern mitzuteilen, was vor sich geht. Hier zeigen wir, wie man es auf grundlegender Ebene verwendet, um die Barrierefreiheit zu verbessern.
Barrierefreie Multimedia-Inhalte: Eine weitere Kategorie von Inhalten, die Barrierefreiheitsprobleme verursachen kann, sind Multimedia-Inhalte – Video-, Audio- und Bildinhalte müssen mit geeigneten Textalternativen versehen werden, damit sie von assistiven Technologien und deren Nutzern verstanden werden können. Dieser Artikel zeigt, wie das funktioniert.
Mobile Barrierefreiheit: Da der Zugriff auf das Web über mobile Geräte so beliebt ist und beliebte Plattformen wie iOS und Android über umfassende Barrierefreiheits-Tools verfügen, ist es wichtig, die Barrierefreiheit Ihrer Webinhalte auf diesen Plattformen zu berücksichtigen. Dieser Artikel befasst sich mit mobilen spezifischen Überlegungen zur Barrierefreiheit.
Fehlerbehebung bei Barrierefreiheit ^{Herausforderung}: In dieser Herausforderung präsentieren wir Ihnen eine einfache Seite mit mehreren Barrierefreiheitsproblemen, die Sie diagnostizieren und beheben müssen.

Siehe auch

Starten Sie noch heute mit dem Erstellen barrierefreier Webanwendungen: Eine ausgezeichnete Reihe von Video-Tutorials von Marcy Sutton.
Deque University Ressourcen: Beinhaltet Code-Beispiele, Screenreader-Referenzen und andere nützliche Ressourcen.
WebAIM Ressourcen: Beinhaltet Leitfäden, Checklisten, Werkzeuge und mehr.
Liste der Web Accessibility Evaluation Tools: Beinhaltet eine Liste von Evaluationswerkzeugen für die Barrierefreiheit im Web.
Lernen Sie barrierefreies Webdesign ^{MDN Lernpartner}: Der Lernen Sie barrierefreies Webdesign-Kurs von Scrimba lehrt Sie, wie Sie zugängliches HTML schreiben, indem Sie interaktive Coding-Herausforderungen lösen und eine Website aus der realen Welt reparieren.