Barrierefreiheit

Der Zugang zu Webinhalten wie öffentliche Dienste, Bildung, E-Commerce-Sites und Unterhaltung ist ein Menschenrecht. Niemand sollte aufgrund von Behinderung, ethnischer Herkunft, geografischer Lage oder anderer menschlicher Merkmale ausgeschlossen werden. In diesem Modul werden die Best Practices und Techniken erörtert, 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 an einem Computer/Tablet/anderen Geräten arbeiten, auf denen Sie nicht die Möglichkeit haben, Ihre eigenen Dateien zu erstellen, können Sie die meisten der Code-Beispiele in einem Online-Coding-Programm wie JS Bin oder Glitch ausprobieren.

Tutorials und Herausforderungen

Was ist Barrierefreiheit?: Dieser Artikel beginnt das Modul mit einem guten Einblick in das, was Barrierefreiheit ist — dazu gehört, welche Personengruppen wir berücksichtigen müssen und warum, welche Werkzeuge verschiedene Menschen benutzen, um mit dem Web zu interagieren, und wie wir Barrierefreiheit in unseren Webentwicklungs-Workflow integrieren können.
Barrierefreiheitstools und unterstützende Technologien: Als Nächstes wenden wir uns den Barrierefreiheitstools zu und bieten Informationen über die Arten von Werkzeugen, die Sie verwenden können, um Barrierefreiheitsprobleme zu lösen, sowie über die unterstützenden Technologien, die von Menschen mit Behinderungen beim Surfen im Web eingesetzt werden. Sie werden diese Werkzeuge in den folgenden Artikeln verwenden.
HTML: Eine gute Grundlage für Barrierefreiheit: Ein großer Teil der Webinhalte kann zugänglich gemacht werden, indem einfach sichergestellt wird, dass die korrekten HTML-Elemente immer für ihre vorgesehenen Zwecke verwendet werden. Dieser Artikel betrachtet im Detail, wie HTML verwendet werden kann, um maximale Barrierefreiheit zu gewährleisten.
CSS- und JavaScript-Barrierefreiheit Best Practices: CSS und JavaScript können, wenn sie richtig eingesetzt werden, ebenfalls die Möglichkeit bieten, umfassende Web-Erlebnisse zu schaffen, aber bei falscher Anwendung können sie die Barrierefreiheit erheblich beeinträchtigen. Dieser Artikel beschreibt einige Best Practices für CSS und JavaScript, die in Betracht gezogen werden sollten, um sicherzustellen, dass auch komplexe Inhalte so barrierefrei wie möglich sind.
WAI-ARIA-Grundlagen: Aufbauend auf dem vorherigen Artikel kann das Erstellen komplexer UI-Kontrollen, die unsemantisches HTML und dynamisch aktualisierte JavaScript-Inhalte beinhalten, manchmal schwierig sein. WAI-ARIA ist eine Technologie, die bei solchen Problemen helfen kann, indem sie zusätzliche Semantik einführt, die von Browsern und unterstützenden Technologien erkannt und genutzt werden kann, um Benutzern mitzuteilen, was vor sich geht. Hier zeigen wir, wie man es auf einfache Weise nutzt, um die Barrierefreiheit zu verbessern.
Barrierefreie Multimedia-Inhalte: Eine weitere Kategorie von Inhalten, die Barrierefreiheitsprobleme verursachen können, sind Multimedia-Inhalte — Video-, Audio- und Bildinhalte müssen mit geeigneten Textalternativen versehen werden, damit sie von unterstützenden Technologien und ihren Nutzern verstanden werden können. Dieser Artikel zeigt, wie das geht.
Mobile Barrierefreiheit: Da der Webzugang auf mobilen Geräten so populär ist und beliebte Plattformen wie iOS und Android ausgefeilte Barrierefreiheitstools haben, ist es wichtig, die Barrierefreiheit Ihrer Webinhalte auf diesen Plattformen zu berücksichtigen. Dieser Artikel befasst sich mit mobil-spezifischen Überlegungen zur Barrierefreiheit.
Barrierefreiheits-Fehlerbehebung ^{Herausforderung}: In dieser Herausforderung präsentieren wir Ihnen eine einfache Website mit mehreren Barrierefreiheitsproblemen, die Sie diagnostizieren und beheben müssen.

Siehe auch

Starten Sie noch heute mit dem Aufbau barrierefreier Webanwendungen: Eine hervorragende Serie von Video-Tutorials von Marcy Sutton.
Ressourcen der Deque Universität: Beinhaltet Codebeispiele, Screenreader-Referenzen und andere nützliche Ressourcen.
WebAIM Ressourcen: Beinhaltet Leitfäden, Checklisten, Werkzeuge und mehr.
Liste der Werkzeuge zur Bewertung der Barrierefreiheit im Web: Enthält eine Liste von Werkzeugen zur Bewertung der Barrierefreiheit im Web.
Lernen Sie zugängliches Webdesign ^{MDN-Partner beim Lernen}: Der Kurs Lernen Sie zugängliches Webdesign von Scrimba lehrt Sie, wie man zugängliches HTML schreibt, indem Sie interaktive Programmierherausforderungen lösen und eine echte Website beheben.