Testen Sie Ihre Fähigkeiten: HTML-Zugänglichkeit

In dieser Aufgabe testen wir Ihr Verständnis von Textsemantik und warum diese für die Barrierefreiheit wichtig ist. Der gegebene Text ist ein einfaches Informationsfenster mit Aktionsschaltflächen, aber das HTML ist wirklich schlecht.

Wir möchten, dass Sie es aktualisieren und geeignete semantische HTML-Tags verwenden. Sie müssen sich keine Sorgen machen, das genau gleiche Aussehen und die gleiche Textgröße nachzubilden, solange die Semantik gut ist.

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel zu reproduzieren:

In der zweiten Aufgabe haben Sie ein Formular mit drei Eingabefeldern. Sie müssen:

• Die Eingabefelder semantisch mit ihren Labels verknüpfen.
• Davon ausgehen, dass diese Eingaben Teil eines größeren Formulars sein werden, und sie in einem Element zusammenfassen, das sie alle als eine einzelne verwandte Gruppe zusammenfasst.
• Der Gruppe eine Beschreibung/einen Titel geben, der alle Informationen als persönliche Daten zusammenfasst.

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel zu reproduzieren:

In dieser Aufgabe müssen Sie alle Informationslinks im Absatz in gute, zugängliche Links umwandeln.

• Die ersten beiden Links führen zu regulären Webseiten.
• Der dritte Link führt zu einem PDF, und es ist groß — 8 MB.
• Der vierte Link führt zu einem Word-Dokument, sodass der Benutzer eine Anwendung installiert haben muss, die das verarbeiten kann.

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel zu reproduzieren:

In unserer letzten HTML-Zugänglichkeitsaufgabe erhalten Sie eine einfache Bildergalerie, die einige Zugänglichkeitsprobleme hat. Können Sie diese beheben?

• Das Headerbild hat ein Zugänglichkeitsproblem, ebenso wie die Galerie-Bilder.
• Sie könnten das Headerbild weiterführen und es mit CSS implementieren, um möglicherweise eine bessere Zugänglichkeit zu erzielen. Warum ist das besser, und wie würde eine Lösung aussehen?

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel zu reproduzieren: