Recursos de teste de acessibilidade
Este artigo lista os aspectos típicos de acessibilidade a serem testados para páginas da Web e os recursos correspondentes no Microsoft DevTools.
Alt-text para imagens
| Aspecto de acessibilidade para marcar | Recurso de DevTools | Artigo |
|---|---|---|
| Verificar se as imagens têm texto alt | Seção Acessibilidade da ferramenta >de problemas do relatório | Verifique se as imagens têm texto alt em Testar automaticamente uma página da Web para problemas de acessibilidade |
| Verificar se as imagens têm texto alt | Problemas da ferramenta > Lighthouse sobre alt-text | Testar acessibilidade usando o Lighthouse |
Suporte ao teclado
| Aspecto de acessibilidade para marcar | Recurso de DevTools | Artigo |
|---|---|---|
| Verificar o suporte ao teclado | Inspecionar a seção Acessibilidade da ferramenta > de sobreposição | Use a ferramenta Inspecionar para detectar problemas de acessibilidade pairando sobre a página da Web e analisar páginas HTML usando a ferramenta Inspecionar |
| Verificar o suporte ao teclado | Teclas Tab, Shift+Tab e Enter | Verifique se há suporte ao teclado usando as teclas Tab e Enter |
| Verificar o suporte ao teclado: verifique se o foco está indicado | Ferramenta de inspeção, guia Estilos e ferramenta Fontes | Analisar a falta de indicação do foco do teclado |
| Verificar o suporte ao teclado: verifique se os botões de formulário podem ser usados com o teclado | Inspecionar ferramenta, árvore DOM na ferramenta Elementos e guia Ouvintes de Eventos | Analisar a falta de suporte ao teclado em um formulário |
| Verificar o suporte ao teclado: verificar a ordem de tecla tab | Visualizador de ordem de origem da guia >Acessibilidade da Ferramenta >de Elementos | Testar o suporte ao teclado usando o Visualizador de Ordem de Origem |
| Verificar o suporte ao teclado | Problemas da ferramenta > Lighthouse sobre o suporte ao teclado | Testar acessibilidade usando o Lighthouse |
Contraste de texto
| Aspecto de acessibilidade para marcar | Recurso de DevTools | Artigo |
|---|---|---|
| Verifique se o texto tem contraste suficiente (automaticamente, para toda a página) | Seção Acessibilidade da ferramenta >de problemas do relatório | Verifique se as cores de texto têm contraste suficiente em Testar automaticamente uma página da Web para problemas de acessibilidade |
| Verifique se o texto tem contraste suficiente | Seletor de cores da guia >Estilos de Ferramenta >de Elementos | Testar o contraste de cor de texto usando o Seletor de Cores |
| Verifique se o texto tem contraste suficiente | Inspecionar a seção Acessibilidade da ferramenta > da linha contraste de sobreposição > | Use a ferramenta Inspecionar para detectar problemas de acessibilidade pairando sobre a página da Web e analisar páginas HTML usando a ferramenta Inspecionar |
| Verifique se o texto tem contraste suficiente: no estado de hover | Guia Estilos de> ferramenta >de elementosAlterne o estado do elemento (mostra caixas de seleção do estado do elemento Force) | Verificar a acessibilidade de todos os estados de elementos |
| Verifique se o texto tem contraste suficiente: com tema escuro (modo escuro) e tema claro | Ferramenta de renderização>Emular recurso de mídia CSS prefers-color-scheme | Verifique se há problemas de contraste com tema escuro e tema claro |
| Verifique se o texto tem contraste suficiente (automaticamente, para toda a página) | Problemas da ferramenta > Lighthouse sobre o contraste de texto | Testar acessibilidade usando o Lighthouse |
Suporte ao leitor de tela
| Aspecto de acessibilidade para marcar | Recurso de DevTools | Artigo |
|---|---|---|
| Verificar o suporte ao leitor de tela: verifique se os campos de entrada têm rótulos | Seção Acessibilidade da ferramenta >de problemas do relatório | Verifique se os campos de entrada têm rótulos em Testar automaticamente uma página da Web para problemas de acessibilidade |
| Verificar o suporte ao leitor de tela | Inspecionar a seção Acessibilidade da ferramenta > de sobreposição >Nome e Função | Use a ferramenta Inspecionar para detectar problemas de acessibilidade pairando sobre a página da Web e analisar páginas HTML usando a ferramenta Inspecionar |
| Verificar o suporte ao leitor de tela | Árvore de acessibilidade da guia >Acessibilidade da ferramenta >Elementos | Verifique a Árvore de Acessibilidade para obter suporte ao leitor de teclado e tela e Testar acessibilidade usando a guia Acessibilidade |
| Verificar o suporte ao leitor de tela | Problemas da ferramenta > Lighthouse sobre o suporte ao leitor de tela | Testar acessibilidade usando o Lighthouse |
Deficiências de visão
| Aspecto de acessibilidade para marcar | Recurso de DevTools | Artigo |
|---|---|---|
| Verifique se a página da Web é utilizável por pessoas com cegueira colorida | Ferramenta de renderização>Emular lista suspensa de deficiências de visão | Verifique se uma página é utilizável por pessoas com cegueira colorida |
| Verifique se a página da Web é utilizável com a visão desfocada | Ferramenta de renderização>Emular lista suspensa de deficiências de visão | Verifique se uma página é utilizável com a visão desfocada |
| Verifique se a página da Web é utilizável com a animação da interface do usuário desativada (movimento reduzido) | Ferramenta de renderização>Emular recurso de mídia CSS prefers-reduced-motion | Verifique se uma página pode ser utilizável com a animação da interface do usuário desativada |
| Verifique se a página da Web é utilizável por pessoas com deficiências de visão | Problemas da ferramenta > Lighthouse sobre deficiências de visão | Testar acessibilidade usando o Lighthouse |
Utilizável quando estreito
| Aspecto de acessibilidade para marcar | Recurso de DevTools | Artigo |
|---|---|---|
| Verifique se o layout da página da Web é utilizável quando estreito | Ferramenta de emulação de dispositivo | Verifique se o layout da página da Web é utilizável quando estreito e Emular dispositivos móveis (Emulação de Dispositivo) |