Prüfen Sie, ob alle benutzerdefinierten Steuerelemente eine geeignete role und alle erforderlichen ARIA-Attribute mit ihren Eigenschaften und Status haben.
Für ein benutzerdefiniertes Kästchen sind beispielsweise role="checkbox" und aria-checked="true|false" erforderlich, um den Status korrekt zu vermitteln.
Informationen zur Verwendung von ARIA und HTML, um zu verstehen, wann Sie am besten fehlende Semantik für benutzerdefinierte Steuerelemente angeben
So testen Sie
Wenn Sie prüfen möchten, ob alle benutzerdefinierten interaktiven Steuerelemente die erforderlichen ARIA-Rollen haben, testen Sie die Seite entweder im Bedienungshilfenbereich der Chrome-Entwicklertools oder mit einem Screenreader.
JAWS und NVDA sind zwei der beliebtesten Screenreader für Windows. VoiceOver ist der in macOS integrierte Screenreader.
Mit CSS können Sie <div>- und <button>-Elemente so gestalten, dass sie dieselben visuellen Angebote bieten. Die Nutzung ist jedoch bei einem Screenreader sehr unterschiedlich. Ein <div> ist nur ein allgemeines Gruppierungselement. Ein Screenreader liest daher nur den Textinhalt des <div> vor.
Die <button> wird als „Schaltfläche“ angekündigt, was für den Nutzer ein viel stärkeres Signal ist, dass er damit interagieren kann.
Weitere Informationen finden Sie unter Semantik und Screenreader.
Lösung
Die beste Lösung für dieses Problem besteht darin, benutzerdefinierte interaktive Steuerelemente vollständig zu vermeiden. Ersetze beispielsweise ein <div>, das wie eine Schaltfläche fungiert, durch ein tatsächliches <button>.
<button>Learn more</button>
Wenn Sie ein <div> verwenden müssen, fügen Sie role="button" und aria-pressed="false" hinzu.
<div role="button" aria-pressed="false">Learn more</div>
Jetzt geben Screenreader die Rolle und den interaktiven Status für die <div> an.
Warum das wichtig ist
Wenn Sie noch nie Hilfstechnologien verwendet haben, wissen Sie möglicherweise nicht, wie Ihre Inhalte für Nutzer von Hilfstechnologien funktionieren. Idealerweise sprechen Sie mit Nutzern, die regelmäßig Hilfstechnologien verwenden und Feedback zur Leistung Ihrer Website oder Webanwendung geben können.
Eine weitere Möglichkeit, herauszufinden, wie Nutzer mit Hilfstechnologien Ihre Inhalte wahrnehmen, ist ein Test mit Hilfstechnologien. Mit einem Screenreader können Sie besser nachvollziehen, wie Ihre Inhalte beschriftet sind und ob es Hindernisse für die Navigation gibt.
Ressourcen
Sie können sich den Quellcode für die Prüfung Benutzerdefinierte Steuerelemente haben ARIA-Rollen ansehen.