Jeder Schaltfläche einen klaren Namen geben

Machen Sie die Aktion jeder Schaltfläche als Text verständlich, auch bei Schaltflächen, die nur ein Symbol zeigen.

Warum das wichtig ist

Eine Schaltfläche ohne Namen wird unter Umständen nur als „Schaltfläche“ vorgelesen. Wer einen Screenreader oder eine Sprachsteuerung nutzt, kann sie dann weder erkennen noch auslösen.

So beheben Sie es

1. 1

   Verwenden Sie am besten sichtbaren Text auf der Schaltfläche, der die Aktion beschreibt.

2. 2

   Ergänzen Sie ein aria-label, wenn eine Schaltfläche mit nur einem Symbol wirklich nötig ist.

3. 3

   Prüfen Sie, ob wiederholte Schaltflächen auch ohne den umgebenden Inhalt verständlich bleiben.

Beispiel

<button>
  <svg aria-hidden="true"><!-- Suchsymbol --></svg>
</button>

<button aria-label="Suchen">
  <svg aria-hidden="true"><!-- Suchsymbol --></svg>
</button>

So prüfen Sie Ihre Korrektur

Prüfen Sie Ihre Seite noch einmal mit ibin. Das Problem verschwindet aus Ihrem Bericht, sobald alle Stellen behoben sind. Probieren Sie es danach selbst so aus, wie Ihre Besucher es tun würden.

• Prüfen Sie die Seite erneut und vergewissern Sie sich, dass das Problem nicht mehr im Bericht steht.
• Probieren Sie den korrigierten Teil selbst aus: mit der Maus, nur mit der Tastatur und vergrößert.
• Bitten Sie wenn möglich eine Person, die einen Screenreader nutzt, es ebenfalls auszuprobieren.

Auch verfügbar auf English, Nederlands, Français