Tutorial de teste de acessibilidade (um guia passo a passo completo)

accessibility testing tutorial

Um guia completo para testes de acessibilidade:

O que é acessibilidade na web:

A web está aberta a todos e sendo um testador (também humano), é nossa responsabilidade verificar se está acessível a todos os usuários. Isso, por sua vez, contribuirá muito para o sucesso de um negócio, pois trabalhamos para tornar o aplicativo acessível a todos os usuários.

Isso também aumentará a satisfação do usuário e do nosso negócio.

Lista de tutoriais nesta série:

1. Guia de teste de acessibilidade (Este tutorial)
2. Ferramentas de teste de acessibilidade - uma lista completa
3. Tutorial WAT (Web Accessibility Toolbar)
4. Ferramentas de verificação de acessibilidade WAVE e JAWS

Para a maioria dos usuários, o uso da Internet na web é fácil. Mas este não é o caso quando olhamos para um conjunto demográfico diferente com desafios. É imperativo que os sites sejam acessíveis, utilizáveis ​​e úteis também para esse grupo de usuários - e não deve diferenciar os usuários com base no idioma / cultura / localização / software / capacidade física ou mental.

O que você aprenderá:

• O que é teste de acessibilidade?
• Acessibilidade e Lei
• Mitos sobre como testar a acessibilidade do site
• Desafios do teste de acessibilidade
• Importância
• Como a acessibilidade à Web é medida?
• Princípios universais de web design a serem seguidos
• Como realizar testes de acessibilidade - um guia passo a passo
  • Método Manual
  • Teste de acessibilidade automatizado
• Lista de verificação de teste de acessibilidade / casos de teste / cenários
• Conclusão
• Leitura recomendada

O que é teste de acessibilidade?

O teste de um aplicativo da Web para garantir que cada usuário possa acessar facilmente o site é conhecido como Teste de Acessibilidade. O ramo especializado e dedicado de teste que ajuda a garantir que os sites sejam realmente eficazes nesta área é chamado de “ Teste de acessibilidade da web ”.

Mais importante ainda, existem certas leis e diretrizes para testes de acessibilidade que também devem ser seguidas.

Acessibilidade e Lei

• Americanos com deficiência agem : Esta lei estabelece que todos os domínios, como edifícios públicos, escolas e organizações, devem tornar a tecnologia acessível a todos.
• Lei de Reabilitação, seção 504 e seção 508 : A seção 504 acomoda todas as pessoas com deficiência para acesso ao local de trabalho, educação e outras organizações e a seção 508 acomoda o acesso à tecnologia.
• Diretrizes de acessibilidade de conteúdo da web: Essas diretrizes sugerem maneiras que podem ajudar a melhorar a acessibilidade de um site.

Mitos sobre como testar a acessibilidade do site

Mito 1 :É caro.

Facto : Precaução é sempre melhor do que remediar, por isso podemos pensar nos problemas de acessibilidade na própria fase de design e reduzir o custo.

Mito 2: Converter um site inacessível para acesso é demorado.

Facto : Podemos priorizar as coisas e trabalhar apenas nas necessidades básicas.

Mito 3: A acessibilidade é simples e enfadonha.

Facto : Acessibilidade não significa que um site deva conter apenas texto. Podemos também adicionar imagens e torná-lo mais atraente, mas o ponto a ser destacado é que deve ser acessível a todos.

Mito 4 :O teste de acessibilidade é para cegos e deficientes físicos.

Facto : O software é útil para todos e, portanto, este teste é para todos os usuários.

Desafios de A Teste de acessibilidade

A seguir estão alguns desafios ou dificuldades comuns que as diretrizes de acessibilidade tentam abordar:

Importância

• Acesso fácil e eficiente para usuários com deficiência ou desafios
• Aumenta a participação no mercado e o alcance do público
• Melhora a capacidade de manutenção e eficiência
• Satisfez os requisitos legais existentes e futuros e ajuda a seguir a ética
• Apoie a internacionalização
• Auxilia no acesso para usuários de baixa largura de banda.

No final das contas, tudo se traduz em “Melhores negócios - mais dinheiro”.

Como a acessibilidade à Web é medida?

A acessibilidade da web pode ser medida com a ajuda dos padrões de acessibilidade da web criados pelo W3C conhecido como Diretrizes de acessibilidade de conteúdo da web (WCAG) . Alguns outros departamentos também desenvolveram suas próprias diretrizes, mas estes também seguem a Iniciativa de Acessibilidade da Web (WAI) Diretrizes.

Avaliando a acessibilidade de um site:

Existem muitos fatores que desempenham um papel nisso, tais como:

• Conteúdo
• Tamanho
• Código
• Linguagens de marcação
• Ferramentas de desenvolvimento
• Ambiente

Como sempre, é uma boa prática implementar técnicas de acessibilidade web na fase inicial do projeto. Consertar sites não acessíveis requer esforços adicionais.

Alguns exemplos de técnicas simples são:

• Verificação do título da página
• Alternativas de texto de imagem (“texto alternativo”)
• Títulos
• Taxa de contraste (“contraste de cor”) .. etc.

Também podemos determinar a acessibilidade com a ajuda de “ Ferramentas de Avaliação '- até certo ponto. Existem poucas coisas, como se o texto alternativo foi escrito apropriadamente para a imagem ou não, não pode ser totalmente avaliado, mas eles são eficazes na maior parte.

Leia também => Mais de 30 ferramentas de teste da web mais populares.

Princípios universais de web design a serem seguidos

O site deve ser universalmente projetado de forma que siga os princípios de usabilidade e acessibilidade. Todo mundo tem seu próprio estilo de aprendizagem e processamento, portanto, o site / produto deve ser projetado independentemente disso.

Abaixo estão alguns princípios básicos padrão de design de sites:

# 1) Coordenação:

Cada atividade e cada pessoa incluída no projeto devem coordenar-se entre si. Deve-se ter em mente que um site deve ser projetado de acordo com os seus próprios e também W3C padrões.

# 2) Aplicação:

Sendo uma organização responsável, você deve se considerar responsável por criar um site acessível. Em vez de os usuários se responsabilizarem por um site acessível, devemos fazê-lo.

# 3) Liderança:

Todos devem estar cientes desses princípios e devem informar se estão enfrentando algum problema ao acessar o site.

# 4) Consideração de acesso :

Precisamos seguir os padrões, junto com isso podemos considerar os padrões seguidos pela organização para pessoas com deficiência.

# 5) Dimensões técnicas:

Um site deve ser projetado considerando todos os padrões técnicos.

# 6) Pesquisa educacional:

Devemos pesquisar sobre acessibilidade e os problemas enfrentados ao acessar o site. Com a ajuda disso, deve ser dado treinamento aos funcionários para torná-los cientes dos padrões e questões.

# 7) Inclusão social:

Todos os humanos devem ser tratados de forma igual, não apenas no modo online, mas também no mundo físico.

Junto com esta construção, é necessário um site POUR.

Agora surge a pergunta: o que significa POUR e a resposta é dada abaixo:

P perceptível:A apresentação do web suite deve ser perceptível. O conteúdo deve fazer sentido de toda a perspectiva de todos os usuários.

OU perável:Pode-se dizer que o site é operável se o usuário conseguir navegar facilmente no site.

você compreensível:Tudo o que está presente no site deve ser compreendido por qualquer tipo de usuário. Em suma, a linguagem deve ser fácil e não complexa.

R Pare:Independentemente da mudança de tecnologia e do tipo de usuários, o conteúdo deve ser robusto.

como registrar um relatório de bug

Como realizar testes de acessibilidade - um guia passo a passo

Isso pode ser feito usando o método de teste Manual e Automação.

Método Manual

Existem muitas ferramentas disponíveis no mercado para teste de acessibilidade, mas pode haver alguns problemas como falta de recursos qualificados, orçamento etc. Nesse caso, podemos ir com o teste manual.

Abaixo estão algumas maneiras de testar a acessibilidade do site manualmente:

# 1) Podemos usar o modo de alto contraste:

Usando o modo de alto contraste, podemos destacar o conteúdo do site. Quando ativamos o modo de alto contraste, o conteúdo do site é destacado automaticamente conforme fica branco ou amarelo e o fundo fica preto.

Para ativar o modo de alto contraste, pesquise o modo de alto contraste na caixa de pesquisa.

Aqui, você terá a opção de escolher um tema, selecione o tema de alto contraste no menu suspenso.

Um navegador terá a aparência mostrada abaixo depois de fazer as alterações nas configurações.

Depois disso, podemos ver se o conteúdo está devidamente visível ou não.

# 2) Ao não acessar as imagens :

Temporariamente por enquanto, você pode desligar o acesso e ver se o texto justifica o conteúdo, pois algumas pessoas podem não ter acesso a ele ou às vezes demora muito para carregar as imagens.

Você pode desligar o acesso ao navegador das maneiras abaixo:

Internet Explorer: Ferramentas-> Opções da Internet-> Avançado-> mostrar imagens (desmarque).

Raposa de fogo: Abra o Firefox e digite sobre : config , na barra de endereço e você obterá a saída conforme mostrado abaixo.

Depois de obter esta tela, você deve pesquisar por ' permission.default.image ’ e ajuste o valor de 0-1.

# 3) Verificar legendas :Verifique se uma legenda está disponível e certifique-se de que seja bastante descritiva. Muitas vezes nos deparamos com links na página do facebook onde as imagens ou vídeos podem demorar para serem exibidos, mas as legendas nos ajudarão muito.

# 4) Desligando a folha de estilo em cascata (CSS): CSS é usado basicamente para descrever a apresentação do documento. Ao desligar isso, podemos verificar a cor de fundo, o estilo do texto e o estilo de apresentação do texto.

# 5) Tente usar o teclado :Se você é um jogador ou um especialista em Excel, este teste deve ser mais fácil para você. Tente não tocar no mouse e acesse o site com a ajuda de um teclado.

Você pode usar a tecla “Tab” para alternar entre os links.

“Tab” + ”Shift” irá levá-lo onde você estava antes.

# 6) Use rótulo de campo :É útil ao preencher um formulário, Legenda do campo é o que você verá ao visualizar um modelo. Com isso, pode-se preencher as informações necessárias ao se inscrever ou fazer um pedido online.

# 7) Alterar o tamanho da fonte para grande :Use tamanho de fonte grande e verificação de acessibilidade contínua.

# 8) Pular navegação: Isso pode ser útil para pessoas com deficiência motora. Clicando Ctrl + Home você pode mover seu foco para o topo da página.

# 9) Documento PDF: Tente salvar o arquivo PDF em forma de texto e verifique se a ordem do conteúdo é mantida ou não.

# 10) Ao desativar o estilo: Desative o estilo e verifique se o conteúdo da tabela está alinhado corretamente ou não.

# 11) Escalonamento de conteúdo: Tente diminuir o zoom da imagem e verifique se está legível.

Teste de acessibilidade automatizado

Como a automação está se espalhando amplamente no campo de teste, também podemos optar pela automação para verificação de acessibilidade. Temos várias ferramentas para testes automatizados.

# 1) aDesigner: Ele é desenvolvido pela IBM e é útil para testar o software da perspectiva de pessoas com deficiência visual.

# 2) WebAnywhere: Ele atua como um leitor de tela e não requer instalação especial.

# 3) Vischeck: Esta ferramenta nos ajuda a reproduzir a imagem em várias formas para que possamos imaginar como ela ficará quando for acessada por diferentes tipos de usuários.

# 4) Analisador de contraste de cor: Ele verifica a combinação de cores e analisa a visibilidade.

# 5) Hera: Ele verifica o estilo do aplicativo e vem com uma opção multilíngue.

# 6) Extensão de acessibilidade do Firefox: O Firefox permite que você estenda sua funcionalidade.

Você pode adicioná-lo para abrir Firefox-> Complementos-> extensão de acessibilidade . Isso o ajudará a testar o relatório, navegação, texto do link etc.

Depois de clicar no extensão você terá uma opção para pesquisar add-ons .

# 7) TAW online: Dá a você a opção de testar, verificar se o software foi desenvolvido de acordo com as diretrizes de WCAG 1.0 ou WCAG 2.0 . Também tem a opção de selecionar o nível de análise.

# 8) Verificador de acessibilidade de PDF: Ele verifica a acessibilidade de um arquivo PDF.

=> Para a lista completa verifique esta postagem sobre ferramentas de teste de acessibilidade

Teste de Acessibilidade Lista de verificação / casos de teste / cenários

A seguir estão alguns pontos que precisam ser verificados ao fazer este tipo de teste:

• Se as etiquetas estão escritas e colocadas corretamente ou não.
• Se o conteúdo de áudio / vídeo é devidamente audível / visível ou não.
• Se a relação de contraste da cor é mantida ou não.
• Se as ações de controle para vídeo estão funcionando bem ou não.
• Se as teclas de atalho forem fornecidas para o menu, você precisará verificar se todas estão funcionando bem.
• É necessário verificar se há guias se a navegação entre elas for uma tarefa fácil.
• Se o aplicativo seguiu todos os princípios e diretrizes ou não.
• Se o título é único e transmite o significado e a estrutura ou não.
• Se o texto do link for escrito com a descrição do conteúdo em vez de criar ambigüidade.
• Se uma legenda multimídia significativa é fornecida ou não.
• Se as instruções são dadas claramente ou não.
• Se o conteúdo é claro, conciso e compreensível ou não.

A seguir estão os pontos-chave que o site deve satisfazer para acessibilidade:

• O texto do link deve ser descritivo . O usuário com deficiência visual acessa a página da web clicando no botão guia no teclado e movendo de link para link. Portanto, é essencial que a descrição dos links seja devidamente definida. Certifique-se de que os hiperlinks sejam acessíveis usando a tecla tab.
• Forneça fotos apropriadas sempre que possível . Uma imagem fala mais alto do que palavras. Tente adicionar imagens apropriadas para o texto sempre que possível. As imagens podem descrever o conteúdo do site para usuários com dificuldades de alfabetização.
• Use uma linguagem simples . O usuário com deficiência cognitiva tem dificuldades de aprendizagem, é muito importante fazer frases simples e de fácil leitura para ele.
• Navegação Consistente . A navegação consistente pelas páginas também é muito importante para usuários com deficiências cognitivas. É uma boa prática manter a consistência do site e não modificar as páginas regularmente. Ajustar-se ao novo layout é demorado e pode se tornar difícil.
• Ignorar pop-ups . Usuários que usam um leitor de tela para ler as páginas da web, os pop-ups podem ser realmente inconvenientes para eles. O leitor de tela lê a página de cima para baixo e um pop-up repentino aparece e o leitor começa a ler antes do conteúdo real. Isso pode confundir usuários com deficiência visual.
• Layout CSS . Sites baseados em CSS são mais acessíveis do que sites baseados em código HTML.
• Divida uma frase grande em uma frase pequena e simples. Usuários com deficiência visual ouvem as informações na página da web e tentam se lembrar delas. Ao dividir a frase grande em uma frase simples e pequena pode ajudar a lembrar as coisas facilmente.
• Não use texto letreiro. Evite texto brilhante e mantenha-o simples.

Em suma, precisamos verificar se o aplicativo é desenvolvido de acordo com as diretrizes do W3C, princípios de design de sites e princípios de acessibilidade e para isso, devemos estar atentos a todos esses princípios.

Podemos resumir os pontos de verificação acima verificando e validando o conteúdo escrito, o design e o método de desenvolvimento do site / aplicativo.

Leia também => Guia completo de teste da Web.

Conclusão

O teste de acessibilidade explica simplesmente como é fácil navegar, acessar e entender o software. É para todos os tipos de usuários. O testador deve fazer o teste da perspectiva de todos.

Assim como qualquer outro tipo de teste, esse teste também pode ser feito manualmente ou com a ajuda de ferramentas de automação. O objetivo de um testador deve ser apenas verificar se as diretrizes foram cumpridas ou não e com que facilidade e facilidade um usuário pode usar o software.

Leitura recomendada = >> Principais provedores de serviços de teste de acessibilidade

Na próxima parte desta série de tutoriais, apresentaremos a você mais algumas ferramentas e técnicas de teste de acessibilidade na web, portanto, fique conosco.

Como sempre, por favor, comente com suas dúvidas, sugestões e experiências.

PRÓXIMO Tutorial

Leitura recomendada

• Tutorial da ferramenta de teste de acessibilidade WAVE
• Teste Alfa e Teste Beta (um guia completo)
• Tutorial WAT (Web Accessibility Toolbar) para teste de acessibilidade
• Teste Funcional Vs Teste Não Funcional
• Tutorial de teste de usabilidade: um guia de primeiros passos completo
• Guia completo de teste de verificação de compilação (teste BVT)
• Tutorial de teste de DevOps: como o DevOps afetará os testes de controle de qualidade?
• Implantação no MongoDB: tutorial passo a passo