Prüfen Sie, ob alle benutzerdefinierten Steuerelemente eine geeignete role und alle erforderlichen ARIA-Attribute haben, denen ihre Eigenschaften und ihr Status zugewiesen sind.
Ein benutzerdefiniertes Kästchen benötigt beispielsweise role="checkbox" und aria-checked="true|false", um seinen Status korrekt zu übertragen.
In der Einführung in ARIA finden Sie einen allgemeinen Überblick darüber, wie ARIA die fehlende Semantik für benutzerdefinierte Steuerelemente bereitstellen kann.
Manuelles Testen
Wenn Sie prüfen möchten, ob alle benutzerdefinierten interaktiven Steuerelemente die entsprechenden ARIA-Rollen haben, testen Sie die Seite entweder mit dem Chrome-Entwicklertools-Bereich „Bedienungshilfen“ oder mit einem Screenreader. JAWS und NVDA sind zwei der beliebtesten Screenreader für Windows. VoiceOver ist der in macOS integrierte Screenreader.
Mit CSS ist es möglich, die Elemente <div> und <button> so zu gestalten, dass sie dieselben visuellen Angebote enthalten. Bei Verwendung eines Screenreaders unterscheiden sich die beiden Elemente jedoch stark.
Ein <div> ist nur ein allgemeines Gruppierungselement, daher gibt ein Screenreader nur den Textinhalt des <div>-Elements an.
Die <button> wird als „Schaltfläche“ angesagt und signalisiert dem Nutzer damit ein viel stärkeres Signal, dass er damit interagieren kann.
Weitere Informationen finden Sie unter Semantik und Screenreader.
Lösung
Die einfachste und häufig beste Lösung für dieses Problem besteht darin, benutzerdefinierte interaktive Steuerelemente ganz zu vermeiden.
Ersetzen Sie beispielsweise eine <div>, die wie eine Schaltfläche funktioniert, durch einen tatsächlichen <button>-Wert.
Wenn Sie <div> beibehalten müssen, fügen Sie role="button" und aria-pressed="false" zu <div> hinzu.
Screenreader geben jetzt die Rolle und den interaktiven Status für <div> an.
Warum das wichtig ist
Die einzige Möglichkeit, wirklich zu verstehen, wie assistive Technologien Ihre Inhalte erleben, besteht darin, diese Inhalte selbst mit einem Screenreader zu überprüfen. Wenn Sie einen Screenreader aus erster Hand verwenden, erhalten Sie ein klares Bild davon, wie Ihre Inhalte gekennzeichnet sind und ob es Probleme bei der unterstützenden Navigation gibt. Wenn Sie nicht wissen, wie semantisches Markup von Hilfstechnologien interpretiert wird, können Sie Ihr Wissen in der Einführung in die Semantik auffrischen.
Siehe auch Anleitung zur Überprüfung der Barrierefreiheit.
Ressourcen
Prüfung des Quellcodes für benutzerdefinierte Steuerelemente mit ARIA-Rollen