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

In dieser Aufgabe testen wir Ihr Verständnis von Textsemantik und warum sie für die Barrierefreiheit gut ist. Der gegebene Text ist ein Informationspanel mit Aktionstasten, aber das HTML ist wirklich schlecht.

Wir möchten, dass Sie es mit geeignetem semantischen HTML aktualisieren. Sie müssen sich nicht allzu sehr darauf konzentrieren, genau das gleiche Aussehen und die Textgröße nachzubilden, solange die Semantik gut ist.

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

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

• Die Eingabefelder semantisch mit ihren Beschriftungen verknüpfen.
• Annehmen, dass diese Eingaben Teil eines größeren Formulars sein werden, und sie in einem Element zusammenfassen, das sie alle als eine zusammenhängende Gruppe verbindet.
• Der Gruppe eine Beschreibung/Titel geben, die alle Informationen zusammenfasst als persönliche Daten.

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

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

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

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

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

• Das Header-Bild hat ein Zugänglichkeitsproblem, ebenso wie die Galeriebilder.
• Sie könnten das Header-Bild weiter verbessern und es mit CSS für eine möglicherweise bessere Zugänglichkeit implementieren. Warum ist dies besser, und wie würde eine Lösung aussehen?

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