[MTC 2021] Automatizando testes de acessibilidade - Isabel Francine Mendes

3. Quem sou eu? Mestranda
na USP QA
engineer
Crossfiteira jr
Nadadora pleno
Mãe da Doralice,
Hanna e Clotilde
Fã do Smaug

4. O que é acessibilidade
digital e seu público?
Passo 1
Barreiras mais comuns
Passo 3
Testes semi-automatizados
Passo 5
Leis, normas e padrões
Passo 2
Modos de testar A11Y
Passo 4
Testes automatizados
Passo 6
Agenda

5. O que é
Acessibilidade
digital?
Acesso ao mundo digital
Bancos, e-commerce, cidadania
Entretenimentos
Educação, capacitação
Emprego...

6. 45 milhões de PcD
28 milhões de Idosos
11 milhões Analfabetos
Desconhecem outros idiomas (mesmo
o português)
Cenários diversos
Deficiências temporárias
PÚBLICO
Decreto Federal 5.296/2004
Artigo 5
IBGE 2010

7. Leis,
Normas e
Padrões
Lei de Inclusão Digital
Obrigatória a acessibilidade nos sites mantidos
por empresas com sede ou representação
comercial no País ou por órgãos de governo.
WCAG (Web Content Accessibility
Guidelines)
eMAG - Modelo de acessibilidade em governo
eletrônico
Lei Federal n° 13.146/2015
Artigo 63

8. VÍDEOS FORMULÁRIOS TEXTOS
Bugs mais comuns
Sem legenda
Sem LIBRAS
Sem audiodescrição
Sem audio
Confusos e ambíguos
Alinhamento errado
Longos e cansativos
Sem descrição dos
campos
Sem sinalização de
erros
Sem validação dos
campos
individualmente
COMPONENTES
DE TELA
Captcha
Pop-ups
Layout confuso
Imagens sem descrição
Botões e Links
Itens clicáveis
Contraste do texto e
imagem
Tamanho das áreas
clicáveis

9. Modos de testar a acessibilidade digital
Manual sem QA
PcD
Manual apenas
Com QA PcD
QA + QA Pcd
Pair Testing
Axe + CLI
Cypress + Axe
Automatizados
Wave
Axe
Lighthouse
Semi
automatizados
Leitor de telas
Usabilidade
Leitor de telas
Não uso do mouse
Aumento de zoom
Uso de ferramentas
de contraste

10. AXE-Core
COMMAND LINE

11. Testes Semi-automatizados

12. Testes automatizados - Axe-CLI
npm install -g axe-cli
axe https://www.ifnmg.edu.br/cursos
axe https://www.ifnmg.edu.br/cursos --browser chrome
axe https://www.ifnmg.edu.br/cursos --disable color-contrast
axe https://www.ifnmg.edu.br/cursos --save ifnmgTestResults.json
Pré-requisitos: Node + NPM

13. Testes automatizados - Axe-CLI

14. Testes automatizados - Axe-CLI

15. Testes automatizados

16. Testes automatizados - Cypress + Axe
npm int -y
npm install cypress@6.0.0 --save-dev
npm install --save-dev cypress-axe
Pré-requisitos: Node + NPM + Visual Studio Code

17. Testes automatizados - Cypress + Axe

18. Testes automatizados - Cypress + Axe
npx cypress open

20. Testes automatizados - Cypress + Axe

26. Referências
https://testautomationu.applitools.com/accessibility-testing-tutorial/
https://github.com/dequelabs/axe-core/blob/develop/doc/projects.md
https://brunopulis.com/
http://liviagabos.com/
https://www.linkedin.com/in/mauricio-pereiro/

27. Obrigada
LINKEDIN
IsabelMendes
GITHUB
IsabelMendes