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. Acessibilidade
    constante no frontend
    Livia Gabos

    View full-size slide

  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

    View full-size slide

  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)

    View full-size slide

  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!

    View full-size slide

  5. O que não é acessibilidade?

    View full-size slide

  6. O que não é acessibilidade?

    View full-size slide

  7. O que não é acessibilidade?

    View full-size slide

  8. Porque estudar/aprender/se preocupar ?
    ● Acessibilidade não adiciona custo
    ● Melhoria na qualidade do que é desenvolvido
    ○ Requisitos melhores descritos
    ○ Desenvolvimento semântico

    View full-size slide

  9. Porque estudar/aprender/se preocupar ?
    ● Evita processos!
    ○ Vocês sabiam que existe uma lei?
    ○ Lei Brasileira de Inclusão

    View full-size slide

  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.

    View full-size slide

  11. Pessoas e necessidades

    View full-size slide

  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.

    View full-size slide

  13. Acessibilidade – CENSO 2010

    View full-size slide

  14. Para quem é a acessibilidade?
    Janaína Barcelos, vice
    Miss Brasil 2013 –
    Retinose Pigmentar

    View full-size slide

  15. Como a acessibilidade me afeta?

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  18. Baixa visão
    Degeneração macular Glaucoma Retinopatia diabética
    Catarata

    View full-size slide

  19. 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

    View full-size slide

  20. 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)

    View full-size slide

  21. 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

    View full-size slide

  22. 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.

    View full-size slide

  23. Pessoas surdas
    Ou seja, nem todo surdo utiliza Libras, nem todo surdo é oralizado.

    View full-size slide

  24. 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

    View full-size slide

  25. 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.

    View full-size slide

  26. 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

    View full-size slide

  27. 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.

    View full-size slide

  28. 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.

    View full-size slide

  29. 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.

    View full-size slide

  30. Discalculia
    ● 1 + 2 = 3
    ● 1 2 3

    View full-size slide

  31. 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

    View full-size slide

  32. Acessibilidade
    ● Não é apenas para pessoas com deficiência

    View full-size slide

  33. Tempo médio de troca de iPhone
    ● 2016 – 2 anos
    ● 2018 – 3 anos
    ● Em breve – 4,5 anos

    View full-size slide

  34. 4,5 anos com um iPhone
    ● E a capacidade do celular?
    ● E o sistema operacional?
    ● E os apps?
    iPhone 6 Plus

    View full-size slide

  35. Mapa da internet móvel no Brasil
    https://as-pool.simet.nic.br/simet-maps/#

    View full-size slide

  36. Tecnologia assistiva

    View full-size slide

  37. Leitores de telas

    View full-size slide

  38. 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%

    View full-size slide

  39. Como funciona o leitor de tela?
    https://alistapart.com/article/semantics-to-screen-readers/

    View full-size slide

  40. Como funciona o leitor de tela?
    https://alistapart.com/article/semantics-to-screen-readers/

    View full-size slide

  41. Outras tecnologias
    ● Bastões
    ● Mouses com trackpad
    ● Teclado especiais
    ● Sensor de movimentos
    ● Track com movimento de boca

    View full-size slide

  42. Acessibilidade no HTML

    View full-size slide

  43. Acessibilidade no HTML5
    https://www.html5accessibility.com/

    View full-size slide

  44. Como testar acessibilidade?
    - Leitor de tela
    - Simulação de leitor de tela
    - Validadores de código
    - Digital a11y
    - 25 ferramentas

    View full-size slide

  45. Aplicação de acessibilidade
    ● Atalhos automáticos
    ● Fontes maiores
    ● Melhor contraste
    ● Alto contraste/ Dark theme
    ● Tag alt nas imagens
    ● Template responsivo

    View full-size slide

  46. 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%

    View full-size slide

  47. 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

    View full-size slide

  48. 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

    View full-size slide

  49. Referências
    ● Semantics to Screen Readers – A list apart
    ● GitHub da Livia
    ● WCAG 2.1
    ● Using Aria
    ● Estudo inclusivo

    View full-size slide

  50. Grata!
    www.liviagabos.com
    @liviagabos
    Livia Gabos

    View full-size slide