Acessibilidade constante no frontend

Apresentação feita para o curso de Frontend do Womarkescode, introduzindo o módulo sobre interface.

1. Acessibilidade constante no frontend Livia Gabos
2. Olá! • + 10 anos na área de UX com foco principal em Acessibilidade • Mestrado em Visualização de Informação • Já dei aulas de programação para pessoas com deficiência visual • Instrutora e coordeno cursos de UX na Alura
3. O que é acessibilidade? Acessibilidade na Web é a possibilidade e a condição de alcance, percepção, entendimento e interação para a utilização, a participação e a contribuição, em igualdade de oportunidades, com segurança e autonomia, em sítios e serviços disponíveis na Web, por qualquer indivíduo, independentemente de sua capacidade motora, visual, auditiva, intelectual, cultural ou social, a qualquer momento, em qualquer local e em qualquer ambiente físico ou computacional e a partir de qualquer dispositivo de acesso. (W3C BRASIL)
4. Acessibilidade é independente de... • Do lugar que você está • Do modo de acesso • Das condições/capacidades físicas • Das condições/capacidades financeiras • Das capacidades intelectuais • Você consegue fazer o que quiser, quando e como quiser!
5. O que não é acessibilidade?
6. O que não é acessibilidade?
7. O que não é acessibilidade?
8. Porque estudar/aprender/se preocupar ? • Acessibilidade não adiciona custo • Melhoria na qualidade do que é desenvolvido ◦ Requisitos melhores descritos ◦ Desenvolvimento semântico
9. Porque estudar/aprender/se preocupar ? • Evita processos! ◦ Vocês sabiam que existe uma lei? ◦ Lei Brasileira de Inclusão
10. O que precisamos saber? • Para quem é acessibilidade • As necessidades das pessoas • Sem conhecer as necessidades, não podemos trazer as soluções necessárias.
11. Pessoas e necessidades
12. Acessibilidade – CENSO 2010 • 45.606.048 de brasileiros - 23,9% da população total, têm algum tipo de deficiência ◦ visual, auditiva, motora e mental ou intelectual.
13. Acessibilidade – CENSO 2010
14. Para quem é a acessibilidade? Janaína Barcelos, vice Miss Brasil 2013 – Retinose Pigmentar
15. Como a acessibilidade me afeta?
16. Daltonismo • É uma perturbação da percepção visual caracterizada pela incapacidade de diferenciar as cores • Existem 3 tipos principais: ◦ Monocromacia ◦ Dicromacia ◦ Tricomacia anômala
18. Necessidades • Bom contraste entre as cores • Não fazer referência as ações e cores (Clique no botão verde) • Ter certeza que é possível identificar as links sem as cores • Utilizar texturas e descrições
19. Baixa visão Degeneração macular Glaucoma Retinopatia diabética Catarata
20. Necessidades • Dispor opções de alto contraste • Permitir utilizar com leitores de tela e lupa de ampliação • Testar a ampliação da página de até 200% • Usar uma navegação consistente em todo produto
21. Pessoas cegas • Pessoas com deficiência visual total • Não enxergam vultos, ou seja, não tem percepção de luz • Mitos: ◦ Não é porque eles não tem um estimulo de um dos sentidos que eles são super-homem ◦ Eles nem sempre conseguem entender um conceito relacionado a parte visual para nós (videntes)
22. Necessidades • Toda a navegação deve ser possível de ser realizada pelo teclado • Devem existir atalhos para as áreas principais, como menu, conteúdo e rodapé. • Existir descrição de imagens • Criar uma estrutura semanticamente correta • Testar a interface usando diferentes leitores de tela em diferentes navegadores
23. Pessoas surdas • Dentre as pessoas com surdez, existem: ◦ As que utilizam Libras para se comunicar e não são fluentes na Língua Portuguesa; ◦ As que utilizam Libras para se comunicar e são fluentes na Língua Portuguesa; ◦ As que utilizam tanto Libras quanto a Língua Portuguesa (leitura labial ou dispositivos que ampliam o som) para se comunicar; ◦ As que não conhecem Libras e realizam leitura labial e/ou leitura e escrita.
24. Pessoas surdas Ou seja, nem todo surdo utiliza Libras, nem todo surdo é oralizado.
25. Necessidades • Utilizar vídeo com legendas ou em Libras • Permitir que todo áudio tenha uma transcrição em texto • Utilizar uma linguagem clara e simples • Existir glossário para palavras técnicas
26. Deficiência motora • Existem deficiência motora parcial e total, permanente e temporária. • Quando uma pessoa quebra o braço ela possui uma deficiência motora parcial e temporária. • Uma pessoa tetraplégica ela possui uma deficiência motora total e permanente.
27. Deficiência motora • Podem existir lesão da medula especial, perda ou dano de membro. • Doenças congênitas e condições analógicas: ◦ Paralisia cerebral ◦ Esclerose amiotrófica lateral ◦ Artrite ◦ Parkinson’s
28. Necessidades • Não pode fazer uso do mouse • Utilizam sensores de rosto que identificam movimentos ou softwares de reconhecimento de voz • As áreas de interação devem ser grandes • Atalhos são muito importante • Não devem ser utilizados recursos que utilizam as duas mãos, destreza ou rapidez como duplo clique.
29. Cognitivas • Podem ser divididas pela incapacidade funcional ou por incapacidade clínica. • Autismo, Síndrome de Down, traumatismos crânio-encefálicos (TCE), até a demência.
30. Cognitivas • Condições menos severas incluem déficit de atenção e desordem (ADD), dislexia (dificuldade em leitura), discalculia (dificuldade com a matemática), e dificuldades de aprendizagem em geral.
31. Discalculia • 1 + 2 = 3 • 1 2 3
32. Necessidades • Linguagem simples e clara • Não utilizar texto todo em maiúsculo, nem justificado e nem serifado • Estrutura de texto visualmente bem definida • Utilizar listas com marcações
33. Acessibilidade • Não é apenas para pessoas com deficiência
34. Tempo médio de troca de iPhone • 2016 – 2 anos • 2018 – 3 anos • Em breve – 4,5 anos
35. 4,5 anos com um iPhone • E a capacidade do celular? • E o sistema operacional? • E os apps? iPhone 6 Plus
36. Mapa da internet móvel no Brasil https://as-pool.simet.nic.br/simet-maps/#
37. Tecnologia assistiva
38. Leitores de telas
39. Navegadores e Leitores de tela https://estudoinclusivo.com.br/pesquisa-ldt/resultados2 Respostas Participantes Porcentagem NVDA 327 76,6% JAWS 46 10,8% Dosvox com Monitvox 13 3,0% VoiceOver 12 2,8% Não utilizo nenhum 19 4,4% Respostas Participantes Porcentagem Chrome 233 54,6% Firefox 126 29,5% Internet Explorer 42 9,8% Safari 8 1,9%
40. Como funciona o leitor de tela? https://alistapart.com/article/semantics-to-screen-readers/
41. Como funciona o leitor de tela? https://alistapart.com/article/semantics-to-screen-readers/
42. Outras tecnologias • Bastões • Mouses com trackpad • Teclado especiais • Sensor de movimentos • Track com movimento de boca
43. Acessibilidade no HTML
44. Acessibilidade no HTML5 https://www.html5accessibility.com/
45. Como testar acessibilidade? - Leitor de tela - Simulação de leitor de tela - Validadores de código - Digital a11y - 25 ferramentas
46. Aplicação de acessibilidade • Atalhos automáticos • Fontes maiores • Melhor contraste • Alto contraste/ Dark theme • Tag alt nas imagens • Template responsivo
47. Erros mais comuns • Não habilitar tag alt • Usar tag a no lugar do button • Não habilitar o outline • Cuidado com o contraste • Não usar underline em links • Não permitir acesso de menu dropdown com teclado • Não usar ordem correta dos títulos (tag H) • Não usar atalhos para conteúdo • Usar erroneamente display: none • Usar fontes pequenas • Não prever zoom de pelo menos 200%
48. Vocês precisam conhecer... • Quais são as barreiras para elimina-las • Boas práticas de desenvolvimento e design • Diretrizes de acessibilidade • Ferramentas e tecnologias assistivas
49. Referências • PDF - Censo 2010 de pessoas com deficiência • Artigo – Diferença entre personas do marketing, design e proto- personas • Artigo – Tipos de daltonismo • Artigo em inglês – Daltonismo • Artigo em inglês - Acessibilidade web da Inglaterra • Artigos – Brasil Media – Acessibilidade web • Curso e-MAG para conteúdistas
50. Referências • Semantics to Screen Readers – A list apart • GitHub da Livia • WCAG 2.1 • Using Aria • Estudo inclusivo
51. Grata! www.liviagabos.com @liviagabos Livia Gabos