Jeder ARIA-dialog- und alertdialog-Knoten muss einen zugänglichen Namen haben

Blind 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-Dialogelemente müssen klaren Text enthalten, der das Ziel, den Zweck, die Funktion oder die Aktion für Screenreader-Benutzer beschreibt.

Warum es wichtig ist

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

Behebung des Problems

Alle Elemente mit role=”dialog” oder role=”alertdialog” müssen überprüft werden, um sicherzustellen, dass sie einen erkennbaren und zugänglichen Namen haben.

Gutes Codebeispiel

Codebeispiel
<div role="dialog" id="alb" aria-labelledby="labeldiv"></div><div role="alertdialog" id="combo" aria-label="Aria Name">Name</div><div role="dialog" id="title" title="Title"></div> Kopieren

Schlechtes Codebeispiel

Codebeispiel
<div role="dialog" id="empty"></div><div role="alertdialog" id="alempty" aria-label=""></div><div role="dialog" id="albmissing" aria-labelledby="nonexistent"></div><div role="dialog" id="albempty" aria-labelledby="emptydiv"></div><div id="emptydiv"></div> Kopieren