Testen Sie Ihre Fähigkeiten: CSS und JavaScript Barrierefreiheit

In der ersten Aufgabe wird Ihnen eine Liste von Links präsentiert. Deren Barrierefreiheit ist jedoch ziemlich schlecht – es ist nicht wirklich erkennbar, dass es sich um Links handelt, oder auf welchen Link der Nutzer fokussiert ist.

Wir möchten, dass Sie davon ausgehen, dass das bestehende Regelset mit dem a Selektor von einem CMS bereitgestellt wird und Sie es nicht ändern können – stattdessen müssen Sie neue Regeln erstellen, damit die Links aussehen und sich wie Links verhalten und der Nutzer erkennen kann, wo er sich in der Liste befindet.

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

In dieser nächsten Aufgabe wird Ihnen ein einfaches Stück Inhalt präsentiert – nur Überschriften und Absätze. Es gibt Barrierefreiheitsprobleme mit den Farben und der Größe des Textes; wir möchten, dass Sie:

1. Erklären, was die Probleme sind und welche Richtlinien die akzeptablen Werte für Farben und Größen angeben.
2. Neue Werte für die Farbe und Schriftgröße auswählen, die das Problem beheben.
3. Aktualisieren Sie das CSS mit diesen neuen Werten, um das Problem zu beheben.
4. Testen Sie den Code, um sicherzustellen, dass das Problem nun behoben ist. Erklären Sie, welche Werkzeuge oder Methoden Sie verwendet haben, um die neuen Werte auszuwählen und den Code zu testen.

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

In unserer letzten Aufgabe haben Sie etwas JavaScript zu bearbeiten. Wir haben eine Anwendung, die eine Liste von Tiernamen präsentiert. Wenn Sie auf einen der Tiernamen klicken, wird eine weitere Beschreibung dieses Tieres in einem Kasten unterhalb der Liste angezeigt.

Aber es ist nicht sehr barrierefrei – in seinem derzeitigen Zustand können Sie es nur mit der Maus bedienen. Wir möchten, dass Sie dem HTML und JavaScript hinzufügen, um es auch per Tastatur zugänglich zu machen.