Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Acessibilidade constante no frontend

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.

Livia Gabos

September 08, 2020
Tweet

More Decks by Livia Gabos

Other Decks in Programming

Transcript

  1. 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
  2. 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)
  3. 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!
  4. Porque estudar/aprender/se preocupar ? • Acessibilidade não adiciona custo •

    Melhoria na qualidade do que é desenvolvido ◦ Requisitos melhores descritos ◦ Desenvolvimento semântico
  5. Porque estudar/aprender/se preocupar ? • Evita processos! ◦ Vocês sabiam

    que existe uma lei? ◦ Lei Brasileira de Inclusão
  6. O que precisamos saber? • Para quem é acessibilidade •

    As necessidades das pessoas • Sem conhecer as necessidades, não podemos trazer as soluções necessárias.
  7. 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.
  8. Daltonismo • É uma perturbação da percepção visual caracterizada pela

    incapacidade de diferenciar as cores • Existem 3 tipos principais: ◦ Monocromacia ◦ Dicromacia ◦ Tricomacia anômala
  9. 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
  10. 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
  11. 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)
  12. 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
  13. 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.
  14. 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
  15. 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.
  16. 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
  17. 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.
  18. 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.
  19. 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.
  20. 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
  21. Tempo médio de troca de iPhone • 2016 – 2

    anos • 2018 – 3 anos • Em breve – 4,5 anos
  22. 4,5 anos com um iPhone • E a capacidade do

    celular? • E o sistema operacional? • E os apps? iPhone 6 Plus
  23. 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%
  24. Outras tecnologias • Bastões • Mouses com trackpad • Teclado

    especiais • Sensor de movimentos • Track com movimento de boca
  25. Como testar acessibilidade? - Leitor de tela - Simulação de

    leitor de tela - Validadores de código - Digital a11y - 25 ferramentas
  26. Aplicação de acessibilidade • Atalhos automáticos • Fontes maiores •

    Melhor contraste • Alto contraste/ Dark theme • Tag alt nas imagens • Template responsivo
  27. 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%
  28. 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
  29. 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
  30. Referências • Semantics to Screen Readers – A list apart

    • GitHub da Livia • WCAG 2.1 • Using Aria • Estudo inclusivo