Barrierefreiheit

Google bietet einen detaillierten Überblick darüber, wie ihre Komponenten mit Blick auf a11y erstellt werden. Sie bieten auch Beispiele dafür, wie Sie sicherstellen können, dass Sie bewährte Methoden verwenden, wenn Sie Anwendungen erstellen (über das, was standardmäßig mit Vuetify unterstützt wird). Weitere Informationen über Implementierung von Zugänglichkeit findest du auf der Spezifikationsseite.

Vuetify verwendet Aktivierungs Slots für viele Komponenten wie v-menu, v-dialog und mehr. In einigen Fällen sollten diese Aktivierungselemente spezifische a11y-Attribute haben, die sie mit dem entsprechenden Inhalt assoziieren. Um dies zu erreichen, übergeben wir die notwendigen a11y Optionen über den Slots-Bereich.

Wenn das Aktivierer-Element gerendert wird, enthält es nun die gebundenen a11y-Attribute:

There are some instances where you utilize a slot for a component and will need the correct aria attributes to bind to your elements. When using (v-slot) this is passed down to you in the slots scope, as the v-menu example above demonstrated. However, there are other components that are more complex in which you will need to bind attributes to the correct components to ensure proper support.

The v-select component will automatically configure all required a11y attributes. Each item will generate a corresponding id, aria-labelledby, aria-selected and roles by default

When rendered, the v-select component's content will look similar to this:

However, when using slots there are conditions in which you will need to utilize the passed down properties to get the proper aria setup. This information also applies to v-autocomplete, v-combobox and v-overflow-btn as they all extend the v-select component.

When providing a v-list-item component in a slot, the aria attributes are passed through the attrs data property and can be bound with v-bind.

In order to properly associate a label with the correct option you will need to bind attrs.id to the aria-labelled-by on your v-list-item-title. This will ensure that the text is properly associated. Keep in mind, this is done automatically for you if you are not using slots.

Neben Attributen unterstützen Komponenten wie v-menu auch Interaktionen durch Drücken von ↑ und ↓ für die Navigation zwischen Optionen.

Inerhalb eines v-menu-Elements wird v-list-item automatisch so konfiguriert, dass es die Rolle menuitem einnimmt. Navigieren Sie zum Menu für weitere Informationen über die Komponentenfunktionen.

Die Komponente v-list-item-group erweitert die Komponente v-list-item um Interaktionen und Navigation durch das Drücken von tab. Weiterhin wird v-list-item so konfigurtiert, dass es die Rolle listitem einnimmt. Navigieren Sie zum List-item group für weitere Informationen über die Komponentenfunktionen.

Während Vuetify versucht, a11y in Ihrer Anwendung so einfach wie möglich zu machen, werden manchmal zusätzliche Informationen benötigt. Nachfolgend finden Sie eine Liste hilfreicher Ressourcen.