Herausforderung: Barrierefreiheits-Fehlerbehebung
In der Herausforderung für dieses Modul präsentieren wir Ihnen eine einfache Seite 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 Dateien, die das Beispiel ausmachen, herunterladen. Entpacken Sie den Inhalt in ein neues Verzeichnis irgendwo auf Ihrem lokalen Computer.
Alternativ können Sie einen Online-Editor wie CodePen, JSFiddle oder Glitch verwenden.
Die fertige Herausforderungsseite sollte so aussehen:
Sie werden einige Unterschiede/Probleme mit der Anzeige des Ausgangszustands der Herausforderung sehen — dies liegt hauptsächlich an den Unterschieden im Markup, was wiederum einige Stilprobleme verursacht, da das CSS nicht richtig angewendet wird. Keine Sorge — Sie werden diese Probleme in den kommenden Abschnitten beheben!
Hinweis: Wenn Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.
Projektbeschreibung
Für dieses Projekt wird Ihnen eine fiktive Naturseite präsentiert, die einen "faktischen" Artikel über Bären anzeigt. Wie es derzeit steht, hat es eine Reihe von Barrierefreiheitsproblemen — Ihre Aufgabe ist es, die bestehende Seite zu erkunden und diese so gut wie möglich zu beheben, indem Sie die unten gestellten Fragen beantworten.
Farbe
Der Text ist aufgrund des aktuellen Farbschemas schwer lesbar. Können Sie einen Test des aktuellen Farbkontrasts (Text/Hintergrund) durchführen, die Ergebnisse des Tests 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 es den Benutzern von Screenreadern zu erleichtern, zu navigieren?
- Der Navigationsmenüteil der Seite (eingewickelt in
<div class="nav"></div>) könnte zugänglicher gemacht werden, indem er in ein angemessenes semantisches HTML-Element gesetzt wird. Welches sollte es aktualisiert werden? Machen Sie die Aktualisierung.
Hinweis: Sie müssen die CSS-Regelselektoren aktualisieren, die die Tags zu ihren richtigen Äquivalenten für die semantischen Überschriften gestalten. Sobald Sie Absatzelemente hinzufügen, werden Sie bemerken, dass das Styling besser aussieht.
Die Bilder
Die Bilder sind derzeit für Benutzer von Screenreadern nicht zugänglich. Können Sie das beheben?
Der Audioplayer
- Der
<audio>-Player ist für hörgeschädigte (taube) Menschen nicht zugänglich — können Sie eine Art von zugänglicher Alternative für diese Benutzer hinzufügen? - Der
<audio>-Player ist für diejenigen nicht zugänglich, die ältere Browser verwenden, die HTML-Audio nicht unterstützen. Wie können Sie es ihnen dennoch ermöglichen, auf das Audio zuzugreifen?
Die Formulare
- Das
<input>-Element im Suchformular oben könnte ein Label gebrauchen, aber wir möchten kein sichtbares Textlabel hinzufügen, das möglicherweise das Design beeinträchtigen würde und von sehenden Benutzern nicht wirklich benötigt wird. Wie können Sie ein Label hinzufügen, das nur für Screenreader zugänglich ist? - Die beiden
<input>-Elemente im Kommentarsformular haben sichtbare Textlabels, sind aber nicht eindeutig mit ihren Labels verbunden — wie erreichen Sie das? Beachten Sie, dass Sie auch einige der CSS-Regel aktualisieren müssen.
Die Steuerung für Kommentare ein-/ausblenden
Die Taste für Kommentare ein-/ausblenden ist derzeit nicht tastaturzugänglich. Können Sie sie tastaturzugänglich machen, sowohl im Hinblick auf das Fokussieren mit der Tabulatortaste als auch auf das Aktivieren mit der Eingabetaste?
Die Tabelle
Die Datentabelle ist derzeit nicht sehr zugänglich — es ist schwierig für Screenreader-Benutzer, Datenzeilen und -spalten miteinander zu verknüpfen, und die Tabelle hat auch keine Art von Zusammenfassung, um deutlich zu machen, was sie zeigt. Können Sie einige Funktionen zu Ihrem HTML hinzufügen, um dieses Problem zu beheben?