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 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