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 fournit un aperçu détaillé de la façon dont leurs composants sont créés avec a11y à l'esprit. Ils fournissent également des exemples de la façon dont vous pouvez vous assurer que vous utilisez les meilleures pratiques lors de la création d'applications (au-delà de ce qui est supporté par défaut par Vuetify). Vous pouvez trouver plus d'informations sur implémenter l'accessibilité sur le site de spécification.
Vuetify utilise des slots activateurs pour de nombreux composants comme v-menu, v-dialog et plus. Dans certains cas, ces éléments activateurs devraient avoir des attributs spécifiques a11y qui les associent à leur contenu correspondant. Pour y parvenir, nous passons les options nécessaires via les slots scope.
Lorsque l'élément activateur est rendu, il contiendra maintenant les attributs a11y liés :
Il y a des cas où vous utilisez un slot pour un composant et aurez besoin des attributs aria corrects à lier à vos éléments. Lorsque vous utilisez (v-slot), cela vous est transmis dans les slots scope comme l'exemple v-menu ci-dessus l'a démontré. Cependant, il y a d'autres composants plus complexes dans lesquels vous devrez lier les attributs aux composants corrects pour assurer un support approprié.
Le composant v-select va automatiquement configurer tous les attributs a11y requis. Chaque élément générera un id, aria-labelledby, aria-selected et roles par défaut
Lorsque rendu, le contenu du composant v-select sera similaire à celui-ci :
Cependant, lorsque vous utilisez des slots, il y a des conditions dans lesquelles vous devrez utiliser les propriétés passées pour obtenir la configuration aria appropriée. Cette information s'applique également à v-autocomplete, v-combobox et v-overflow-btn car ils étendent tous le composant v-select.
Lorsque vous fournissez un composant v-list-item dans un slot, les attributs aria sont passés par la propriété de données attrs et peuvent être liés avec v-bind.
Afin d'associer correctement un label à la bonne option vous devrez lier attrs.id au aria-labelled-by sur votre v-list-item-title. Cela vous assurera que le texte est correctement associé. Gardez en tête que cela est fait automatiquement pour vous si vous n'utilisez pas de slots.
Au-delà des attributs, des composants comme v-menu supportent également l'interaction en appuyant sur ↑ et ↓ pour naviguer entre les options.
Le composant v-list-item-group rend l'élément v-list-item interactif et navigable lors de l'appui sur la touche tab . Il configure également v-list-item pour avoir un rôle de listitem. Naviguez vers le List-item group pour plus d'informations sur les fonctionnalités des composants.
Bien que Vuetify tente de rendre a11y aussi facile que possible dans votre application, il y a des moments où des informations supplémentaires sont nécessaires. Vous trouverez ci-dessous une liste de ressources utiles.
Prêt pour plus ? Continuez la lecture avec :