Stellt sicher, dass jeder ARIA-Tooltip-Knoten einen zugänglichen Namen hat

Blind Sehbehindert Hören Mobilität
WCAG 2.2 Level A
Von Menschen für Menschen geschrieben und recherchiert
Foto des Experten
Ritvik Shrivastava
Fachmännisch überprüft von
Kommentare: 0
Ihre gesamte Domain
Erhalten Sie detaillierte Anweisungen, wie Sie jedes Barrierefreiheitsproblem auf Ihrer Website beheben können

ARIA-Tooltip-Elemente müssen einen klaren, zugänglichen Namen haben, der das Ziel, den Zweck, die Funktion oder die Aktion für Benutzer beschreibt, die auf Screenreader angewiesen sind.

Warum es wichtig ist

Screenreader-Benutzer können den Zweck von Elementen mit role=”tooltip” nicht verstehen, wenn diese keinen zugänglichen Namen haben.

Behebung des Problems

Überprüfen Sie alle Elemente mit role=”tooltip”, um sicherzustellen, dass sie einen erkennbaren, zugänglichen Namen haben.

Gutes Codebeispiel

Die Regel aria-tooltip-name enthält vier Markup-Muster, die die Testkriterien erfüllen:

Codebeispiel
<div role="tooltip" id="al" aria-label="Name"></div><div role="tooltip" id="alb" aria-labelledby="labeldiv"></div><div role="tooltip" id="combo" aria-label="Aria Name">Name</div><div role="tooltip" id="title" title="Titel"></div> Kopieren

Schlechtes Codebeispiel

Die Regel aria-tooltip-name enthält vier Markup-Muster, die die Testkriterien nicht erfüllen:

Codebeispiel
<div role="tooltip" id="leer"></div><div role="tooltip" id="alempty" aria-label=""></div><div role="tooltip" id="albmissing" aria-labelledby="nichtvorhanden"></div><div role="tooltip" id="albempty" aria-labelledby="leerdiv"></div> <div id="leerdiv"></div> Kopieren