Depuración de Componentes Personalizados

Este artículo proporciona una visión general sobre el uso de Axe DevTools Linter para depurar tus componentes personalizados.

Cómo Funciona

La depuración de componentes personalizados mapea un componente personalizado en un elemento existente. Por ejemplo, supongamos que tienes un componente <custom-image> que genera un elemento HTML <img>. Puedes crear un mapeo entre custom-image y img en tu configuración que indique a Axe DevTools Linter que depure tu componente personalizado como si fuera un elemento img. En ese caso, puede detectar, por ejemplo, un falta el atributo alt y marcarlo como un error de accesibilidad.

Puedes crear una configuración para mapear:

• Tu componente personalizado a otro elemento
• Los atributos de tu componente personalizado a los atributos del otro elemento
• Un atributo en tu componente personalizado a un contenido de texto de un elemento (que es el contenido de texto contenido dentro del elemento como el texto dentro de las etiquetas button: <button> contenido de texto </button>)
• Los atributos WAI-ARIA de tu componente personalizado usando un atributo comodín (aria-*) en lugar de especificar cada atributo ARIA individualmente.

Análisis de Violaciones de Componentes Personalizados

A medida que crecen las configuraciones de tus componentes personalizados, puede ser difícil determinar qué violaciones en tus informes de accesibilidad se originaron a partir de mapeos de componentes personalizados en lugar de elementos HTML estándar. Axe DevTools Linter puede añadir el nombre del componente personalizado a cada violación coincidente en el informe, facilitando la identificación y el análisis del impacto de tus mapeos personalizados.

• Si usas el Conector de Axe DevTools Linter, usa la opción --additional-properties customName.
• Si usas el punto final REST, incluye "properties": ["customName"] en tu cuerpo de solicitud. Ver Depuración de Componentes Personalizados con el Punto Final REST para un ejemplo.

Próximos Pasos

Hay dos tutoriales para ayudarte a comenzar a depurar tus componentes personalizados.

1. Si usas el Axe Accessibility Linter para VS Code o el plugin de JetBrains, ve a Depuración de Componentes Personalizados con la Extensión de Axe Accessibility Linter para VS Code o el Plugin de JetBrains.
2. Si usas el punto final REST de Axe DevTools Linter, ve a Depuración de Componentes Personalizados con el Punto Final REST de Axe DevTools Linter.

Si deseas información sobre la depuración de archivos React Native y la depuración de componentes personalizados de React Native, ve a Uso de Axe DevTools Linter para React Native.

Para obtener información sobre el soporte de Axe DevTools Linter para algunas bibliotecas populares de componentes personalizados, ve a Bibliotecas de Componentes Preconfiguradas.

Ver También

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