aria-expanded am Aufklapper
Der Aufklapper sagt, ob er offen ist
Schaltfläche, Pfeilsymbol, Inhalt: drei Stellen an einem Aufklapper.
Zustand sichtbar verdrahtet
Ein Wert muss drei Ebenen zusammenhalten
Die Darstellung verbindet Auslöser, Inhalt und Ausgabe in beiden Zuständen.
aria-expanded="false"aria-controls="antwort-versand"id="antwort-versand" hiddenaria-expanded="true"aria-controls="antwort-versand"id="antwort-versand"Zwei bis drei Werktage innerhalb Deutschlands.
aria-expanded ändert die Ansage, blendet aber selbst nichts ein. Das Skript muss gleichzeitig den Attributwert wechseln und hidden am Inhaltsbereich setzen oder entfernen. Der sichtbare Pfeil liest denselben Attributwert per CSS. Eine Aktion, ein Zustand, drei Beobachter
Prüfen Sie bei jedem Wechsel alle drei Zeilen, nicht nur den Pfeil.
falsetrueWo der Zustand sitzt
aria-expandedInhaltsbereichEin Button zeigt oder verbirgt einen Bereich. Das Attribut sitzt auf dem Button.
aria-expandedVorschlagslisteDie Combobox meldet, ob ihr Popup geschlossen oder geöffnet ist.
aria-expandedUntergeordnete EinträgeNur ein Knoten mit untergeordneten Einträgen braucht diesen Zustand.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Der Aufklapper meldet einen Wert, den es nicht gibt Regel aria-valid-attr-value
aria-expanded="maybe" gehört nicht zur Werteliste. Nur true und false beschreiben den Zustand einer aufklappbaren Antwort.
Kritisch Der Pfeil auf der Schaltfläche hat keinen Namen Regel button-name
Ein Chevron ohne Text lässt die Aufklappfrage namenlos. Die Frage selbst gehört als Text in die Schaltfläche.
Kritisch Der Zustand sitzt am Inhalt statt am Auslöser Regel aria-allowed-attr
Am aufgeklappten div ist aria-expanded unzulässig. Es gehört an die Schaltfläche, die den Bereich öffnet.
Zum Mitnehmen
Der Aufklapper, korrigiert
Ein gültiger Startwert, ein Name, das Attribut am richtigen Element.
Korrektur in 3 Schritten ansehen
Den Startwert auf false setzen
Der Bereich ist beim Laden mit hidden geschlossen. Genau das muss die Schaltfläche melden.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button" aria-controls="faq-1" aria-expanded="maybe"> Wie lange dauert der Versand? </button> <div id="faq-1" hidden>Zwei bis drei Werktage.</div>Nachher
<button type="button" aria-controls="faq-1" aria-expanded="false"> Wie lange dauert der Versand? </button> <div id="faq-1" hidden>Zwei bis drei Werktage.</div>Markierte Zeilen wurden geändert
So prüfen Sie es Laden Sie die Seite neu und sehen Sie in den Quelltext. Geschlossener Bereich, Wert false.
Die Schaltfläche benennen
Das Pfeilsymbol trägt kein Wort. Die Frage als sichtbarer Text macht die Schaltfläche für alle auffindbar.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="button" aria-controls="faq-1" aria-expanded="false"> <svg aria-hidden="true"><use href="#chevron"></use></svg> </button>Nachher
<button type="button" aria-controls="faq-1" aria-expanded="false"> Wie lange dauert der Versand? <svg aria-hidden="true"><use href="#chevron"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Fahren Sie mit der Tab-Taste auf die Schaltfläche. Ein Vorleseprogramm nennt die Frage und den Zustand.
Das Attribut an den Auslöser hängen
Am aufgeklappten Bereich ist aria-expanded unzulässig und wird ignoriert. Nur an der Schaltfläche beschreibt es etwas.
KorrekturvergleichSchritt 3 · HTML Vorher
<button type="button" aria-controls="faq-1">Versanddauer</button> <div id="faq-1" aria-expanded="false" hidden>Zwei bis drei Werktage.</div>Nachher
<button type="button" aria-controls="faq-1" aria-expanded="false">Versanddauer</button> <div id="faq-1" hidden>Zwei bis drei Werktage.</div>Markierte Zeilen wurden geändert
So prüfen Sie es Suchen Sie aria-expanded im Quelltext. Es steht auf der Schaltfläche, nie auf dem Bereich darunter.