Conhecer as noções básicas de testes de acessibilidade

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

Reconhecer a importância de testar a acessibilidade.
Resumir as vantagens e desvantagens de automatizar testes de acessibilidade.
Identificar as ferramentas que você pode usar para automatizar os testes de acessibilidade.
Descrever estratégias para escrever seus próprios testes de acessibilidade automatizados.

Por que testamos a acessibilidade?

Os testes de acessibilidade ajudam a garantir que os produtos digitais, como sites da Web e aplicativos, podem ser usados por todos, incluindo pessoas com deficiências. Isso significa encontrar e remover barreiras de acessibilidade antes mesmo dos usuários encontrarem essas barreiras. O ideal seria que nunca existissem erros de acessibilidade, mas a realidade é que os erros ocorrem durante o desenvolvimento. Sempre que você estiver desenvolvendo algo, seu objetivo é garantir que nenhum destes erros chegue aos usuários.

Idealmente, os testes de acessibilidade são realizados ao longo de todo o ciclo de vida do desenvolvimento, começando na fase de design, continuando ao longo do desenvolvimento e mesmo após a implementação. Com esta abordagem dinâmica, você garante que está considerando e integrando a acessibilidade em cada etapa.

Ao realizar testes de acessibilidade, você ajuda a:

Criar uma experiência digital inclusiva que proporcione igualdade de acesso.
Cumprir os requisitos regulamentares e legais.
Alcançar um número maior de usuários.
Melhorar a experiência global do usuário.

Neste módulo, abordamos os testes automatizados e manuais, ambos de importância vital para fornecer testes de acessibilidade abrangentes. Vamos começar observando os testes de acessibilidade automatizados.

As vantagens e desvantagens de automatizar testes de acessibilidade

Como você já deve saber, os testes de acessibilidade automatizados permitem avaliar rapidamente se seu produto digital está de acordo com os padrões de acessibilidade. Por exemplo, o software de teste automatizado pode analisar um site e identificar uma série de barreiras de acessibilidade, que vão da falta de texto alternativo ao contraste insuficiente de cores e à falta de cabeçalhos. A automatização do processo de testes aumenta a eficiência, melhora a consistência e permite uma maior escalabilidade.

Um desenvolvedor realizando testes de acessibilidade automatizados.

Embora os testes automatizados tenham muitas vantagens, é importante lembrar que podem não detectar problemas de acessibilidade significativos, bem como barreiras de acessibilidade mais sutis que exigem compreensão e contexto humanos. Por exemplo, um teste automatizado não irá necessariamente identificar imagens de texto que são usadas como cabeçalhos. Além disso, o teste não pode avaliar o impacto real das barreiras de acessibilidade nos usuários. Para uma avaliação mais abrangente da acessibilidade, sempre realize testes de acessibilidade manuais juntamente com testes automatizados.

Ao automatizar seus próprios testes de acessibilidade, use uma combinação de utilitários de teste predefinidos e casos de teste do cliente para detectar regressões de acessibilidade nas interfaces de usuário. As estruturas de teste móvel para iOS e Android incluem verificações básicas de acessibilidade. Se você desenvolver recursos usando código nativo, adicione testes para realizar verificações básicas compatíveis com as estruturas de teste. Para obter mais informações sobre testes móveis, confira a seção de recursos ao final desta unidade.

Usar ferramentas de teste de acessibilidade

Há uma série de ferramentas automatizadas e semi-automatizadas que você pode usar para realizar testes de acessibilidade. A maior parte delas compara o conteúdo com as Web Content Accessibility Guidelines (WCAG - Diretrizes de acessibilidade para conteúdo Web) e identifica barreiras de acessibilidade. Vamos analisar algumas ferramentas úteis.

Ferramenta	O que é	O que faz
Axe	Uma ferramenta de teste de código aberto para sites da Web e outras interfaces de usuário baseadas em HTML que fornece testes de acessibilidade abrangentes	Permite detectar erros de acessibilidade durante a codificação e integra-se ao seu ambiente de testes existente para que você possa automatizar testes de acessibilidade
WAVE	Um conjunto gratuito de ferramentas de avaliação que ajuda você a identificar barreiras comuns de acessibilidade, como baixo contraste e texto alternativo ausente, que afetam os usuários com deficiências	Usa ícones e indicadores para destacar muitos problemas de acessibilidade e facilita a avaliação humana do conteúdo Web
Google Lighthouse	Uma ferramenta automatizada de código aberto que realiza auditorias para detectar problemas de acessibilidade, incluindo violações das WCAG	Realiza auditorias de acessibilidade e atribui uma pontuação de 100, que reflete o nível de acessibilidade de uma página
Linters	Ferramentas automatizadas, como GitHub: infofarmer / eslint-plugin-jsx-a11y e GitHub: reactjs / react-a11y, que podem ser integradas no ciclo de vida do desenvolvimento desde o início para evitar problemas de acessibilidade e violações	Analisa o código fonte, como HTML, CSS e JavaScript, para detectar barreiras de acessibilidade, como problemas de navegação no teclado e uso inapropriado de cabeçalhos e pontos de referência
sa11y	Um conjunto de bibliotecas JavaScript de código aberto criadas pela Salesforce que ajudam você a escrever testes de acessibilidade automatizados	Permite detectar problemas de acessibilidade estática de DOM reconhecíveis por máquina

Observe que os testes realizados com essas ferramentas não são abrangentes. Mesmo que seu código passe em todos os testes, não será garantia que seu produto seja totalmente acessível. No entanto, estes testes revelam os principais problemas de acessibilidade e implementá-los ajuda você a garantir que uma regressão não tornará seu código inacessível. É recomendável que você sempre realize testes manuais, além dos testes automatizados, para garantir uma avaliação abrangente da acessibilidade. Saiba mais sobre testes manuais mais adiante.

Escreva seus próprios testes de acessibilidade

Se você trabalhou muito para tornar um componente acessível, convém garantir que ele permaneça acessível. Você pode escrever testes automatizados para uma variedade de questões de acessibilidade, incluindo a funcionalidade esperada do teclado e valores ARIA corretos para elementos HTML.

Exemplo: Como testar um Lightning Button

Este é um pseudocódigo para um teste de Jest do Componente Web do Lightning (LWC) que cria um Lightning Button e valida se a estrutura do componente é acessível.

registerSa11yMatcher();
const element = createButton({
    label: 'Submit',
    variant: 'brand-outline',
    title: 'This is a submit button',
});
const button = shadowQuerySelector(element, 'button');


return Promise.resolve().then(async () => {
    await expect(button).toBeAccessible();
});

Neste código de exemplo, primeiro você registra o sa11y para poder verificar a acessibilidade dos componentes. Em seguida, você cria o botão com um rótulo, uma variante específica e um título. Em seguida, você localiza este botão e atribui-o a uma variável. Por fim, para introduzir as verificações de acessibilidade, use uma chamada de função assíncrona para verificar a acessibilidade do botão.

Ao verificar se algo é acessível no Jest, pegue a estrutura HTML do elemento verificado e valide-a de acordo com os padrões das WCAG. Isso inclui garantir que todos os atributos aria estejam corretos para o elemento que está sendo renderizado.

Estes são alguns princípios básicos de teste de acessibilidade. Pronto para colocar estes princípios em prática? Continue a ler para saber como realizar testes de teclado e de leitor de tela.

Tempo estimado

Tópicos

Procurando ajuda?

Salesforce Platform Recursos