Barrierefreiheit im Web

Der Zugang zu Webinhalten wie öffentliche Dienstleistungen, Bildung, E-Commerce-Seiten und Unterhaltung ist ein Menschenrecht. Niemand sollte aufgrund einer Behinderung, Rasse, geografischen Lage oder anderer menschlicher Eigenschaften ausgeschlossen werden. Dieses Modul bespricht die besten Praktiken 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 oder einem anderen Gerät arbeiten, auf dem Sie keine Dateien erstellen können, versuchen Sie, den Code in einem Online-Editor wie CodePen oder JSFiddle auszuführen.

Tutorials und Herausforderungen

Was ist Barrierefreiheit?: Dieser Artikel beginnt das Modul mit einem genauen Blick darauf, 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 die Barrierefreiheit in unseren Webentwicklungs-Workflow integrieren können.
Barrierefreiheitstools und unterstützende Technologien: Als nächstes widmen wir uns den Werkzeugen für die Barrierefreiheit, geben Informationen über die Arten von Tools, die Sie zur Lösung von Barrierefreiheitsproblemen verwenden können, und die unterstützenden Technologien, die von Menschen mit Behinderungen beim Surfen im Web verwendet werden. Sie werden diese Tools in den folgenden Artikeln verwenden.
HTML: Eine gute Grundlage für Barrierefreiheit: Ein Großteil der Webinhalte kann barrierefrei gestaltet werden, indem stets die richtigen HTML-Elemente für den richtigen Zweck verwendet werden. Dieser Artikel betrachtet im Detail, wie HTML verwendet werden kann, um maximale Barrierefreiheit sicherzustellen.
CSS- und JavaScript-Barrierefreiheit Best Practices: CSS und JavaScript können, wenn sie richtig eingesetzt werden, ebenfalls dazu beitragen, zugängliche Web-Erlebnisse zu schaffen. Wenn sie jedoch falsch verwendet werden, können sie die Barrierefreiheit erheblich beeinträchtigen. Dieser Artikel skizziert einige der besten Praktiken für 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, die unsemantisches HTML und dynamischen JavaScript-aktualisierten Inhalt beinhalten, zu erstellen. WAI-ARIA ist eine Technologie, die bei solchen Problemen helfen kann, indem sie zusätzliche Semantik hinzufügt, die von Browsern und unterstützenden Technologien erkannt und verwendet werden kann, um Benutzer über das Geschehen zu informieren. Hier zeigen wir, wie es auf einer grundlegenden Ebene verwendet werden kann, um die Barrierefreiheit zu verbessern.
Barrierefreies Multimedia: Eine weitere Kategorie von Inhalten, die Barrierefreiheitsprobleme schaffen können, ist Multimedia — Video-, Audio- und Bildinhalte müssen mit geeigneten Textalternativen versehen werden, damit sie von unterstützenden Technologien und deren Nutzern verstanden werden können. Dieser Artikel zeigt, wie das geht.
Mobile Barrierefreiheit: Da der Zugriff auf das Web von Mobilgeräten aus so beliebt ist und auf Plattformen wie iOS und Android vollwertige Barrierefreiheitstools verfügbar sind, ist es wichtig, die Barrierefreiheit Ihrer Webinhalte auf diesen Plattformen zu berücksichtigen. Dieser Artikel befasst sich mit mobil-spezifischen Barrierefreiheitsüberlegungen.
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 Bau von barrierefreien Webanwendungen: Eine hervorragende Serie von Videotutorials von Marcy Sutton.
Deque University Ressourcen: Beinhaltet Codebeispiele, Screenreader-Referenzen und andere nützliche Ressourcen.
WebAIM Ressourcen: Enthält Leitfäden, Checklisten, Tools und mehr.
Web Accessibility Evaluation Tools List: Beinhaltet eine Liste von Werkzeugen zur Bewertung der Web-Barrierefreiheit.
Lernen Sie barrierefreies Webdesign ^{MDN Lernpartner}: Der Learn Accessible Web Design Kurs von Scrimba lehrt Sie, wie Sie barrierefreies HTML schreiben, indem Sie interaktive Codier-Herausforderungen lösen und eine reale Website reparieren.