QA de acessibilidade digital: encontrando e registrando barreiras de inclusão

Planejando testes de acessibilidade - Apresentação

Luiz: Boas-vindas ao curso de QA de Acessibilidade Digital da Alura! Eu sou o Luiz, um dos instrutores deste curso, e irei te acompanhar ao longo dessa jornada.

Audiodescrição: Luiz se descreve como um homem branco, de cabelo escuro curto e liso, barba curta e escura, e olhos castanho-escuros. Ele usa óculos de armação retangular preta, e está no estúdio da Alura, sentado à esquerda de uma mesa redonda preta, com uma parede clara iluminada em gradiente azul e verde ao fundo, um notebook cinza e uma xícara preta à sua frente, e uma mesa cinza ao fundo, com plantas, enfeites, e o logo da Alura iluminado em azul.

Tenho 8 anos de experiência com acessibilidade e, na montagem do curso, tivemos o cuidado de selecionar os tópicos mais relevantes para transmitir nossa experiência de forma objetiva.

Gabriel: Olá! Eu sou o Gabriel e também serei seu instrutor neste curso.

Audiodescrição: Gabriel se descreve como um homem branco, com olhos e cabelos castanhos. Ele veste uma camisa azul-escura, e está sentado à direita da mesa preta no mesmo cenário.

Trabalho há cerca de 8 anos com o tema, assim como o Luiz, trazendo acessibilidade para produtos e serviços de diversos tipos. Sou apaixonado por acessibilidade, porque, afinal, trabalho para o meu próprio benefício. Recebo para melhorar um produto para mim, pois sou cego e utilizo leitor de tela.

Observação: durante este curso, muitas vezes, eu e o Luiz apareceremos juntos nos vídeos, mas em alguns momentos específicos, apareceremos individualmente.

Para quem é este curso?

Este curso é destinado a pessoas que desejam aplicar a acessibilidade digital no dia a dia, com ênfase na realização de testes práticos.

O que vamos aprender?

Luiz: Neste curso, aprenderemos a realizar testes de acessibilidade de forma objetiva, capazes de detectar barreiras importantes para a inclusão no meio digital. Para isso, abordaremos:

• O papel do QA de acessibilidade;
• Sua importância para a inclusão das pessoas;
• Testes práticos em páginas e cenários reais;
• Documentação de defeitos reais;
• E como diferentes pessoas, com ou sem deficiência, podem atuar no tema.

Conclusão

Aproveite os recursos da plataforma. Além dos vídeos, teremos atividades ao longo das aulas, apoio no fórum, e também na comunidade do Discord. Te convidamos a estudar conosco! Vamos lá?

Planejando testes de acessibilidade - Entendendo o papel do QA de acessibilidade

Luiz: O que é um QA de acessibilidade?

O papel do QA de acessibilidade

Qual o objetivo do QA de acessibilidade?

Trata-se de um profissional cujo objetivo principal é avaliar a acessibilidade e a experiência da pessoa usuária na totalidade, com foco especial em pessoas com deficiência.

Para atingir esse objetivo, que é de extrema importância, esse profissional precisa estar muito próximo de áreas como negócios, UX Design e desenvolvimento, pois acessibilidade é um tema interdisciplinar. Cada etapa do desenvolvimento de um produto ou projeto digital deve considerar a acessibilidade para profissionais de todas as áreas mencionadas.

Enfrentando barreiras de acessibilidade

Gabriel: Por isso, é fundamental que profissionais de acessibilidade sejam parceiros e trabalhem em todas as etapas junto às áreas de negócios, UX Design e desenvolvimento.

Caso alguma dessas etapas seja ignorada, começamos a enfrentar barreiras de acessibilidade que, muitas vezes, precisam ser revisadas desde a concepção. Em outras palavras, se um projeto não contempla a acessibilidade, ele precisará ser reformulado. Isso pode não depender apenas da parte tecnológica, mas também do próprio negócio, que deve discutir um novo produto ou serviço.

Segundo o IBGE, 18,6 milhões de pessoas no Brasil possuem algum tipo de deficiência. Esse número é impressionante, pois representa mais do que a população de muitos estados brasileiros ou até mesmo de países inteiros na Europa.

Quando trabalhamos com acessibilidade, contribuímos para que esse público consiga interagir com nossos produtos e adquirir nossos serviços, promovendo a inclusão efetivamente.

Ao pensarmos em acessibilidade digital, é comum associar a pessoas cegas que utilizam leitores de tela. Por exemplo: como pessoa cega, utilizo leitor de tela, mas não podemos nos limitar apenas a isso. Garantir a acessibilidade é muito mais abrangente, considerando diversos tipos de deficiência.

Como pessoa cega, enfrento muitos problemas de navegação em produtos e serviços quando a acessibilidade não é contemplada. Isso gera barreiras para executar funções simples do dia a dia, como fazer compras, por exemplo. Barreiras de acesso são comuns, especialmente na navegação, quando não há testes de acessibilidade.

Acessibilidade para todas as pessoas

Luiz: A acessibilidade é para todas as pessoas.

Mesmo sem deficiência, utilizo recursos de acessibilidade ocasionalmente. Por exemplo: quando uso o navegador no computador e aplico um zoom de 110% a 125%, a leitura fica mais confortável, permitindo mais distância da tela. Também recorro a legendas em vídeos nas plataformas quando estou no transporte público sem fones de ouvido.

Conclusão

Tudo isso que discutimos, envolvendo características dos sentidos e capacidades físicas e motoras das pessoas, é abordado no WCAG, que são as diretrizes globais que aplicaremos no curso.

Embora o curso seja mais prático e não foque tanto na teoria, é importante saber que tudo isso possui um embasamento teórico sólido e amplamente difundido no mundo inteiro.

Nos encontramos no próximo vídeo!

Planejando testes de acessibilidade - Instalando e configurando ferramentas

Gabriel: Chegou a hora de prepararmos as ferramentas para os testes de acessibilidade.

Instalando e configurando as ferramentas

Usaremos três softwares de tecnologias assistivas. São eles:

• O leitor de tela NVDA;
• E as ferramentas de suporte que analisam o código do site:
  • O axe DevTools;
  • E o Siteimprove.

Instalando e configurando o NVDA

Começaremos com a instalação do NVDA.

Luiz: Disponibilizaremos o link para download a partir do site do fornecedor — o NV Access. Nessa página, basta buscar pelo botão "Download" utilizando a navegação por teclado ou o mouse. Ao clicar nesse botão, o instalador será baixado.

Ao abrir o instalador, um aviso sonoro será emitido, que faz parte do NVDA, e precisaremos aguardar o carregamento. Esse aviso indica que o NVDA já começou a ler a própria licença de uso.

Podemos interromper a leitura pressionando a tecla "Ctrl", pois o foco não é a leitura da licença de software, mas sim navegar pelas opções de instalação utilizando o teclado, através da tecla "Tab". Caso prefira, também é possível usar o mouse para navegar.

Navegaremos até a opção "Concordo" para aceitar os termos. O NVDA fará a verbalização nesse controle, e marcaremos a caixa de seleção com a tecla "Espaço". Em seguida, temos três opções:

1. Instalar o NVDA neste computador
2. Criar cópia portátil
3. Continuar usando

Para instalar no sistema operacional, navegamos até a opção "Instalar o NVDA neste computador" e ativamos com a tecla "Enter". Ao fazer isso, as seguintes opções serão apresentadas:

1. Usar o NVDA nas credenciais do Windows
2. Criar ícone na área de trabalho e tecla de atalho ("Ctrl + Alt + N")

Podemos desmarcar a opção "Usar o NVDA nas credenciais do Windows", para que ele não seja iniciado na tela de login das pessoas usuárias, e manter ativada a opção "Criar ícone na área de trabalho e tecla de atalho ("Ctrl + Alt + N")". Feito isso, continuaremos com a instalação.

O NVDA emitirá um aviso indicando que a instalação foi concluída com sucesso. Após isso, podemos acionar o botão "Ok". Nesse momento, o som de encerramento e início do NVDA será emitido.

Um diálogo será carregado automaticamente na primeira vez que o NVDA for usado. Abaixo, na janela de boas-vindas do NVDA, algumas opções importantes estarão disponíveis:

1. Usar CapsLock como uma tecla modificadora do NVDA
2. Iniciar o NVDA após eu ingressar
3. Mostrar este diálogo ao iniciar o NVDA

Como estamos usando um notebook, vamos alterar o esquema de teclado que, por padrão, veio como "computador de mesa", para "computador portátil". Na sequência, vamos ativar a opção "Usar CapsLock como uma tecla modificadora do NVDA", e desabilitar as opções "Iniciar o NVDA após eu ingressar" e "Mostrar este diálogo ao iniciar o NVDA". Por fim, concluímos com o botão "Ok".

Um novo diálogo perguntará se desejamos aderir a uma coleta de dados opcional. Nesse caso, selecionaremos a opção "Não". Com isso, o NVDA está configurado corretamente para uso.

Instalando e configurando o axe DevTools

Agora vamos para a instalação do axe DevTools, que é uma extensão do Chrome.

Importante! Esse passo deve ser realizado antes de iniciarmos o NVDA.

Para instalar, basta acessar o link da extensão axe DevTools no navegador Chrome e navegar até o botão "Usar no Chrome", utilizando o teclado ou o mouse.

Uma tela de confirmação aparecerá na parte superior, onde clicaremos no botão "Adicionar extensão". Após alguns instantes, receberemos a confirmação de que a ferramenta está instalada.

Instalando e configurando o Siteimprove

Para finalizar, faremos a instalação do Siteimprove, outra extensão para Chrome.

Após acessar o link da extensão Siteimprove Accessibility Checker no Chrome, acionaremos o botão "Usar no Chrome" novamente, confirmando a ação pelo botão "Adicionar extensão".

Ao final, o próprio navegador confirmará a instalação.

Para concluir a instalação do Siteimprove, é necessário um passo adicional. No canto superior direito do navegador, acessaremos as configurações do Chrome clicando em "Personalizar e controlar o Google Chrome > Extensões > Gerenciar extensões". Na extensão do Siteimprove, clicaremos no botão "Saiba mais" e ativaremos a opção "Fixar na barra de ferramentas".

Conclusão

Com isso, concluímos a instalação e configuração dos aplicativos que usaremos para os testes!

Sobre o curso QA de acessibilidade digital: encontrando e registrando barreiras de inclusão

O curso QA de acessibilidade digital: encontrando e registrando barreiras de inclusão possui 99 minutos de vídeos, em um total de 48 atividades. Gostou? Conheça nossos outros cursos de Testes e Quality Assurance em Programação, ou leia nossos artigos de Programação.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Planejando testes de acessibilidade
• Executando testes visuais e de código
• Usando o NVDA em execução de testes
• Realizando mais testes com o NVDA
• Reflexões finais sobre acessibilidade digital