Guia passo a passo para testes de acessibilidade

O objetivo deste post é discutir o significado de acessibilidade e a importância de realizar testes de acessibilidade em vários sistemas. Além disso, destacaremos e discutiremos diferentes ferramentas e técnicas que podem ser implementadas para atingir esse objetivo.

Quando se fala em acessibilidade, ela também pode ser definida como usabilidade para pessoas com deficiência. Em outras palavras, queremos que um sistema possa ser usado por qualquer pessoa, independentemente de sua situação.

Indivíduos com deficiência são pessoas com deficiências físicas, visuais, auditivas, de fala ou cognitivas , entre outras, que enfrentam restrições ao interagir com diferentes barreiras contextuais e que, portanto, não podem se envolver plena e ativamente na sociedade.

É preciso entender que qualquer pessoa pode estar passando por uma situação de incapacidade, seja ela temporária ou permanente, parcial ou absoluta.

Um exemplo disso é uma pessoa que, após um acidente doméstico, precisa usar muletas para se locomover por algum tempo, ou uma pessoa com deficiência visual que necessita de um leitor de tela para interpretar adequadamente um sistema.

Segundo uma pesquisa realizada pelo , existem mais de 500.000 pessoas no Uruguai em situação de deficiência, quase 17% da população uruguaia .

Globalmente, mais de 15% da população (mais de 1.000.000 de pessoas) enfrenta situações de incapacidade segundo a (OMS).

Como você pode ver, isso significa que uma ampla gama de pessoas é afetada por isso e pode não conseguir acessar um sistema adequadamente porque ele não foi projetado para levar a acessibilidade em consideração.

Visão geral do conteúdo

• O que é Teste de Acessibilidade?
• O que são Padrões de Acessibilidade?
• Cronograma WCAG
• Estrutura da Norma e Níveis de Conformidade
• O que são ferramentas de teste de acessibilidade?
• Como são realizados os Testes de Acessibilidade?
• Ferramentas de teste de acessibilidade
• Teste de acessibilidade do usuário (testes manuais)
• Exemplos de Acessibilidade na Web
• Conclusões

O que é Teste de Acessibilidade?

Em poucas palavras, aplicar processos e técnicas de verificação sobre um produto de software para validar se ele atende aos requisitos e padrões de acessibilidade esperados ou não.

Um sistema pode ser considerado acessível quando é projetado para que cada pessoa, independentemente de sua situação, possa percebê-lo, entendê-lo, navegar e interagir com ele.

Esses tipos de testes têm se tornado cada vez mais relevantes ultimamente porque cada vez mais sistemas estão sendo usados, tanto para o trabalho quanto para tarefas cotidianas.

O que são Padrões de Acessibilidade?

Padrões de acessibilidade são diretrizes, regras, controles e normas da indústria que nos permitem entender o grau de acessibilidade que um sistema possui. O padrão mais utilizado no mundo é , principal organização sem fins lucrativos de padrões internacionais.

Além das WCAG, existem diversos outros padrões e diretrizes de acessibilidade que são utilizados em diversas partes do mundo, como:

A Lei de Reabilitação , seções e . A Seção 504 ajuda a fornecer aos indivíduos com deficiência acesso a espaços de trabalho, educação e outras organizações, e a Seção 508 ajuda a fornecer acesso à tecnologia.

Americans with Disabilities Act (ADA) : esta lei estabelece que todas as entidades públicas, como escolas e organizações, devem tornar a tecnologia acessível a todos. Isso inclui sistemas acessíveis e ferramentas de teste de acessibilidade.

Cronograma WCAG

WCAG é um padrão muito amplo que atualmente se aplica a sistemas web e aplicativos móveis e está em constante evolução

Para melhor entendê-lo e saber mais sobre como ele evoluiu, a primeira versão desse padrão (WCAG 1.0) surgiu em maio de 1999, com o objetivo de descrever uma regra geral para design acessível. Mais tarde, em dezembro de 2008, foi substituído pelo WCAG 2.0, que abrangia uma ampla gama de recomendações para tornar o conteúdo da web mais acessível. Em junho de 2018, foi publicada a versão WCAG 2.1, que atualmente é a versão mais estável.

Esta versão inclui não apenas acessibilidade para conteúdo da web, mas também acessibilidade para aplicativos móveis

Atualmente, dois novos documentos estão sendo trabalhados. Por um lado, a versão WCAG 2.2, que inclui as diretrizes de acessibilidade para conteúdo web 2.1.

Por outro lado, está em andamento o projeto Silver (Ag) , que se tornará a versão WCAG 3.0. Este documento incluirá diretrizes adicionais e diferentes mecanismos de pontuação. Espera-se que este projeto seja o sucessor da versão WCAG 2.2, mas não a substituirá nem será compatível com WCAG 2.X. Será um conjunto de diretrizes alternativas.

Estrutura da Norma e Níveis de Conformidade

Para entender o padrão e como ele funciona, as diretrizes atuais de acessibilidade para conteúdo da web incluem quatro princípios de design ( perceptível, operável, compreensível e robusto *)* distribuídos em 13 diretrizes que avaliam diferentes situações de deficiência aplicando 78 critérios. Estes são agrupados em três níveis de conformidade: o menos rigoroso (A), o moderadamente rigoroso (AA) e o mais rigoroso (AAA).

Os quatro princípios de design mencionados para que o conteúdo seja considerado acessível são:

• Perceptível: o conteúdo de um site deve fazer sentido do ponto de vista de cada usuário.

• Operável : um site é operável quando um usuário pode navegar facilmente por todas as páginas.

• Compreensível: todos os elementos de um sistema devem ser compreendidos por qualquer pessoa, portanto a linguagem deve ser fácil.

• Robusto: o conteúdo de um site deve ser compatível com qualquer tipo de tecnologia e usuário.

  
  

Para entender melhor o escopo das WCAG, essas diretrizes vão desde situações muito técnicas e de baixo nível – como toda imagem da web (tag em código HTML) sendo exigida ter o atributo alternativo (alt) para descrever a imagem – até mais diretrizes de nível – por exemplo, todo conteúdo multimídia sendo obrigado a ter legendas e todo áudio sua tradução correspondente.

O que são ferramentas de teste de acessibilidade?

Indivíduos com deficiências físicas que não podem usar dispositivos, incluindo computadores ou dispositivos móveis, precisarão de ferramentas de suporte para ajudá-los a interagir com os sistemas. Algumas das ferramentas de suporte são:

• Teclados especiais : projetados especificamente para usuários com deficiência motora.

• Software Screen Zoom: desenvolvido para auxiliar pessoas com baixa visão, ampliando a tela e facilitando a leitura.

• Leitor de tela: este tipo de ferramenta é utilizada para ler o texto exibido em uma tela.

• Software de reconhecimento de fala : ao reconhecer a fala, substitui as palavras faladas por texto, funcionando como um ponto de entrada para um sistema.

  
  

Como são realizados os Testes de Acessibilidade?

Os testes são realizados por meio de procedimentos e atividades que verificam se o sistema atende ou não aos padrões definidos.

Para isso, são definidos alguns procedimentos que funcionam como diretrizes de como realizar esses tipos de testes. Eles definem atividades e ferramentas de teste de acessibilidade para facilitar as tarefas de verificação.

Ferramentas de teste de acessibilidade - Como realizar testes de acessibilidade

Agora que você sabe o que um sistema deve ter para ser considerado acessível, veremos como realizar os diferentes testes usando:

• Ferramentas de teste de acessibilidade
• Teste de acessibilidade do usuário ou testes manuais

Ferramentas de teste de acessibilidade

O padrão WCAG é verificado usando ferramentas de verificação ou ferramentas automáticas. Para realizar a verificação, eles lêem o código HTML de um aplicativo web ou móvel, e obtêm rapidamente um relatório que indica as diretrizes que são atendidas e as que não são baseadas nas WCAG.

É possível encontrar diversas ferramentas no mercado para avaliar a acessibilidade.

Nesta ocasião, apresentaremos dois deles:

Axe (Axe Accessibility) permite que você verifique se a estrutura de uma página da Web atende às diretrizes WCAG. O CCA (Color Contrast Analyzer) verifica o contraste das cores considerando as diretrizes WCAG. Para entender como funcionam, apresentaremos alguns breves exemplos de como são utilizados.

1. Axe (Axe DevTools)

Esta ferramenta é útil para inspecionar a estrutura de um site e verificar se ele atende a todas as diretrizes WCAG e alguns dos outros padrões mencionados acima.

Por exemplo, se você executou o Axe em um site e descobriu que ele não atende às diretrizes de acessibilidade relacionadas à estrutura e ordem dos cabeçalhos, essa ferramenta permitiria identificar esses aspectos muito rapidamente.

Para usá-lo no Google Chrome, você só precisa instalar a extensão da Chrome Web Store. Para executá-lo, abra o console do desenvolvedor e selecione a guia “Axe Dev Tools”. A ferramenta oferece diferentes opções de validação, sendo possível escanear e validar o site completo ou um elemento específico. Por exemplo, se você selecionar a opção para validar um site completo, um relatório completo será gerado rapidamente, incluindo todas as descobertas de acessibilidade do site, categorizadas por nível de impacto.

Outra coisa a destacar é que Axe oferece uma descrição do problema e sugestões sobre como resolver cada um dos erros, o que facilita o entendimento e agiliza o processo de correção.

2. Analisador de contraste de cores (CCA)

Os testes realizados com o CCA são fundamentais para simular situações de indivíduos com baixa sensibilidade ao contraste de cores. Essa condição pode se apresentar em indivíduos com deficiência visual, como os diferentes tipos de daltonismo. Da mesma forma, esse tipo de situação é ainda mais comum em idosos e pode se agravar cada vez mais com o passar dos anos.

O principal problema quando há cores com pouco ou nenhum contraste é a dificuldade de navegar, ler ou interagir com o sistema, portanto, esta ferramenta ajudará você a verificar se há contraste suficiente entre a cor do primeiro plano (texto ou imagem) e a cor de fundo.

Por exemplo, se você deseja verificar o contraste de um botão em um site, pode usar o CCA para obter a cor de primeiro plano (a cor do texto) e a cor de fundo. O CCA analisará automaticamente a taxa de contraste entre as duas cores.

Depois de baixar a ferramenta CCA , você verá que ela apresenta diferentes maneiras de selecionar uma cor. Neste caso, selecione a cor de frente com o conta-gotas e, da mesma forma, selecione a cor de fundo com o conta-gotas. A ferramenta exibirá imediatamente os resultados do contraste de cores considerando as diretrizes WCAG .

Outra vantagem de usar esta ferramenta é que ela oferece recomendações sobre a relação de contraste de cores que um texto deve ter em relação ao seu tamanho.

As recomendações fornecidas pela ferramenta foram implementadas usando as diretrizes WCAG . Estes determinam 2 níveis de conformidade para este tipo de situação: um contraste mínimo (nível AA) e um contraste melhorado (nível AAA) . Os critérios para esses níveis de conformidade estabelecem que:

• Para o nível AA , o texto normal deve ter uma taxa de contraste de pelo menos 4,5 e os textos grandes devem ter uma taxa de contraste de pelo menos 3,1. Neste caso, WCAG refere-se a textos “grandes” para indicar 18px ou 14px em negrito.

• Para o nível AAA , o requisito é uma taxa de contraste de 7,1 para texto normal e 4,5 para textos grandes.

  
  

  
  

  
  

Teste de acessibilidade do usuário (ou testes manuais)

Para complementar os testes com ferramentas de verificação de testes de acessibilidade, são realizados testes de usuário ou manuais que permitem que os testadores se concentrem no conteúdo e não tanto na estrutura de um site.

Por exemplo, você pode usar ferramentas de verificação para garantir que todas as imagens tenham o atributo alternativo (alt), mas, com esses tipos de testes, você verifica se o texto alternativo é consistente com a imagem que você vê .

A forma como estes testes são realizados é determinada pela situação de deficiência. Neste caso, 5 categorias são definidas:

1. Testes de uso de cores

2. 2. Testes focados em campo

3. testes de navegação

4. Testes de “Zoom”

5. Testes de leitor de tela

   
   

1. Teste de uso de cores

O objetivo desses testes é verificar se o sistema não depende apenas do uso de cores para entender o que está acontecendo com o sistema.

Por exemplo, aqui abaixo você verá uma situação onde há uma comparação entre a percepção de um deficiente visual (ou daltônico) e a percepção de um não deficiente visual. Você pode ver como uma pessoa com deficiência visual não consegue identificar se as informações foram inseridas corretamente ou não.

Uma forma de resolver essa situação é incorporar mensagens e ícones descritivos, como os abaixo:

2. Teste com foco em campo

O objetivo desses tipos de testes é garantir que pessoas com deficiência motora também possam usar o sistema.

Os testes buscam verificar se o sistema está com o indicador de foco fornecido pelos navegadores ativado e se contém todos os elementos do site. Dessa forma, o usuário poderá saber onde está posicionado ou o que está selecionado.

3. Teste de Navegação

Esses tipos de testes geralmente são realizados usando um teclado em vez de usar um mouse para interagir com um sistema. Estão relacionados a testes com foco em campo, pois, para realizá-los, o foco deve estar configurado corretamente para que seja possível a navegação pelo teclado.

Para executá-los, um conjunto de perguntas é colocado:

• Ao navegar pelo site utilizando a tecla “tab” para subir, e “shift + tab” para descer, estes são executados em ordem?
• Você pode navegar por todo o site da esquerda para a direita e de cima para baixo e acessar todas as seções do site?
• Existem elementos ou conteúdos no site que não podem ser acessados apenas com o teclado?

  
  

Esses tipos de situações são as que serão validadas durante os testes de navegação.

4. Teste de “Zoom”

Estes são cruciais para indivíduos com baixa visão. Essa é uma situação que está se tornando cada vez mais comum para pessoas de todas as idades, por isso elas estão se tornando cada vez mais importantes.

A capacidade de ampliar não só está incluída nas recomendações e diretrizes de acessibilidade nas WCAG, mas também uma ferramenta de teste de acessibilidade que facilita a vida cotidiana das pessoas.

Ao realizar esses tipos de testes, você começa com uma pergunta muito simples: o aplicativo tem a funcionalidade de zoom habilitada?

Às vezes, devido a problemas técnicos ou de design, a funcionalidade de zoom é desativada, o que significa que as pessoas que precisam não têm a opção de fazê-lo.

A segunda pergunta que deve ser feita é: o aplicativo funciona corretamente quando o zoom é aplicado?

Quando a funcionalidade de zoom estiver habilitada, é importante verificar se, ao aumentar o tamanho da tela para, por exemplo, 200%, ainda é possível visualizar as informações e operar dentro do sistema sem problemas.

É comum identificar problemas com esse tipo de teste, pois há informações cortadas, ou elementos do site que não estão ajustados corretamente e, portanto, a interação não é boa, entre outras situações que trazem problemas para Usuários.

5. Teste de leitor de tela

Por fim, falaremos sobre testes envolvendo leitura de tela. Esta ferramenta transforma conteúdo HTML em áudio simplificado; ou seja, lê e explica o que está sendo exibido na tela. O principal objetivo dessas ferramentas é ajudar pessoas com deficiência visual a navegar por qualquer sistema, independentemente de sua situação.

Buscam verificar se o sistema é acessível para as pessoas que navegam por ele utilizando o referido leitor de tela.

Existem muitos leitores de tela diferentes: alguns deles são aplicativos de desktop e outros são extensões do Chrome. Alguns exemplos incluem NVDA, JAWS, Windows Narrator e Screen Reader, entre outros.

Para realizar esses testes, primeiro acione as ferramentas e depois navegue manualmente pelo sistema, observando se o que o leitor interpreta é condizente com o que está sendo exibido na tela.

Por fim, é gerado um relatório detalhando todos os erros de acessibilidade encontrados durante o teste. Existem vários problemas que esses tipos de testes podem detectar: por exemplo, se você estivesse passando por um campo de entrada em um formulário e o leitor não lesse o campo, isso seria um problema para uma pessoa cega porque ela não entenderia o que informações que precisam inserir.

Exemplos de Acessibilidade na Web

Agora que você sabe o que significa uma aplicação web ser acessível, mostraremos alguns exemplos que mostram quando um sistema atende aos requisitos de acessibilidade e quando não.

1. Contraste de cor adequado

Indivíduos com deficiência visual podem ter dificuldade para ler textos quando três não há contraste com a cor do fundo, seja um fundo simples ou uma imagem com texto. Por exemplo, as legendas de um vídeo ou texto impresso em uma imagem.

2. Fornecer tags descritivas para os campos em um formulário

É comum que os formulários sejam implementados com tags incorporadas em cada campo do formulário. É melhor não fazer isso porque os leitores de tela podem ignorar essas descrições. Além disso, usuários com deficiência cognitiva podem não compreender a intenção ou a referência ao campo. Este é um exemplo onde as melhores práticas não são seguidas:

Recomenda-se implementar isso da seguinte maneira:

3. Títulos e espaços simples

Um bom design com uma hierarquia simples ajuda os usuários a entender a relação entre o título e os textos correspondentes, os espaços e a localização dos elementos. Além disso, reduz a confusão e torna o conteúdo mais acessível.

4. Alternativas para o consumo de mídia

Recomenda-se disponibilizar o contexto em diferentes formatos, oferecendo às pessoas com deficiência diferentes formas de acesso ao conteúdo.

Abaixo, você confere como um vídeo é apresentado e, além disso, o áudio é transcrito para que você possa lê-lo.

Conclusões

A acessibilidade para produtos de software é um atributo que não pode ser desconsiderado, pois pode impactar muitos usuários. Dependendo da situação de deficiência que cada pessoa enfrenta, ela terá mais facilidade ou dificuldade para operar o software dependendo do grau de adoção das normas estabelecidas pelas normas e boas práticas.

É importante pensar na acessibilidade de um sistema como uma vantagem competitiva, pois não só aumenta o engajamento do usuário, mas também melhora a manutenção e a eficácia e atende aos requisitos legais existentes e futuros dos diferentes países do mundo, portanto, também ajuda você vai internacional.

Padrões de acessibilidade como o WACG fornecem uma excelente estrutura de referência e boas práticas para tornar os sistemas de informação acessíveis, além de oferecer um excelente guia de como começar a trilhar o caminho para os testes de acessibilidade. Da mesma forma, graças aos três níveis de cumprimento da norma, é possível medir o estado atual do sistema e planejar as ações a serem tomadas para alcançar novos níveis de forma incremental no futuro.

Existem diferentes ferramentas de teste de acessibilidade para executar testes de acessibilidade, como Axe e CCA , entre outros. Eles oferecem uma capacidade de análise muito boa para determinar rapidamente o estado geral dos sistemas em termos de acessibilidade e oferecem recomendações para corrigir os erros detectados ao longo do caminho.

Para complementar estas ferramentas, também é importante considerar atividades de verificação e validação manual que permitem entender outros aspectos da acessibilidade que não podem ser obtidos apenas olhando para os resultados alcançados com as ferramentas.

Se você aplicar uma estratégia que combine ferramentas de teste de acessibilidade com testes manuais, poderá conhecer o nível de acessibilidade oferecido pelo sistema e detectar oportunidades de melhoria para maior amadurecimento.