Testen Sie Ihre Fähigkeiten: CSS- und JavaScript-Zugänglichkeit
Das Ziel dieses Fähigkeitstests ist es, zu prüfen, ob Sie unseren Artikel über die CSS- und JavaScript-Zugänglichkeitsbest Practices verstanden haben.
Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.
Wenn Sie nicht weiterkommen, können Sie uns über eine unserer Kommunikationskanäle kontaktieren.
CSS-Zugänglichkeit 1
In der ersten Aufgabe wird Ihnen eine Liste von Links präsentiert. Deren Zugänglichkeit ist jedoch ziemlich schlecht – es gibt keine Möglichkeit zu erkennen, dass es sich um Links handelt, oder zu sagen, welche gerade fokussiert ist.
Wir möchten, dass Sie annehmen, dass das bestehende Regelwerk mit dem a
-Selektor von einem CMS bereitgestellt wird und dass Sie es 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 nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
CSS-Zugänglichkeit 2
In dieser 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:
- Erklären, was die Probleme sind und welche Richtlinien die akzeptablen Werte für Farbe und Größe vorschreiben.
- Neue Werte für die Farbe und Schriftgröße auswählen, die das Problem beheben.
- Die CSS mit diesen neuen Werten aktualisieren, um das Problem zu beheben.
- Den Code testen, um sicherzustellen, dass das Problem jetzt behoben ist. Erklären, welche Werkzeuge 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 nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
JavaScript-Zugänglichkeit 1
In unserer letzten Aufgabe hier haben Sie einige JavaScripting zu erledigen. Wir haben eine App, die eine Liste von Tiernamen präsentiert. Durch Klicken auf einen der Tiernamen wird eine weitere Beschreibung dieses Tieres in einem Kasten unterhalb der Liste angezeigt.
Doch ist es nicht sehr zugänglich – im aktuellen Zustand kann man es nur mit der Maus bedienen. Wir möchten, dass Sie das HTML und JavaScript ergänzen, um es auch mit der Tastatur zugänglich zu machen.
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.