Testen Sie Ihre Fähigkeiten: CSS- und JavaScript-Zugänglichkeit

In der ersten Aufgabe wird Ihnen eine Liste von Links präsentiert. Ihre Zugänglichkeit ist jedoch ziemlich schlecht — es ist nicht wirklich erkennbar, dass es sich um Links handelt, oder worauf der Benutzer fokussiert ist.

Wir möchten, dass Sie annehmen, dass die bestehenden Regeln mit dem a-Selektor von einem CMS bereitgestellt werden und dass Sie diese nicht ändern können — stattdessen müssen Sie neue Regeln erstellen, damit die Links wie Links aussehen und sich verhalten und der Benutzer erkennen kann, wo er sich in der Liste befindet.

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

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

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

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

In unserer letzten Aufgabe hier haben Sie ein bisschen JavaScript zu erledigen. Wir haben eine einfache App, die eine Liste von Tiernamen präsentiert. Wenn man auf einen der Tiernamen klickt, erscheint eine weitere Beschreibung dieses Tieres in einem Kasten unter der Liste.

Aber sie ist nicht sehr zugänglich — im aktuellen Zustand kann man sie nur mit der Maus bedienen. Wir möchten, dass Sie dem HTML und JavaScript hinzufügen, um sie auch per Tastatur zugänglich zu machen.