Die Neuerungen in 2.2: Fokusdarstellung und Zielgröße
Wenden Sie die Kriterien an, die in der neuesten Version neu sind.
Die Neuerungen in 2.2: Fokusdarstellung und Zielgröße ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Die Neuerungen von 2.2
WCAG 2.2 hat 2023 neun neue Erfolgskriterien hinzugefügt. Zwei der praktischsten für alltägliche Benutzeroberflächen sind Fokusdarstellung und Zielgröße.
Fokus nicht verdeckt
Die neue Regel 2.4.11 (Fokus nicht verdeckt) auf Stufe AA besagt, dass das fokussierte Element nicht vollständig von fixierten Kopfzeilen oder Cookie-Leisten verdeckt werden darf.
Warum ein verdeckter Fokus problematisch ist
Wenn ein fixiertes Banner das fokussierte Steuerelement verdeckt, verlieren Tastaturbenutzer die Orientierung. Sie müssen das Element sehen können, zu dem sie gerade navigiert haben.
Fokusdarstellung auf AAA
Kriterium 2.4.13 (Fokusdarstellung) gehört zu AAA. Es legt eine minimale Indikatorfläche und einen Kontrast von 3:1 fest, damit der Fokusring unmissverständlich erkennbar ist.
Zielgröße (Minimum)
Die AA-Regel 2.5.8 (Zielgröße – Minimum) fordert, dass Touch-Ziele mindestens 24 × 24 CSS-Pixel groß sind oder ausreichend Abstand zu anderen Zielen haben.
Warum 24 Pixel
Kleine Ziele sind für Menschen mit Zittern oder großen Fingern schwer zu treffen. Ein Mindestmaß von 24px verringert Fehlbedienungen, ohne überall ein klobiges Design zu erzwingen.
Die Ausnahme für Abstände
Ein Ziel unter 24px kann trotzdem die Anforderungen erfüllen, wenn ein 24px-Kreis um seine Mitte kein benachbartes Ziel überschneidet. Ausreichender Abstand gleicht die geringere Größe aus.
Die Größe eines Ziels in CSS festlegen
Geben Sie kleinen Buttons eine echte Mindestgröße, damit sie die Grenze von 24px bequem einhalten.
button {
min-width: 24px;
min-height: 24px;
}Inline-Links sind ausgenommen
Links innerhalb eines Satzes sind von 2.5.8 ausgenommen, da das Vergrößern durch eine Verkleinerung des Textes das Leseerlebnis beeinträchtigen würde.
Konsistente Hilfe: 3.2.6
Eine weitere Ergänzung von 2.2, 3.2.6 (Konsistente Hilfe) auf Stufe A, sorgt dafür, dass Hilfelinks und Kontaktinformationen auf verschiedenen Seiten an derselben relativen Stelle erscheinen.
Redundante Eingabe: 3.3.7
Kriterium 3.3.7 (Redundante Eingabe) auf Stufe A besagt, dass Benutzer Informationen, die sie bereits eingegeben haben, nicht erneut eingeben müssen sollten, außer sie sind wie ein Passwort unverzichtbar.
Kurzer Check
Rufen Sie die minimale Größe von Touch-Zielen nach WCAG 2.2 ab.
Zusammenfassung: Die Ergänzungen von 2.2
2.2 ergänzt Regeln zu Fokus und Zielgröße: Halten Sie den Fokus sichtbar, gestalten Sie Ziele mindestens 24px groß oder mit ausreichendem Abstand und vermeiden Sie redundante Eingaben. Als Nächstes: Ziehen und Authentifizierung. 🎯
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „Die Neuerungen in 2.2: Fokusdarstellung und Zielgröße“ kostenlos?
Ja — der vollständige Text von „Die Neuerungen in 2.2: Fokusdarstellung und Zielgröße“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Die Neuerungen in 2.2: Fokusdarstellung und Zielgröße“?
Wenden Sie die Kriterien an, die in der neuesten Version neu sind. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Die Neuerungen in 2.2: Fokusdarstellung und Zielgröße“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- A, AA, AAA: das richtige Ziel wählen
- Die Neuerungen in 2.2: Fokusdarstellung und Zielgröße
- Ziehbewegungen und barrierefreie Authentifizierung
- Eine belastbare Konformitätserklärung verfassen