Linting des composants personnalisés
Une introduction à l'utilisation d'axe DevTools Linter pour l'analyse des composants personnalisés
Cet article fournit un aperçu de l'utilisation d'axe DevTools Linter pour analyser vos composants personnalisés.
Comment ça marche
Le linting des composants personnalisés mappe un composant personnalisé dans un élément existant. Par exemple, supposons que vous ayez un <custom-image> composant qui génère un <img> élément HTML. Vous pouvez créer un mappage entre custom-image et img dans votre configuration qui indique à axe DevTools Linter pour linter 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é. **** (https://dequeuniversity.com/rules/axe/4.8/image-alt)
Vous pouvez créer une configuration pour mapper :
- Votre composant personnalisé vers un autre élément
- Les attributs de votre composant personnalisé aux attributs de l'autre élément
- Un attribut dans votre composant personnalisé associé au contenu textuel d'un élément (qui est le texte contenu dans l'élément tel que le texte à l'intérieur des balises bouton : <button> contenu textuel </button>)
- WAI-ARIA attributs de votre composant personnalisé à l'aide d'un attribut générique (aria-*) plutôt que de spécifier chaque attribut ARIA individuellement.
Prochaines étapes
Il existe deux procédures pas à pas pour vous aider à démarrer le linting de vos composants personnalisés.
- Si vous utilisez l'extension axe Accessibility Linter pour VS Code ou le plugin JetBrains, consultez Linting Custom Components with the axe Accessibility Linter Extension for VS Code or the JetBrains Plugin.
- Si vous utilisez le point de terminaison REST axe DevTools Linter, consultez Linting de 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 des composants personnalisés React Native, consultez Utilisation d'axe DevTools Linter pour React Native.
Pour plus d'informations sur la prise en charge par axe DevTools Linter de certaines bibliothèques de composants personnalisés populaires, consultez Bibliothèques de composants préconfigurés.
Voir aussi
Consultez Configuration d'axe DevTools Linter pour plus d'informations sur les configurations utilisées par axe Accessibility Linter pour VS Code, le plugin JetBrains et le point de terminaison REST.