Testen Sie Ihre Fähigkeiten: WAI-ARIA

Das Ziel dieses Fähigkeitstests ist zu prüfen, ob Sie unseren Artikel zu den WAI-ARIA Grundlagen 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 in einem unserer Kommunikationskanäle an uns wenden.

WAI-ARIA 1

In unserer ersten ARIA-Aufgabe präsentieren wir Ihnen einen Abschnitt mit nicht-semantischem Markup, das offensichtlich als Liste gedacht ist. Angenommen, Sie können die verwendeten Elemente nicht ändern, wie können Sie es den Screenreader-Nutzern ermöglichen, dies als Liste zu erkennen?

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 zu arbeiten.

WAI-ARIA 2

In unserer zweiten WAI-ARIA-Aufgabe stellen wir ein einfaches Suchformular zur Verfügung, und wir möchten, dass Sie ein paar WAI-ARIA-Funktionen hinzufügen, um dessen Zugänglichkeit zu verbessern:

  1. Wie können Sie es ermöglichen, dass das Suchformular von Screenreadern als separates Landmark auf der Seite aufgerufen wird, um es leicht auffindbar zu machen?
  2. Wie können Sie dem Sucheingabefeld ein geeignetes Label geben, ohne explizit ein sichtbares Text-Label zum DOM hinzuzufügen?

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 zu arbeiten.

WAI-ARIA 3

Für diese letzte WAI-ARIA-Aufgabe kehren wir zu einem Beispiel zurück, das wir bereits im CSS- und JavaScript-Fähigkeitstest gesehen haben. Wie zuvor haben wir eine App, die eine Liste von Tiernamen präsentiert. Wenn Sie auf einen der Tiernamen klicken, erscheint eine weitere Beschreibung dieses Tieres in einem Kasten unterhalb der Liste. Hier beginnen wir mit einer Maus- und Tastatur-zugänglichen Version.

Das Problem, das wir jetzt haben, ist, dass wenn sich das DOM ändert, um eine neue Beschreibung anzuzeigen, Screenreader nicht erkennen können, was sich geändert hat. Können Sie es so aktualisieren, dass Screenreader die Änderungen der Beschreibung ankündigen?

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