wat tutorial
WAT ou Tutorial da barra de ferramentas de acessibilidade da Web para teste de acessibilidade:
Ferramentas de teste de acessibilidade foram explicados em detalhes em nosso tutorial anterior no Série de testes de acessibilidade .
WAT (barra de ferramentas de acessibilidade da Web) - é uma barra de ferramentas para Navegador Internet Explorer e outros navegadores - Pode auxiliar na avaliação de uma página da Web quanto à conformidade com as Diretrizes de Acessibilidade de Conteúdo da Web versão 2 (WCAG 2.0).
Como usar a ferramenta WAT?
Por favor baixe e instale aqui .
Após a instalação bem-sucedida, você verá uma ferramenta adicional de acessibilidade na web logo abaixo da barra de endereço.
Vamos aprender isso com a ajuda do site da EAsports - http://www.easports.com.
# 1) Título da página - Podemos verificar a barra de título da página na barra de título da janela ou na barra de título da guia dos navegadores. Ao passar o mouse na guia, você verá as informações do título da página.
Insira o URL http://www.easports.com e verifique o título da página na barra de título da guia passando o mouse.
# 2) Cor - A cor do site deve passar no Color Contrast Analyzer.
Existem 3 níveis de conformidade diferentes para determinar a proporção de cor, ou seja, Nível A, AA e AAA.
Deve obter um passe para AA ou AAA .
“A” representa o nível baixo de acessibilidade, “AA” representa o nível médio de acessibilidade e “AAA” representa o nível mais alto de acessibilidade.
Insira o URL http://www.easports.com i Na barra de ferramentas, clique na guia Cor, selecione Analisador de contraste e verifique.
# 3) Títulos - Os títulos fornecem uma visão geral eficaz do conteúdo da página. Todas as páginas devem começar com títulos H1 ou H2. O texto do título deve ser maior, em negrito e marcado nas páginas da web. E a página deve começar com “h1” e em cada página deve haver pelo menos um título.
Para verificar a estrutura do título, clique em http://www.easports.com e selecione a guia Estrutura e então clique na estrutura do título e verifique. Ele lhe dará todos os detalhes do título do título. Ele também examinará se os títulos estão aninhados corretamente ou não.
# 4) Texto alternativo para imagens - O atributo alt é compatível com todos os principais navegadores. Todas as imagens devem ter o texto Alt associado a elas. Ele exibe o valor do atributo alt como uma dica de ferramenta quando passamos o mouse sobre a imagem. Isso fornece informações alternativas de uma imagem se a imagem não puder ser exibida.
Insira o url http://www.easports.com, Clique em mostrar imagens e verifique se o texto alternativo está disponível para as imagens.
Você verá o pop-up abaixo:
Você obterá os detalhes mencionados acima.
# 5) Ordem de tabulação - A ordem da sequência das guias deve ser exibida de forma lógica e adequada. Você pode navegar para os diferentes links clicando na tecla tab. Depois de selecionar o indicador de ordem das guias, você pode ver a contagem do número perto dos links, que mostra quantas vezes é necessário clicar na tecla da guia para acessar esse link específico.
Para verificar a ordem das guias, clique em url http://www.easports.com e clique em Estrutura e selecione o indicador de ordem das guias.
# 6) Listas - A lista deve ser exibida na estrutura adequada. As listas sempre devem ser verificadas para garantir que os itens da lista estejam realmente contidos em uma lista. A lista pode ser de duas formas: ordenou lista e não ordenado Lista . Listas não ordenadas usam o elemento e listas ordenadas usam o
elemento.
Digite o url http://www.easports.com i Na barra de ferramentas, clique em estrutura e selecione Itens da lista e verifique a ordem da lista.
Exemplo de lista não ordenada:
Exemplo de lista ordenada:
# 7) Contraste Razão - Deve ter um contraste mínimo por padrão. Os navegadores da Web devem permitir que as pessoas alterem a cor do texto e do fundo, se necessário.
Insira o url do google https://www.google.co.in/ e clique nas imagens e selecione Juicy Studio Luminosity Analyzer.
Uma nova janela será aberta com o título Color Contrast Analyzer com a tabela de resultados. A última coluna é Relação de contraste de luminosidade.
como configurar um e-mail falso
# 8) Etiquetas - As etiquetas devem ser exibidas corretamente.
Insira o url https://www.google.co.in/ e na barra de ferramentas clique em Estrutura e selecione fieldset / labels como opção. Você verá o fieldset e os detalhes do rótulo.
# 9) Básico Estrutura Verificar - Nesta verificação verificamos páginas da web sem imagens, estilos e layout.
Na barra de ferramentas, clique em Imagens e em Remover Imagens.
Agora selecione CSS e clique em Desativar CSS.
Por fim, clique em Tabelas e selecione Linearizar.
Hora de praticar:
Vamos agora dar a nós mesmos um exemplo de tarefa de teste de acessibilidade, claro que a solução é fornecida. Mas recomendamos que você tente fazer isso antes de ir para a resposta.
Verifique os títulos, imagens com texto alternativo, indicador de ordem de tabulação e contraste de cor em http://www.cbssports.com
Solução: Clique no url http://www.cbssports.com no Internet Explorer.
Para verificar os títulos, clique em Estrutura e selecione Estrutura do Título para verificar o Título.
Os títulos não estão em H1. Todas as manchetes estão em H2.
Para verificar o texto alternativo, clique em Imagens e selecione Mostrar imagens para verificar se o texto alternativo está presente nas imagens ou não.
Você descobrirá que poucas das imagens estão com o texto alternativo e poucas estão sem o atributo alternativo. Os detalhes da imagem sem texto alternativo são exibidos em pop-up e os detalhes das imagens com texto alternativo são exibidos próximos às imagens.
Por exemploalt = texto ”Search CBS Sports.com” exibido próximo ao ícone de pesquisa e alt = texto ”CBSSports.com” exibido próximo ao logotipo do Fantasy.
Para verificar o indicador de ordem de tabulação, clique em Estrutura e selecione Indicador de ordem de tabulação .
A contagem será exibida perto dos links que mostram em que tentativa você poderá clicar naquele link específico. Por exemplo, para clicar no link principal da NFL, você precisará pressionar o botão Tab no teclado 13 vezes.
Agora, o último para verificar o contraste da cor, clique na cor e selecione Analisador de contraste.
O Texto passa com duplo A, ou seja, AA.
Lá, essa é a forma de avaliar a acessibilidade do site.
PREV Tutorial | PRÓXIMO Tutorial
Leitura recomendada
- Tutorial da ferramenta de teste de acessibilidade WAVE
- Tutoriais detalhados do Eclipse para iniciantes
- Tutorial de teste de acessibilidade (um guia passo a passo completo)
- 20 principais ferramentas de teste de acessibilidade para aplicativos da Web
- Melhores ferramentas de teste de software 2021 (QA Test Automation Tools)
- Tutorial de teste destrutivo e teste não destrutivo
- Teste Funcional Vs Teste Não Funcional
- Tutorial de teste de SOA: Metodologia de teste para um modelo de arquitetura SOA