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

Das Ziel dieses Fähigkeitstests ist zu überprüfen, ob Sie unseren Artikel HTML: Eine gute Grundlage für Barrierefreiheit verstanden haben.

Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.

Wenn Sie nicht weiterkommen, können Sie über einen unserer Kommunikationskanäle mit uns Kontakt aufnehmen.

HTML-Zugänglichkeit 1

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

Wir möchten, dass Sie es aktualisieren, um angemessenes semantisches HTML zu verwenden. Es ist nicht wichtig, das exakte gleiche Aussehen und die gleiche Textgröße zu reproduzieren, solange die Semantik gut ist.

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

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.

HTML-Zugänglichkeit 2

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

  • Semantisch die Eingaben mit ihren Beschriftungen verknüpfen.
  • Annehmen, dass diese Eingaben Teil eines größeren Formulars sein werden, und sie in ein Element einwickeln, das sie alle als eine einzelne verwandte Gruppe zusammenfasst.
  • Der Gruppe eine Beschreibung/einen Titel geben, die/der alle Informationen als persönliche Daten zusammenfasst.

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

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.

HTML-Zugänglichkeit 3

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

  • Die ersten beiden Links führen einfach 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 irgendeine Anwendung installiert haben muss, die das verarbeiten kann.

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

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.

HTML-Zugänglichkeit 4

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 die Galerie-Bilder.
  • Sie könnten das Header-Bild weiterführen und es mit CSS für eine möglicherweise bessere Zugänglichkeit implementieren. Warum ist das besser und wie könnte eine Lösung aussehen?

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

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.