Testen Sie Ihr Können: WAI-ARIA

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 Bildschirmleser-Nutzern ermöglichen, dies als Liste zu erkennen?

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

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

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

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

Für diese letzte WAI-ARIA-Aufgabe kehren wir zu einem Beispiel zurück, das wir bereits im CSS- und JavaScript-Test 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 unter der Liste. Hier starten wir mit einer Maus- und Tastatur-kompatiblen Version.

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