Testen Sie Ihr Wissen: HTML-Zugänglichkeit

In dieser Aufgabe prüfen wir Ihr Verständnis von Textsemantik und warum sie für die Zugänglichkeit wichtig ist. Der gegebene Text ist ein Informationspanel mit Aktionsschaltflächen, aber das HTML ist wirklich schlecht.

Wir möchten, dass Sie es aktualisieren und angemessenes semantisches HTML verwenden. Sie müssen sich nicht zu sehr darum kümmern, das exakte Aussehen und die Textgröße nachzubilden, solange die Semantik gut ist.

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

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

• Semantisch die Eingaben mit ihren Labels verknüpfen.
• Annehmen, dass diese Eingaben Teil eines größeren Formulars sind, und sie in ein Element einbetten, das sie alle zusammen als eine einzelne verwandte Gruppe verbindet.
• Der Gruppe eine Beschreibung/Titel geben, die alle Informationen als persönliche Daten zusammenfasst.

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

In dieser Aufgabe sollen Sie alle Informationslinks im Absatz in gute, zugängliche Links verwandeln.

• Die ersten beiden Links führen zu regulären Webseiten.
• Der dritte Link führt zu einem PDF, das groß ist — 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 Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

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

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

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