Vistoriando Componentes Personalizados
Uma introdução ao uso do Axe DevTools Linter para vistoriar componentes personalizados
Este artigo fornece uma visão geral sobre como usar o Axe DevTools Linter para vistoriar seus componentes personalizados.
Como Funciona
A vistoria de componentes personalizados mapeia um componente personalizado para um elemento existente. Por exemplo, suponha que você tenha um <custom-image> que gera um elemento HTML <img> . Você pode criar um mapeamento entre custom-image e img na sua configuração que instrui o Axe DevTools Linter a vistoriar seu componente personalizado como se fosse um elemento img . Nesse caso, ele pode detectar, por exemplo, um falta de alt atributo e sinalizar isso como um erro de acessibilidade.
Você pode criar uma configuração para mapear:
- Seu componente personalizado para outro elemento
- Os atributos do seu componente personalizado para os atributos do outro elemento
- Um atributo no seu componente personalizado para o conteúdo de texto de um elemento (que é o conteúdo de texto contido dentro do elemento, como o texto dentro das tags button : <button> conteúdo de texto </button>)
- atributos WAI-ARIA do seu componente personalizado usando um atributo coringa (aria-*) em vez de especificar cada atributo ARIA individualmente.
Analisando Violações de Componentes Personalizados
À medida que suas configurações de componentes personalizados crescem, pode ser difícil determinar quais violações em seus relatórios de acessibilidade resultaram de mapeamentos de componentes personalizados em vez de elementos HTML padrão. O Axe DevTools Linter pode adicionar o nome do componente personalizado a cada violação correspondente no relatório, facilitando a identificação e análise do impacto de seus mapeamentos personalizados.
- Se você usar o Conector Axe DevTools Linter , use a
--additional-properties customNameopção. - Se você usar o endpoint REST, inclua
"properties": ["customName"]no corpo da sua solicitação. Veja Vistoriando Componentes Personalizados com o Endpoint REST para um exemplo.
Próximos Passos
Há dois tutoriais para ajudá-lo a começar a vistoriar seus componentes personalizados.
- Se você usa o Axe Accessibility Linter para VS Code ou o plugin JetBrains, veja Vistoriando Componentes Personalizados com a Extensão Axe Accessibility Linter para VS Code ou o Plugin JetBrains.
- Se você usar o endpoint REST do Axe DevTools Linter, veja Linting de Componentes Personalizados com o Endpoint REST do Axe DevTools Linter.
Se você gostaria de informações sobre linting de arquivos React Native e linting de componentes personalizados React Native, veja Usando o Axe DevTools Linter para React Native.
Para informações sobre o suporte do Axe DevTools Linter para algumas bibliotecas populares de componentes personalizados, veja Bibliotecas de Componentes Pré-configuradas.
Veja Também
Veja Configurando o Axe DevTools Linter para informações sobre as configurações usadas pelo Axe Accessibility Linter para VS Code, o plugin JetBrains e o endpoint REST.