Pro Yearly is on sale from $80 to $50! »

Acessibilidade constante no frontend

F97943a70302823ff0e66434dc70b389?s=47 Livia Gabos
September 08, 2020

Acessibilidade constante no frontend

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

F97943a70302823ff0e66434dc70b389?s=128

Livia Gabos

September 08, 2020
Tweet

Transcript

  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
  17. None
  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