Das APG lesen: Muster, Tasten und Beispiele
Verwenden Sie den Leitfaden als Spezifikation für jedes Widget.
Das APG lesen: Muster, Tasten und Beispiele ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Lernen Sie den APG kennen
Der ARIA Authoring Practices Guide ist der offizielle Leitfaden des W3C für die korrekte Erstellung eigener Widgets. Wenn Sie unsicher sind, ist er Ihre Spezifikation. 📘
Erfinden Sie das Rad nicht neu
Der APG bietet bewährte patterns für Tabs, Menüs, Dialoge und mehr. Sie übernehmen ein getestetes Vorgehen, statt Rollen und Tasten selbst zu erraten.
Aufbau eines Patterns
Jedes APG-Pattern hat dieselben sections: eine Übersicht, die Tastaturinteraktion, die erforderlichen ARIA-Rollen und -Attribute sowie funktionierende Beispiele zum Studieren.
Die Tastatur ist der Vertrag
Die Tabelle Keyboard Interaction zeigt genau, was jede Taste tun muss. Nutzende erwarten diese Tasten. Behandeln Sie die Tabelle daher als verbindliche Vorgabe.
Die Rollentabelle
Die Tabelle WAI-ARIA Roles, States, and Properties listet jedes vom Widget benötigte Attribut und den Zeitpunkt auf, zu dem es sich ändert. Lassen Sie keines davon aus.
Die Beispiele studieren
Zu jedem Pattern gehört ein funktionierendes example mit vollständigem Quellcode. Lesen Sie es, testen Sie es mit einem Screenreader und passen Sie das Markup anschließend an Ihre eigene UI an.
<div role="tablist" aria-label="Settings">
<button role="tab" aria-selected="true">General</button>
</div>Immer zuerst nativ
Der APG beginnt mit einem Warnhinweis: Bevorzugen Sie native HTML, wenn es verfügbar ist. Verwenden Sie diese Patterns nur, wenn kein echtes Element die Aufgabe erfüllt.
Status ändern sich zur Laufzeit
Patterns trennen feste Rollen von veränderlichen states. Sie setzen aria-expanded oder aria-selected mit JavaScript, während die Nutzerinnen und Nutzer interagieren, nicht nur einmal im HTML.
Fokus ist Teil der Spezifikation
Viele Patterns beschreiben genau, wohin der focus gehen muss und wie er sich bewegt. Diese Fokus-Choreografie zu befolgen ist genauso wichtig wie die ARIA-Attribute selbst.
Am Pattern testen
Gehen Sie Ihr Widget nach der Erstellung Taste für Taste anhand der APG-keyboard table durch. Wenn jede Zeile erfüllt ist, entspricht das Verhalten der bewährten Vorgabe.
Es ist ein lebendiger Leitfaden
Der APG ist versioned und wird weiterentwickelt, wenn sich ARIA verändert. Prüfen Sie daher die aktuelle Ausgabe statt eines alten Blogbeitrags, der den Inhalt kopiert.
Kurztest
Sie wollen ein eigenes Widget erstellen. Worauf sollte der APG Sie zuerst hinlenken?
Zusammenfassung
Der APG ist Ihre Widget-Spezifikation: zuerst native Elemente, dann die Rollen, Status, Tasten und den Fokus des jeweiligen Patterns befolgen. Testen Sie anhand der Tabellen, und Sie liefern ein Verhalten, das Nutzende bereits kennen. ✅
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 „Das APG lesen: Muster, Tasten und Beispiele“ kostenlos?
Ja — der vollständige Text von „Das APG lesen: Muster, Tasten und Beispiele“ 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 „Das APG lesen: Muster, Tasten und Beispiele“?
Verwenden Sie den Leitfaden als Spezifikation für jedes Widget. 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 1 von 4.
Wie lange dauert die Lektion „Das APG lesen: Muster, Tasten und Beispiele“?
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
- Das APG lesen: Muster, Tasten und Beispiele
- Combobox und Autovervollständigung richtig umsetzen
- Menu, Menubar und der Menü-Button
- Treegrid und andere fortgeschrittene Muster