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 möchten, dass Sie ein paar WAI-ARIA-Features hinzufügen, um die Zugänglichkeit zu verbessern:

1. Wie können Sie es ermöglichen, dass das Suchformular von Screenreadern als eigenständiges 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:

Für diese letzte WAI-ARIA-Aufgabe kehren wir zu einem Beispiel zurück, das wir zuvor im CSS- und JavaScript-Fähigkeitstest gesehen haben. Wie zuvor haben wir eine App, die eine Liste von Tiernamen präsentiert. Das Klicken auf einen der Tiernamen führt dazu, dass eine weitere Beschreibung dieses Tieres in einem Feld unterhalb der Liste erscheint. Hier beginnen wir mit einer version, die sowohl per Maus als auch Tastatur zugänglich ist.

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 Änderungen der Beschreibung vom Screenreader angekündigt werden?