Acessibilidade - Construindo uma web para todos!

Acessibilidade não é só sobre leitores de tela, nessa palestra eu mostro o quão amplo é o range de incapacidades e como entregar websites acessíveis.

Transcript

1. ACESSIBILIDADE construindo uma web para todos @OLARCLARA || WTM CURITIBA #1 BDAY
2. • developer @ fleety; • mentora @ technovation challenge;
3. acessibilidade (sf) a-ces-si-bi-li-da-de 1. facilidade de acesso; qualidade do que é acessível; 2. facilidade de aproximação, de procedimento ou de obtenção; –dicionário michaelis
4. por que acessibilidade?
5. –world health organization, 2011 cerca de 15% da população mundial sofre de alguma forma de incapacidade.
6. 15% = +1 bilhão de pessoas aka 1 em %&')*
7. –Cindy Li “we’re all just temporarily abled.”
8. acessibilidade não é só sobre leitores de tela.
9. 4 categorias de incapacidades
10. 1: visual
13. 2. Motora ✋
15. 3. Auditiva
17. 4. Cognitiva
19. –Rob Dodson “boa acessibilidade significa boa UX.”
20. diretrizes de acessibilidade para conteúdo web (WCAG) 2.0
21. diretrizes WCAG 2.0 1.Perceptível; 2.Operável; 3.Compreensível; 4.Robusto; Fonte: http://bit.ly/2aq4kCa
22. let’s talk technical.
24. entendendo a importância da ordem do DOM.
25. HTML OUTPUT
26. HTML OUTPUT
27. HTML OUTPUT
28. HTML OUTPUT
29. HTML OUTPUT
30. HTML OUTPUT
31. HTML OUTPUT
32. o que deve ser focalizável?
33. foco implícito alguns elementos como input, button e select são focalizáveis por padrão.
34. não brigue com a plataforma use elementos nativos sempre que possível. ❌
35. tabindex
36. tabindex=“0” ordem natural da tab e pode ser programável via focus() <div id=“dropdown” tabindex=“0”> Settings </div>
37. tabindex=“-1” não está na ordem natural da tab mas pode ser programável via focus() <div tabindex=“-1”>Item 1</div> <div tabindex=“0”>Item 2</div> <div tabindex=“-1”>Item 3</div>
38. tabindex=“5” na ordem natural porém pula todo o conteúdo.
39. affordances
40. semântica implícita assim como o focus, elementos nativos possuem uma semântica rica por padrão.
41. aria-label sobrescreve qualquer tipo de mecanismo de label nativo. “menu principal, botão”
42. aria-labelledby referência a algum (ou vários) elementos que irão servir como uma label acessível. COMPRE AGORA Roupas Masculinas “roupas masculinas, compre agora, botão”
43. accessibility developer tools
45. bit.ly/a11y-devtools
46. review!
47. nail the checklist! tente considerar todos os usuários possíveis.
48. garanta foco! aproveite o máximo os elementos nativos e use tabindex para adicionar suporte a elementos customizados.
49. ofereça affordances! use elementos nativos com semânticas ricas e recorra a ARIA Authoring Practices para adicionar semânticas customizadas.
50. Obrigada! http://mariaclara.space ❤ (Um ‘muito obrigada’ ao @rob_dodson pela generosa ajuda na produção desse conteúdo.)