Barrierefreiheit im Web

Der Zugang zu Webinhalten wie öffentlichen Diensten, Bildung, E-Commerce-Seiten und Unterhaltung ist ein Menschenrecht. Niemand sollte aufgrund von Behinderungen, Rasse, geografischer Lage oder anderen menschlichen Merkmalen ausgeschlossen werden. Dieses Modul behandelt die Best Practices und Techniken, 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, eigene Dateien zu erstellen, 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 beginnt das Modul mit einem guten Überblick darüber, was Barrierefreiheit ist — 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.
Barrierefreiheitstools und unterstützende Technologien: Als Nächstes richten wir unsere Aufmerksamkeit auf Barrierefreiheitstools und bieten Informationen zu den Arten von Werkzeugen, die Sie zur Lösung von Barrierefreiheitsproblemen verwenden können, sowie zu den unterstützenden Technologien, die von Menschen mit Behinderungen beim Surfen im Web genutzt werden. Sie werden diese Werkzeuge in den nachfolgenden Artikeln verwenden.
HTML: Eine gute Grundlage für Barrierefreiheit: Ein großer Teil der Webinhalte kann barrierefrei gestaltet werden, indem einfach sichergestellt wird, dass die richtigen HTML-Elemente stets für den richtigen Zweck verwendet werden. Dieser Artikel untersucht im Detail, wie HTML genutzt werden kann, um maximale Barrierefreiheit zu gewährleisten.
CSS- und JavaScript-Barrierefreiheit Best Practices: CSS und JavaScript haben bei korrekter Anwendung das Potenzial, barrierefreie Web-Erlebnisse zu ermöglichen, können jedoch bei Missbrauch die Barrierefreiheit erheblich beeinträchtigen. Dieser Artikel skizziert einige Best Practices in Bezug auf CSS und JavaScript, die berücksichtigt werden sollten, um sicherzustellen, dass auch komplexe Inhalte so barrierefrei wie möglich sind.
WAI-ARIA Grundlagen: Aufbauend auf dem vorherigen Artikel kann es manchmal schwierig sein, komplexe UI-Steuerelemente zu erstellen, die unsemantisches HTML und dynamisch aktualisierte JavaScript-Inhalte umfassen. WAI-ARIA ist eine Technologie, die bei solchen Problemen helfen kann, indem sie zusätzliche Semantiken hinzufügt, die von Browsern und unterstützenden Technologien erkannt und genutzt werden können, um Benutzern mitzuteilen, was passiert. Hier zeigen wir, wie man es auf grundlegender Ebene nutzt, um die Barrierefreiheit zu verbessern.
Barrierefreie Multimedia-Inhalte: Eine weitere Kategorie von Inhalten, die Barrierefreiheitsprobleme schaffen kann, sind Multimedia-Inhalte — Video-, Audio- und Bildmaterial muss mit entsprechenden Textalternativen versehen werden, damit sie von unterstützenden Technologien und deren Nutzern verstanden werden können. Dieser Artikel zeigt, wie dies geschieht.
Mobile Barrierefreiheit: Da der Zugang zum Web auf mobilen Geräten so beliebt ist und beliebte Plattformen wie iOS und Android über umfassende Barrierefreiheitswerkzeuge verfügen, ist es wichtig, die Barrierefreiheit Ihrer Webinhalte auf diesen Plattformen zu berücksichtigen. Dieser Artikel beleuchtet mobile spezifische Überlegungen zur Barrierefreiheit.
Barrierefreiheits-Fehlerbehebung ^{Herausforderung}: In dieser Herausforderung stellen wir Ihnen eine einfache Website mit mehreren Barrierefreiheitsproblemen vor, die Sie diagnostizieren und beheben müssen.

Siehe auch

Starten Sie noch heute mit dem Aufbau barrierefreier Webanwendungen: Eine ausgezeichnete Serie von Videotutorials von Marcy Sutton.
Deque University Ressourcen: Beinhaltet Codebeispiele, Screenreader-Referenzen und andere nützliche Ressourcen.
WebAIM Ressourcen: Beinhaltet Leitfäden, Checklisten, Werkzeuge und mehr.
Web Accessibility Evaluation Tools List: Enthält eine Liste von Werkzeugen zur Bewertung der Barrierefreiheit im Web.
Lernen Sie barrierefreies Webdesign ^{MDN Lernpartner}: Der Kurs Learn Accessible Web Design von Scrimba lehrt Sie, wie Sie barrierefreies HTML schreiben, indem Sie interaktive Codierungsherausforderungen lösen und eine real existierende Website verbessern.