WCAG-A/AA-Anforderung Priorität: Schwerwiegend

Aufklappbare Bereiche haben keinen Namen

Die anklickbare Überschrift eines aufklappbaren Bereichs (ein <summary>-Element) hat keinen lesbaren Text, zum Beispiel ein Akkordeon mit Produktdetails, eine Filtergruppe, ein FAQ-Eintrag oder ein Menü, das über ein Symbol geöffnet wird.

Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.

Warum das für Ihre Kunden wichtig ist

Screenreader-Nutzer hören nur, dass sich etwas aufklappen lässt, aber nicht, was. Sie finden womöglich das mobile Menü, die Filter oder die Angaben zu Versand und Größen nicht.

Wen es betrifft

blinde Kundinnen und Kunden
Screenreader-Nutzer
Nutzer von Sprachsteuerung

So beheben Sie es

Geben Sie jedem <summary> einen sichtbaren Text, der den Bereich beschreibt, etwa „Versand und Rückgabe“ oder „Menü“. Zeigt das summary nur ein Symbol, ergänzen Sie ein aria-label oder visuell versteckten Text darin und kennzeichnen Sie das Symbol selbst mit aria-hidden="true" als dekorativ.

Bei Shopify

Häufig: Viele aktuelle Themes nutzen <details> und <summary> für mobiles Menü, Suche, Filter und Produkt-Akkordeons. Prüfen Sie die Liquid-Dateien von Header und Produkt-Section auf summary-Elemente, die nur ein Symbol enthalten, und stellen Sie sicher, dass jeder Akkordeon-Block eine Überschrift hat.

Bei Shoptet (CZ)

Kann in Templates oder in eigenem HTML mit aufklappbaren Bereichen vorkommen. Prüfen Sie, ob eine neuere Template-Version das behebt; andernfalls bitten Sie Shoptet oder eine Partneragentur, Beschriftungen zu ergänzen.

Bei PrestaShop

Kommt vor, wenn Theme oder Module <details> für Menüs, Filter oder Produkt-Tabs verwenden. Ergänzen Sie Text oder ein aria-label am <summary> in den .tpl-Templates des Themes oder in überschriebenen Modul-Templates.

Bei WooCommerce

Seltener; kommt in Themes, FAQ- oder Akkordeon-Blöcken und Page-Builder-Widgets vor, die <details> verwenden. Füllen Sie den Blocktitel aus oder ergänzen Sie ein aria-label im Child-Theme-Template; melden Sie Plugin-Probleme dem Plugin-Autor.

Standards

Standards
Standard	Abschnitt
WCAG 2.2	4.1.2 (A) Name, Role, Value
WCAG 2.1	4.1.2 (A) Name, Role, Value
WCAG 2.0	4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1	9.4.1.2
EN 301 549 3.2.1	9.4.1.2
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.4.1.2

Automatische Prüfung: axe-core-Regel summary-name. dequeuniversity.com, github.com, www.w3.org

Die ganze Seite ist für Screenreader ausgeblendet
WCAG 1.3.1 A
Barrierefreiheits-Attribute werden in der falschen Situation verwendet
WCAG 4.1.2 A
Formularfelder haben keine Beschriftung
WCAG 4.1.2 A
Einige Fortschrittsbalken haben keinen Namen
WCAG 1.1.1 A

Alle Regeln, die wir prüfen