O documento discute a importância e os desafios de incorporar acessibilidade em projetos de desenvolvimento web. Ele descreve como a equipe da Elo7 aprendeu que acessibilidade requer muito mais do que parece à primeira vista e que é necessário testar além do leitor de tela. Também discute marcação semântica para menus acessíveis.

1. Incorporando acessibilidade
no seu projeto
Do zero à prática

2. Luiz Corte Real (Sr.
Saúde)
Eng. Software @ Elo7
Twitter: @srsaude
github.com/luiz

3. Experiências,
não verdades absolutas

4. O início

5. Desenvolvedores independentes na iniciativa

6. Desenvolvedores independentes na iniciativa (tech.elo7.com.br)

7. “Vamos tornar
acessibilidade um dos
critérios de pronto das
nossas tarefas!”
-- nós, numa retrospectiva

8. E então…
Tarefas sem fim
Sprints atrasando
Cansaço da equipe
Porque...
Como testar?
Está acessível?
Como resolver?

9. Acessibilidade é muito mais
difícil do que parece
Aprendizado #0

10. Acessibilidade se aprende
na prática
Aprendizado #0.1

11. Grupo de estudos ao resgate!

12. Testes de usabilidade

13. Personas
não é ideal, mas ajuda

14. Acessibilidade
além da deficiência visual
Daltonismo
Surdez
Epilepsia
Dislexia
Deficiência motora
Autismo
…

15. Acessibilidade não é apenas
para quem tem deficiência
visual
Aprendizado #1

16. Testar acessibilidade vai
muito além do leitor de tela
Aprendizado #1.1

17. “Inspeção e testes de
desenvolvedores nunca serão tão
efetivos como o confronto direto do
usuário com o site”
Accessibility Testing - W3C Wiki
Aprendizado #2

18. WCAG 2.0

19. WCAG 2.0
https://www.w3.org/WAI/WCAG20/quickref/

20. Adesão ao WCAG 2.0
https://www.w3.org/WAI/ER/tools/

21. Adesão ao WCAG 2.0
https://achecker.ca/

22. Testes automatizados
ajudam, mas não garantem
acessibilidade
Aprendizado #3

23. Para lidar com a diversidade,
princípios são mais
importantes do que técnicas
Aprendizado #4

24. Mão na massa!

25. Mão na massa!

26. Mão na massa!
menu do vendedor
Acessível por teclado e mouse
Fácil de ser encontrado
Fácil de ser pulado
Funciona sem JavaScript

27. Exemplos
Sites bem avaliados
E-commerces
Exemplos W3C
Slack (web)

28. Menu sem JavaScript
como fazer?
Páginas de navegação
Deixar tudo aberto
CSS
:target
:checked

29. Menu sem JavaScript
como fazer?
Páginas de navegação
Deixar tudo aberto
CSS
:target
:checked

30. Todos precisam saber usar
ferramentas assistivas
Aprendizado #5

31. Tudo influencia no
funcionamento de
um leitor de tela
Aprendizado #6

32. Alguns fatores
que influenciam os testes
Leitor de tela
Atalhos e configurações
Navegador
Sistema operacional

33. Vale todo o trabalho?

34. Métricas

35. 2,3%
da população com alguma deficiência visual nos EUA
Fonte: https://nfb.org/blindness-statistics

36. 2,7%
dos usuários do Firefox usam alguma ferramenta de acessibilidade
Fonte: https://telemetry.mozilla.org

37. 6,9%
dos usuários de leitores de tela não usam um leitor por causa de alguma
deficiência
Fonte: http://webaim.org

38. Art. 63. É obrigatória a acessibilidade nos sítios da
internet mantidos por empresas com sede ou
representação comercial no País ou por órgãos de
governo, para uso da pessoa com deficiência, garantindo-
lhe acesso às informações disponíveis, conforme as
melhores práticas e diretrizes de acessibilidade adotadas
internacionalmente.
Lei 13.146, de 06/07/2015

39. Apple - Accessibility - Sady
https://youtu.be/XB4cjbYywqg

40. De volta ao problema:
Semântica

41. Atributos WAI-ARIA
para a marcação de um menu
role
aria-label
aria-haspopup
aria-expanded

42. Atributos WAI-ARIA
para a marcação de um menu
fly-out
role
aria-label
aria-haspopup
aria-expanded

43. Marcação excessiva
prejudica acessibilidade
Aprendizado #9

44. Marcação excessiva
<nav>
<ul>
<li><a href='#'>Menu</a>
<ul>
<li><a href='#'>...</a></li>
<li><a href='#'>...</a></li>
</ul>
</li>
…

45. Marcação adotada
<nav>
<input type='checkbox' id='menu1' role='button' aria-
haspopup='true'>
<label for='menu1' aria-hidden='true'>Menu</label>
<nav>
<a href='#'>...</a>
<a href='#'>...</a>
</nav>
<a href='#'>Menu</a>
</nav>

46. Marcação adotada
<nav>
<input type='checkbox' id='menu1' role='button' aria-
haspopup='true'>
<label for='menu1' aria-hidden='true'>Menu</label>
<nav>
<a href='#'>...</a>
<a href='#'>...</a>
</nav>
<a href='#'>Menu</a>
</nav>

47. Marcação adotada
<nav>
<input type='checkbox' id='menu1' role='button' aria-
haspopup='true'>
<label for='menu1' aria-hidden='true'>Menu</label>
<nav>
<a href='#'>...</a>
<a href='#'>...</a>
</nav>
<a href='#'>Menu</a>
</nav>

48. Marcação adotada
<nav>
<input type='checkbox' id='menu1' role='button' aria-
haspopup='true'>
<label for='menu1' aria-hidden='true'>Menu</label>
<nav>
<a href='#'>...</a>
<a href='#'>...</a>
</nav>
<a href='#'>Menu</a>
</nav>

49. Marcação adotada
<nav>
<input type='checkbox' id='menu1' role='button' aria-
haspopup='true'>
<label for='menu1' aria-hidden='true'>Menu</label>
<nav>
<a href='#'>...</a>
<a href='#'>...</a>
</nav>
<a href='#'>Menu</a>
</nav>
input[type=checkbox] {
position: absolute;
opacity: 0;
}

50. Marcação adotada
<nav>
<input type='checkbox' id='menu1' role='button' aria-
haspopup='true'>
<label for='menu1' aria-hidden='true'>Menu</label>
<nav>
<a href='#'>...</a>
<a href='#'>...</a>
</nav>
<a href='#'>Menu</a>
</nav>

51. Marcação adotada
<nav>
<input type='checkbox' id='menu1' role='button' aria-
haspopup='true' aria-expanded='true/false'>
<label for='menu1' aria-hidden='true'>Menu</label>
<nav>
<a href='#'>...</a>
<a href='#'>...</a>
</nav>
<a href='#'>Menu</a>
</nav>
JavaScript

52. Requisitos
menu acessível
Acessível por teclado e mouse
Fácil de ser encontrado
Fácil de ser pulado
Funciona sem JavaScript

53. Obrigado!
vamos trocar ideias?
Luiz Corte Real (Sr.
Saúde)
E-mail:
luiz.real@elo7.com
Twitter: @srsaude