Bewertung: Barrierefreiheits-Troubleshooting

Um mit dieser Bewertung zu beginnen, sollten Sie sich die ZIP-Datei herunterladen, die die Beispieldateien enthält. Extrahieren Sie die Inhalte in ein neues Verzeichnis auf Ihrem lokalen Computer.

Alternativ können Sie einen Online-Editor wie CodePen, JSFiddle oder Glitch verwenden.

Die fertige Bewertungswebsite sollte so aussehen:

Sie werden einige Unterschiede/Probleme in der Anzeige des Ausgangszustands der Bewertung bemerken — dies liegt hauptsächlich an den Unterschieden in der Markup-Struktur, die wiederum einige Styling-Probleme verursachen, da das CSS nicht richtig angewendet wird. Keine Sorge — Sie werden diese Probleme in den kommenden Abschnitten beheben!

Für dieses Projekt erhalten Sie eine fiktive Natur-Website, die einen "faktischen" Artikel über Bären anzeigt. Wie es derzeit steht, hat sie eine Reihe von Barrierefreiheitsproblemen — Ihre Aufgabe ist es, die bestehende Website zu erkunden und sie bestmöglich zu reparieren, indem Sie die unten gestellten Fragen beantworten.

Der Text ist aufgrund des aktuellen Farbschemas schwer zu lesen. Können Sie einen Test des aktuellen Farbkontrasts (Text/Hintergrund) durchführen, die Ergebnisse des Tests berichten und ihn dann durch Ändern der zugewiesenen Farben beheben?

1. Der Inhalt ist immer noch nicht sehr zugänglich — berichten Sie, was passiert, wenn Sie versuchen, ihn mit einem Screenreader zu navigieren.
2. Können Sie den Artikeltag-Text aktualisieren, um ihn für Benutzer von Screenreadern leichter navigierbar zu machen?
3. Der Navigationsmenü-Teil der Seite (umgeben von <div class="nav"></div>) könnte zugänglicher gemacht werden, indem er in ein richtiges HTML-Semantikelement eingefügt wird. Zu welchem sollte er aktualisiert werden? Machen Sie das Update.

Die Bilder sind derzeit für Benutzer von Screenreadern nicht zugänglich. Können Sie das beheben?

1. Der <audio>-Player ist für hörgeschädigte (taube) Menschen nicht zugänglich — können Sie eine Art zugängliche Alternative für diese Benutzer hinzufügen?
2. Der <audio>-Player ist nicht für Benutzer zugänglich, die ältere Browser verwenden, die HTML-Audio nicht unterstützen. Wie können Sie ihn ihnen dennoch zugänglich machen?

1. Das <input>-Element im Suchformular oben könnte mit einem Etikett versehen werden, aber wir wollen kein sichtbares Textelement hinzufügen, das das Design potenziell verderben könnte und von sehenden Benutzern nicht wirklich benötigt wird. Wie können Sie ein Etikett hinzufügen, das nur für Screenreader zugänglich ist?
2. Die beiden <input>-Elemente im Kommentarformular haben sichtbare Textelemente, sind aber nicht eindeutig mit ihren Etiketten verbunden — wie erreichen Sie das? Beachten Sie, dass Sie auch einige CSS-Regeln aktualisieren müssen.

Die Steuerung zum Anzeigen/Verbergen von Kommentaren ist derzeit nicht tastaturzugänglich. Können Sie sie tastaturzugänglich machen, sowohl in Bezug auf das Fokussieren mit der Tabulatortaste als auch auf das Aktivieren mit der Eingabetaste?

Die Datentabelle ist derzeit nicht sehr zugänglich — es ist schwierig für Benutzer von Screenreadern, Datenzeilen und -spalten miteinander zu verknüpfen, und die Tabelle hat außerdem keine Art von Zusammenfassung, um klarzumachen, was sie zeigt. Können Sie Ihrer HTML einige Funktionen hinzufügen, um dieses Problem zu beheben?

Können Sie zwei weitere Ideen für Verbesserungen auflisten, die die Website barrierefreier machen würden?

• Zurück
• Übersicht: Accessibility