Schaltflächen ohne Namen

WCAG 4.1.2 (A) · EN 301 549 9.4.1.2

Einige Schaltflächen haben keinen sichtbaren Text und keinen zugänglichen Namen.

Warum das zählt

Das trifft meist Schaltflächen, die nur aus einem Symbol bestehen: das X zum Schließen, die Lupe für die Suche, der Warenkorb im Kopfbereich. Ein Screenreader sagt sie als „Schaltfläche“ an, und die Person muss sie auslösen, um herauszufinden, was sie tun.

So wird es behoben

Hat die Schaltfläche sichtbaren Text, sind Sie fertig. Besteht sie nur aus einem Symbol, ergänzen Sie ein aria-label mit der Handlung und kennzeichnen Sie das Symbol mit aria-hidden="true".

<button><svg>…</svg></button>

<button aria-label="Hinweis schließen">
  <svg aria-hidden="true">…</svg>
</button>

In Ihrem System

• Shopify

  In Dawn und den davon abgeleiteten Themes liegen die Symbolschaltflächen des Kopfbereichs in sections/header.liquid.

• WooCommerce

  Symbolschaltflächen kommen meist aus dem Theme; sehen Sie in header.php und in den Warenkorb-Vorlagen nach.

Verwandte Themen

• Grafische Schaltfläche ohne Alternativtext
• Eingebetteter Rahmen ohne Titel
• Formularfelder ohne Beschriftung
• Links ohne Namen