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)

Confira também