Testen Sie Ihre Fähigkeiten: WAI-ARIA

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

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

In unserer zweiten WAI-ARIA-Aufgabe präsentieren wir ein einfaches Suchformular, und wir möchten, dass Sie ein paar WAI-ARIA-Features hinzufügen, um dessen Zugänglichkeit zu verbessern:

1. Wie können Sie das Suchformular von Screenreadern als eigenständiges Landmark auf der Seite benannt lassen, damit es leicht auffindbar ist?
2. Wie können Sie dem Suchfeld ein geeignetes Label geben, ohne explizit ein sichtbares Textlabel zum DOM hinzuzufügen?

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

Für diese letzte WAI-ARIA-Aufgabe kehren wir zu einem Beispiel zurück, das wir zuvor im CSS- und JavaScript-Fähigkeiten-Test gesehen haben. Wie zuvor haben wir eine App, die eine Liste von Tiernamen zeigt. Das Anklicken eines der Tiernamen führt dazu, dass eine weitere Beschreibung dieses Tieres in einem Feld unterhalb der Liste erscheint. Hier beginnen wir mit einer maus- und tastaturzugänglichen Version.

Das Problem, das wir jetzt haben, ist, dass Screenreader nicht erkennen können, was sich verändert hat, wenn sich das DOM so ändert, dass eine neue Beschreibung angezeigt wird. Können Sie es so aktualisieren, dass Änderungen der Beschreibung vom Screenreader angekündigt werden?