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 eine Liste gedacht ist. Angenommen, Sie können die verwendeten Elemente nicht ändern, wie können Sie es ermöglichen, dass Screenreader diese als Liste 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 einem Screenreader als separates Landmark auf der Seite aufrufen lassen, um es leicht auffindbar zu machen?
2. Wie können Sie dem Sucheingabefeld eine passende Beschriftung 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 bereits im CSS- und JavaScript-Fähigkeitstest gesehen haben. Wie zuvor haben wir eine einfache 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 tastaturzugänglichen Version.

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