Herausforderung: Barrierefreiheit-Fehlerbehebung
In der Herausforderung dieses Moduls präsentieren wir Ihnen eine einfache Website mit einer Reihe von Barrierefreiheitsproblemen, die Sie diagnostizieren und beheben müssen.
Ausgangspunkt
Um diese Herausforderung zu beginnen, sollten Sie die ZIP-Datei mit den enthaltenen Beispieldateien herunterladen. Entpacken Sie den Inhalt in ein neues Verzeichnis auf Ihrem lokalen Computer.
Alternativ könnten Sie einen Online-Editor wie CodePen, JSFiddle oder Glitch verwenden.
Die fertige Beispielseite sollte so aussehen:
Sie werden einige Unterschiede/Probleme bei der Darstellung des Ausgangszustands der Herausforderung bemerken — dies liegt hauptsächlich an den Unterschieden im Markup, die wiederum einige Stilprobleme verursachen, da das CSS nicht korrekt angewendet wird. Keine Sorge — Sie werden diese Probleme in den kommenden Abschnitten beheben!
Hinweis: Wenn Sie stecken bleiben, können Sie uns in einem unserer Kommunikationskanäle kontaktieren.
Projektbrief
Für dieses Projekt wird Ihnen eine fiktive Naturseite präsentiert, die einen "faktischen" Artikel über Bären zeigt. So wie es jetzt steht, hat es mehrere Barrierefreiheitsprobleme — Ihre Aufgabe ist es, die bestehende Seite zu erkunden und sie so gut wie möglich zu reparieren, indem Sie die unten gestellten Fragen beantworten.
Farbe
Der Text ist aufgrund des aktuellen Farbschemas schwer lesbar. Können Sie einen Test des derzeitigen Farbkontrasts (Text/Hintergrund) durchführen, die Testergebnisse berichten und es dann beheben, indem Sie die zugewiesenen Farben ändern?
Semantisches HTML
- Der Inhalt ist immer noch nicht sehr zugänglich — berichten Sie, was passiert, wenn Sie versuchen, ihn mit einem Screenreader zu navigieren.
- Können Sie den Artikeltext aktualisieren, um ihn für Screenreader-Nutzer leichter navigierbar zu machen?
- Das Navigationselement der Seite (umgeben von
<div class="nav"></div>) könnte zugänglicher gestaltet werden, indem es in ein geeignetes semantisches HTML-Element gesetzt wird. Zu welchem Element sollte es aktualisiert werden? Machen Sie das Update.
Hinweis: Sie müssen die CSS-Regel-Selektoren, die die Tags gestalten, auf ihre richtigen Entsprechungen für die semantischen Überschriften aktualisieren. Sobald Sie Paragraph-Elemente hinzufügen, werden Sie sehen, dass das Styling besser aussieht.
Die Bilder
Die Bilder sind derzeit für Screenreader-Nutzer unzugänglich. Können Sie das beheben?
Der Audioplayer
- Der
<audio>-Player ist nicht zugänglich für Menschen mit Hörbehinderungen — können Sie eine Art zugängliche Alternative für diese Benutzer hinzufügen? - Der
<audio>-Player ist für diejenigen, die ältere Browser verwenden, die HTML-Audio nicht unterstützen, nicht zugänglich. Wie können Sie ihnen dennoch den Zugang zum Audio ermöglichen?
Die Formulare
- Das
<input>-Element im Suchformular oben könnte ein Etikett gebrauchen, aber wir möchten kein sichtbares Textelement hinzufügen, das das Design möglicherweise beeinträchtigen würde und das von sehenden Benutzern nicht wirklich benötigt wird. Wie können Sie ein Etikett hinzufügen, das nur für Screenreader zugänglich ist? - Die beiden
<input>-Elemente im Kommentarformular haben sichtbare Textelemente, sind jedoch nicht eindeutig mit ihren Etiketten verknüpft — wie erreichen Sie dies? Beachten Sie, dass Sie auch einige der CSS-Regeln aktualisieren müssen.
Die Steuerung zum Ein-/Ausblenden von Kommentaren
Der Button zur Steuerung des Ein-/Ausblendens von Kommentaren ist derzeit nicht über die Tastatur zugänglich. Können Sie ihn tastaturzugänglich machen, sowohl in Bezug auf die Fokussierung über die Tabulator-Taste als auch auf die Aktivierung über die Eingabetaste?
Die Tabelle
Die Datentabelle ist derzeit nicht sehr zugänglich — es ist für Screenreader-Nutzer schwierig, Datenzeilen und -spalten miteinander in Verbindung zu bringen, und die Tabelle hat auch keine Art von Zusammenfassung, die klar macht, was sie zeigt. Können Sie einige Funktionen zu Ihrem HTML hinzufügen, um dieses Problem zu beheben?