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

Das Ziel dieses Fähigkeitstests ist es zu beurteilen, ob Sie unseren Artikel HTML: Eine gute Basis 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 sich über einen unserer Kommunikationskanäle an uns wenden.

HTML-Zugänglichkeit 1

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

Wir möchten, dass Sie es in entsprechendes semantisches HTML aktualisieren. Sie müssen sich nicht allzu sehr um die genaue Wiederherstellung des exakt gleichen Aussehens und der Textgröße kümmern, solange die Semantik gut ist.

Versuchen Sie, den Live-Code unten 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 daran zu arbeiten.

HTML-Zugänglichkeit 2

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

  • Die Eingaben semantisch mit ihren Beschriftungen verknüpfen.
  • Annehmen, dass diese Eingaben Teil eines größeren Formulars sein werden, und sie in ein Element einschließen, das sie alle zusammen als eine einzige verwandte Gruppe assoziiert.
  • 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 nachzubilden:

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

HTML-Zugänglichkeit 3

In dieser Aufgabe müssen 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ß — 8MB.
  • Der vierte Link führt zu einem Word-Dokument, daher benötigt der Benutzer irgendeine Art von Anwendung, die damit umgehen kann.

Versuchen Sie, den Live-Code unten 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 daran 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 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 würde eine Lösung aussehen?

Versuchen Sie, den Live-Code unten 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 daran zu arbeiten.