Web accessibility (a11y for short), is the inclusive practice of ensuring there are no barriers that prevent the interaction with, or access to, websites on the World Wide Web by people with disabilities. Vuetify components are built to provide keyboard interactions for all mouse-based actions and utilize HTML5 semantic elements where applicable.
Google provides a detailed overview on how their components are created with a11y in mind. They also provide examples of how you can ensure that you are using best practices when creating applications (beyond what is supported by default with Vuetify). You can find more information about implementing accessibility on the specification site.
Vuetify uses activator slots for many components such as v-menu, v-dialog and more. In some instances these activator elements should have specific a11y attributes that associate them with their corresponding content. In order to achieve this, we pass down the necessary a11y options through the slots scope.
When the activator element is rendered, it will now contain the bound a11y attributes:
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.
Beyond attributes, components such as v-menu also support interaction by pressing ↑ and ↓ for navigating between options.
The v-list-item-group component makes v-list-item interactable and navigatable when pressing the tab key. It also configures v-list-item to have a role of listitem. Navigate to the List-item group for more information on the components features.
While Vuetify attempts to make a11y as easy as possible in your application, there are times where additional information is needed. Below you can find a list of helpful resources.
Ready for more? Continue reading with: