Linting de Componentes Personalizados

Este artículo proporciona una descripción general del uso de axe DevTools Linter para linting sus componentes personalizados.

Cómo funciona

El linting de componentes personalizados asigna un componente personalizado a un elemento existente. Por ejemplo, supongamos que tienes un <custom-image> componente que genera un <img> elemento HTML. Puede crear una asignación entre custom-image e img en su configuración que le indique a axe DevTools Linter que analice su componente personalizado como si fuera un elemento img . En ese caso, puede detectar, por ejemplo, un [alt faltante] atributo y marcarlo como un error de accesibilidad.(https://dequeuniversity.com/rules/axe/4.8/image-alt)

Puede crear una configuración para mapear:

• Su componente personalizado a otro elemento
• Los atributos de su componente personalizado a los atributos del otro elemento
• Un atributo en su componente personalizado para el contenido de texto de un elemento (que es el contenido de texto incluido dentro del elemento, como el texto dentro de las etiquetas de botón : \ contenido de texto </button>)
• WAI-ARIA atributos de su componente personalizado utilizando un atributo comodín (aria-*) en lugar de especificar cada atributo ARIA individualmente.

Próximos pasos

Hay dos tutoriales que lo ayudarán a comenzar a lintear sus componentes personalizados.

1. Si usa el axe Accessibility Linter para VS Code o el complemento JetBrains, consulte Análisis de componentes personalizados con el axe Accessibility Linter para VS Code o el complemento JetBrains.
2. Si usa el axe DevTools Linter REST endpoint, consulte Análisis de componentes personalizados con el axe DevTools Linter REST endpoint.

Si desea obtener información sobre cómo analizar archivos React Native y componentes personalizados de React Native, consulte Uso de axe DevTools Linter para React Native.

Para obtener información sobre el soporte que axe DevTools Linter ofrece para algunas bibliotecas populares de componentes personalizados, consulte Bibliotecas de componentes preconfigurados.

Consulte también

Consulte Configuración de axe DevTools Linter para obtener información sobre las configuraciones utilizadas por axe Accessibility Linter para VS Code, el complemento JetBrains y el punto final REST.