Praxisleitfaden Aufklappbare Bereiche beschriften
Summary verständlich benennen
Zeigen Sie schon vor dem Aufklappen, welcher Inhalt folgt.
summary-nameWCAG 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-summary-name.html
Befund einordnen
Der Pfeil verrät das Thema nicht
Erkannter Befund
Das fällt auf
summary-name meldet .atlas-sheet summary: Das Element besitzt keinen zugänglichen Namen.So ist es einzuordnen
Im Karawanenformular besteht der Aufklappschalter nur aus einem Pfeil. Sein summary ist leer; auch eine alternative Benennung fehlt. Der Absatz zur Nebenroute liegt außerhalb dieses Elements und benennt den Schalter nicht.
Das bedeutet es für die Nutzung
Wer den Schalter mit einem Screenreader erreicht, erfährt nicht, dass sich hier Informationen zum Verlauf der Nebenroute öffnen lassen.
- Regel
summary-name- Referenz
- WCAG 4.1.2
Diagnose am Element
Vorher: <summary></summary>
Kein Textinhalt, kein aria-label, kein aria-labelledby, kein title.
summary-name: Verstoß (Axe-Auswirkung: serious)Aufklapptitel in jeder Verwendung prüfen
Ein Aufklappbaustein braucht den Titel des jeweils verborgenen Inhalts. Prüfen Sie auch den eingeklappten Zustand.
- Nebenroute× Befund im Beispiel
- Hauptroute× Befund im Beispiel
- Routenhilfe Ohne diesen Befund im Beispiel
Nach der Änderung erneut prüfenPrüfen Sie Beschriftung, Fokus und Öffnen sowie Schließen jeder Verwendung.
Schematische Zuordnung, kein Scanergebnis. „Ohne diesen Befund“ sagt nichts über andere Barrieren aus.
Was soll sich hinter dem Schalter öffnen?
Lesen Sie zuerst den aufklappbaren Inhalt und benennen Sie dessen Thema.
Fundstelle ansehen
Die Nebenroute im Formular erkennen
Der Ausschnitt enthält das vollständige Karawanenformular. Der vorhandene Bereich ist für beide Aufnahmen geöffnet, damit der Absatz zur Nebenroute sichtbar bleibt.
Die markierte Zeile über dem Absatz ist der namenlose Aufklappschalter. Der sichtbare Satz darunter erklärt den Routenverlauf, ersetzt aber keine Beschriftung des summary.
Im HTML korrigieren
Das Thema direkt ins Summary schreiben
Ergänzen Sie „Verlauf der Nebenroute“ im vorhandenen summary. Der Absatz bleibt im details erhalten. So steht das Thema auch dann am Schalter, wenn der Inhalt eingeklappt ist.
Im CMS oder Komponentenbaukasten Tragen Sie den Text im Titel des Aufklappbereichs ein. Prüfen Sie anschließend das gerenderte HTML: Der Titel muss am bedienbaren summary ankommen.
Vorher
<details>
<summary></summary>
<p>Die Nebenroute folgt einem historischen Bewässerungsarm.</p>
</details>Nachher
<details>
<summary>Verlauf der Nebenroute</summary>
<p>Die Nebenroute folgt einem historischen Bewässerungsarm.</p>
</details>Markierte Zeilen wurden geändert
Im Produkt umsetzen
Den Titel aus dem Inhalt ableiten
Ein hilfreicher Summary-Text macht den verborgenen Abschnitt vor dem Öffnen einschätzbar.
- 1
Benennen Sie im Beispiel den Verlauf der Nebenroute, weil genau davon der Absatz handelt.
- 2
Prüfen Sie den Titel bei geschlossenem Bereich: Ist sein Thema ohne den Absatz verständlich?
- 3
Pflegen Sie den Titel zusammen mit dem Abschnitt, wenn sich dessen Inhalt ändert.
- 4
Prüfen Sie wiederverwendete Aufklappkomponenten auf leere oder fehlende Titelwerte.
Fehlversuche vermeiden
Ein nicht leerer Name genügt inhaltlich nicht
Nur „Mehr“ ergänzen
Das kann den technischen Namenstest bestehen, unterscheidet die Nebenroute aber nicht von anderen Aufklappbereichen.
Das details statt des summary benennen
Kontrollieren Sie den Namen am tatsächlich bedienbaren summary. Eine Benennung des umgebenden Bereichs ersetzt diesen Schritt nicht.
Sichtbaren Text mit ARIA überschreiben
Ein abweichendes aria-label kann einen anderen Namen liefern als der sichtbare Titel. Halten Sie sichtbare Beschriftung und zugänglichen Namen zusammen.
Weitere Aktionen in den Titel setzen
Platzieren Sie zusätzliche Links und Schaltflächen im aufgeklappten Inhalt. Prüfen Sie verschachtelte Bedienelemente gesondert.
Derselbe Schalter besteht den Namenstest
Axe meldet am unveränderten summary-Knoten nach der Textergänzung einen Pass für summary-name. Der Routenabsatz bleibt erhalten.
Der belegte Pass betrifft die Benennung dieses Summary-Elements. Weitere Formularfehler im Ausschnitt und die vollständige Bedienbarkeit sind damit nicht geprüft.
Verifizierte Änderung
Nachher: <summary>Verlauf der Nebenroute</summary>
Axe: has-visible-text bestanden; summary-name am Ziel bestanden.
Der vorhandene Absatz zur Nebenroute ist unverändert.Prüfumfang verstehen
Technischen Namen und verständlichen Inhalt prüfen
Der Scanner erkennt den fehlenden Namen; seine Eignung ergibt sich aus dem Seitenkontext.
Automatisch prüfbar
- Ein bedienbares summary ohne zugänglichen Namen erkennen.
- Das betroffene Element im Seitenkontext zuordnen.
- Den Namenstest nach der Korrektur wiederholen.
Im Kontext zu entscheiden
- Beurteilen, ob der Titel den aufklappbaren Inhalt zutreffend beschreibt.
- Tastaturbedienung, Fokus und Screenreader-Ausgabe beim Zustandswechsel prüfen.
- Weitere Aufklappzustände und die übrigen Formularfelder untersuchen.