Analyse des composants personnalisés

Cet article offre un aperçu de l'utilisation de Axe DevTools Linter pour analyser vos composants personnalisés.

Comment ça fonctionne

Le linting des composants personnalisés associe un composant personnalisé à un élément existant. Par exemple, supposons que vous ayez un composant <custom-image> qui génère un élément HTML <img>. Vous pouvez créer une correspondance entre custom-image et img dans votre configuration pour indiquer à Axe DevTools Linter d'analyser votre composant personnalisé comme s'il s'agissait d'un élément img. Dans ce cas, il peut détecter, par exemple, un attribut alt manquant et le signaler comme une erreur d'accessibilité.

Vous pouvez créer une configuration pour associer :

• Votre composant personnalisé à un autre élément
• Les attributs de votre composant personnalisé aux attributs de l'autre élément
• Un attribut de votre composant personnalisé au contenu textuel d'un élément (qui est le texte contenu à l'intérieur de l'élément tel que le texte à l'intérieur des balises bouton : <button> contenu textuel </button>)
• les attributs WAI-ARIA de votre composant personnalisé en utilisant un attribut générique (aria-*) plutôt que de spécifier chaque attribut ARIA individuellement.

Analyse des violations des composants personnalisés

Lorsque vos configurations de composants personnalisés s'accroissent, il peut être difficile de déterminer quelles violations dans vos rapports d'accessibilité proviennent des correspondances de composants personnalisés plutôt que des éléments HTML standards. Axe DevTools Linter peut ajouter le nom du composant personnalisé à chaque violation correspondante dans le rapport, facilitant ainsi l'identification et l'analyse de l'impact de vos correspondances personnalisées.

• Si vous utilisez le Connecteur Axe DevTools Linter, utilisez l'option --additional-properties customName.
• Si vous utilisez le point de terminaison REST, incluez "properties": ["customName"] dans le corps de votre requête. Voir Analyse des composants personnalisés avec le point de terminaison REST pour un exemple.

Prochaines étapes

Il y a deux guides pour vous aider à commencer l'analyse de vos composants personnalisés.

1. Si vous utilisez Axe Accessibility Linter pour VS Code ou le plugin JetBrains, consultez Analyse des composants personnalisés avec l'extension Axe Accessibility Linter pour VS Code ou le plugin JetBrains.
2. Si vous utilisez le point de terminaison REST Axe DevTools Linter, consultez Analyse des composants personnalisés avec le point de terminaison REST Axe DevTools Linter.

Si vous souhaitez des informations sur l'analyse des fichiers React Native et l'analyse des composants personnalisés React Native, consultez Utilisation de Axe DevTools Linter pour React Native.

Pour des informations sur le support de Axe DevTools Linter pour certaines bibliothèques de composants personnalisés populaires, consultez Bibliothèques de composants préconfigurées.

Voir aussi

Consultez Configuration de Axe DevTools Linter pour des informations sur les configurations utilisées par l'Axe Accessibility Linter pour VS Code, le plugin JetBrains et le point de terminaison REST.