Barrierefreiheit

Zugang zu Webinhalten wie öffentliche Dienstleistungen, Bildung, E-Commerce-Seiten und Unterhaltung ist ein Menschenrecht. Niemand sollte aufgrund von Behinderung, Rasse, geographischer Lage oder anderen menschlichen Merkmalen ausgeschlossen werden. Dieses Modul behandelt die besten Praktiken und Techniken, die Sie erlernen sollten, um Ihre Websites so zugänglich 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, bei denen Sie nicht in der Lage sind, Ihre eigenen 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 startet das Modul mit einem guten Blick auf das, was Barrierefreiheit ist — dazu gehört, welche Personengruppen wir berücksichtigen müssen und warum, welche Werkzeuge unterschiedliche Menschen verwenden, um mit dem Web zu interagieren, und wie wir Barrierefreiheit zu einem Teil unseres Webentwicklungs-Workflows machen können.
Werkzeuge für Barrierefreiheit und unterstützende Technologien: Als nächstes richten wir unsere Aufmerksamkeit auf Werkzeuge für Barrierefreiheit und bieten Informationen über die Arten von Werkzeugen, die Sie verwenden können, um Barrierefreiheitsprobleme zu lösen, und die unterstützenden Technologien, die von Menschen mit Behinderungen beim Surfen im Web genutzt werden. Sie werden diese Werkzeuge in den folgenden Artikeln verwenden.
HTML: Eine gute Basis für Barrierefreiheit: Ein großer Teil der Webinhalte kann barrierefrei gestaltet werden, indem darauf geachtet wird, dass die richtigen HTML-Elemente immer für den richtigen Zweck verwendet werden. Dieser Artikel betrachtet im Detail, wie HTML genutzt werden kann, um maximale Barrierefreiheit zu gewährleisten.
CSS und JavaScript: Best Practices für Barrierefreiheit: CSS und JavaScript, wenn sie korrekt eingesetzt werden, haben auch das Potenzial, barrierefreie Web-Erfahrungen zu ermöglichen, aber wenn sie falsch verwendet werden, können sie die Barrierefreiheit erheblich beeinträchtigen. Dieser Artikel skizziert einige CSS- und JavaScript-Best Practices, die berücksichtigt werden sollten, um sicherzustellen, dass auch komplexe Inhalte so barrierefrei wie möglich sind.
WAI-ARIA Grundlagen: Im Anschluss an den vorherigen Artikel kann es manchmal schwierig sein, komplexe UI-Kontrollen zu erstellen, die nicht-semantisches HTML und dynamisch aktualisierte JavaScript-Inhalte beinhalten. 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 genutzt werden kann, um den Nutzern mitzuteilen, was geschieht. Hier zeigen wir, wie sie auf einfache Weise eingesetzt werden kann, um die Barrierefreiheit zu verbessern.
Barrierefreie Multimedia-Inhalte: Eine weitere Kategorie von Inhalten, die Barrierefreiheitsprobleme aufwerfen können, ist Multimedia — Video-, Audio- und Bildinhalte müssen mit geeigneten textlichen Alternativen versehen werden, damit sie für unterstützende Technologien und deren Nutzer verständlich sind. Dieser Artikel zeigt wie.
Mobilgeräte und Barrierefreiheit: Da der Zugriff auf das Web über Mobilgeräte so verbreitet ist und beliebte Plattformen wie iOS und Android über vollwertige Barrierefreiheitswerkzeuge verfügen, ist es wichtig, die Barrierefreiheit Ihrer Webinhalte auf diesen Plattformen zu berücksichtigen. Dieser Artikel betrachtet mobil-spezifische Barrierefreiheitsüberlegungen.
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

Learn Accessible Web Design ^{MDN Curriculum partner}: Der Learn Accessible Web Design-Kurs von Scrimba lehrt Sie, wie Sie barrierefreies HTML schreiben, indem Sie interaktive Programmier-Herausforderungen lösen und eine echte Website reparieren.
Start Building Accessible Web Applications Today: Eine ausgezeichnete Serie von Videotutorials von Marcy Sutton.
Deque University Ressourcen: Beinhaltet Code-Beispiele, Referenzen für Screenreader und andere nützliche Ressourcen.
WebAIM Ressourcen: Beinhaltet Leitfäden, Checklisten, Werkzeuge und mehr.
Liste der Werkzeuge zur Evaluation der Web-Barrierefreiheit: Beinhaltet eine Liste von Werkzeugen zur Evaluation der Web-Barrierefreiheit.