Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
Este artigo lista aspectos típicos de acessibilidade para testar páginas da Web e os recursos correspondentes no Microsoft DevTools.
Texto alternativo para imagens
| Aspecto de acessibilidade a ser marcado | Recurso do DevTools | Artigo |
|---|---|---|
| Verifique se as imagens têm texto alt | Ferramenta> Problemas Seção de acessibilidade do relatório | Verificar se as imagens têm texto alt em Teste automaticamente uma página da Web em busca de problemas de acessibilidade |
| Verifique se as imagens têm texto alt | Ferramenta >Lighthouse Problemas sobre texto alternativo | Testar a acessibilidade usando o Lighthouse |
Suporte ao teclado
| Aspecto de acessibilidade a ser marcado | Recurso do DevTools | Artigo |
|---|---|---|
| Verifique o suporte ao teclado | Ferramenta>Inspecionar Seção de acessibilidade da sobreposição | Use a ferramenta Inspecionar para detectar problemas de acessibilidade passando o mouse sobre a página da Web e Analisar páginas HTML usando a ferramenta Inspecionar |
| Verifique o suporte ao teclado | Teclas Tab, Shift+Tab e Enter | Verifique o suporte ao teclado usando as teclas Tab e Enter |
| Verificar o suporte ao teclado: Verifique se o foco é indicado | Ferramenta Inspecionar, guia Estilos e ferramenta Fontes | Analise 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 | Ferramenta Inspecionar, árvore DOM na ferramenta Elementos e guia Ouvintes de Eventos | Analise a falta de suporte ao teclado em um formulário |
| Verifique o suporte ao teclado: verifique a ordem da tecla Tab | Ferramenta> Elementos Guia Acessibilidade Visualizador >de Ordem de Origem | Teste o suporte ao teclado usando o Visualizador de Ordem de Origem |
| Verifique o suporte ao teclado | Ferramenta >Lighthouse Problemas com suporte ao teclado | Testar a acessibilidade usando o Lighthouse |
Contraste de texto
| Aspecto de acessibilidade a ser marcado | Recurso do DevTools | Artigo |
|---|---|---|
| Verifique se o texto tem contraste suficiente (automaticamente, para toda a página) | Ferramenta> Problemas Seção de acessibilidade do relatório | Verifique se as cores do texto têm contraste suficiente em Teste automaticamente uma página da Web em busca de problemas de acessibilidade |
| Verifique se o texto tem contraste suficiente | Ferramenta> Elementos Guia Estilos>Seletor de Cores | Teste o contraste da cor do texto usando o Seletor de Cor |
| Verifique se o texto tem contraste suficiente | Ferramenta >InspecionarSeção de acessibilidade da sobreposição >Linha de contraste | Use a ferramenta Inspecionar para detectar problemas de acessibilidade passando o mouse 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 focalização | Ferramenta> Elementos Guia >EstilosAlternar o estado do elemento (mostra as caixas de seleção Forçar estado do elemento) | Verifique a acessibilidade de todos os estados dos 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 o tema escuro e o tema claro |
| Verifique se o texto tem contraste suficiente (automaticamente, para toda a página) | Ferramenta >Lighthouse Problemas sobre contraste de texto | Testar a acessibilidade usando o Lighthouse |
Suporte do leitor de tela
| Aspecto de acessibilidade a ser marcado | Recurso do DevTools | Artigo |
|---|---|---|
| Verifique o suporte ao leitor de tela: Verifique se os campos de entrada têm rótulos | Ferramenta> Problemas Seção de acessibilidade do relatório | Verifique se os campos de entrada têm rótulos em Teste automaticamente uma página da Web em busca de problemas de acessibilidade |
| Verificar o suporte do leitor de tela | Ferramenta> Inspecionar Seção de acessibilidade da sobreposição >Nome e Função | Use a ferramenta Inspecionar para detectar problemas de acessibilidade passando o mouse sobre a página da Web e Analisar páginas HTML usando a ferramenta Inspecionar |
| Verificar o suporte do leitor de tela | Ferramenta> Elementos Guia Acessibilidade Árvore >de Acessibilidade | Verifique a Árvore de Acessibilidade para suporte ao teclado e ao leitor de tela e Teste a acessibilidade usando a guia Acessibilidade |
| Verificar o suporte do leitor de tela | Ferramenta >Lighthouse Problemas com suporte ao leitor de tela | Testar a acessibilidade usando o Lighthouse |
Deficiências visuais
| Aspecto de acessibilidade a ser marcado | Recurso do DevTools | Artigo |
|---|---|---|
| Verifique se a página da Web pode ser usada por pessoas com daltonismo | Ferramenta >de renderizaçãoEmular lista suspensa de deficiências visuais | Verifique se uma página é utilizável por pessoas com daltonismo |
| Verifique se a página da Web pode ser usada com visão turva | Ferramenta >de renderizaçãoEmular lista suspensa de deficiências visuais | Verifique se uma página é utilizável com visão turva |
| Verifique se a página da Web pode ser usada 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 é utilizável com a animação da interface do usuário desativada |
| Verifique se a página da Web pode ser usada por pessoas com deficiência visual | Ferramenta >Lighthouse Problemas sobre deficiências visuais | Testar a acessibilidade usando o Lighthouse |
Usável quando restrito
| Aspecto de acessibilidade a ser marcado | Recurso do DevTools | Artigo |
|---|---|---|
| Verifique se o layout da página da Web é acessível quando restrito | 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 do dispositivo) |