[Devfest Nordeste 2017] Acessibilidade web: como estamos pensando?

[Devfest Nordeste 2017] Acessibilidade web: como estamos pensando?

Palestra apresentada no Devfest Nordeste 2017, em Salvador.
Contato: thiagomartins.marques@gmail.com
Twitter: @althi
Instagram: @sothiagoalmeida

D458bb433a7fa31048cf8345447849df?s=128

Thiago Marques

October 21, 2017
Tweet

Transcript

  1. Acessibilidade web: como estamos pensando? Devfest Nordeste 2k17

  2. None
  3. Bacharel em Ciência da Computação @UFLA Business Systems Development @Arizona

    State University MBA em Design de Interação (atual) Organizador do GDG BH Front-end developer @Hotmart Thiago Marques @althi
  4. O que despertou o interesse para acessibilidade? Pra começar..

  5. Conhecendo algumas pessoas!

  6. Licença às pessoas

  7. Empatia é <3

  8. Rebeca Programadora 26 anos Síndrome de Irlen

  9. None
  10. Luciano Designer e Front-end Developer 23 anos Daltonismo

  11. x x

  12. x x x x

  13. Augusto Programador 34 anos Baixa visão

  14. None
  15. None
  16. Amaral Mestrando em Física 28 anos Cego

  17. +

  18. palestrar & aprender

  19. Testar e Medir Planejar e Implementar Conhecer

  20. Conhecer

  21. • alcance • percepção • entendimento • segurança • autonomia

    ACESSIBILIDADE? O QUE É
  22. ”Acessibilidade na web significa que pessoas com deficiência podem usar

    a web. ACESSIBILIDADE NA WEB? O QUE É
  23. ”Acessibilidade na web significa que pessoas com deficiência podem usar

    a web." "Acessibilidade na web significa que pessoas com deficiência podem perceber, entender, navegar, interagir e contribuir para a web." ACESSIBILIDADE NA WEB? O QUE É
  24. Acessibilidade na web é só para deficientes visuais

  25. Acessibilidade na web é só para deficientes visuais Mito!

  26. Diversidade de dispositivos Tamanho e altura Idade e experiência Deficiência

    auditiva NÃO É APENAS DEFICIÊNCIA VISUAL ACESSIBILIDADE Deficiência cognitiva Habilidades motoras Deficiência visual Impedimento motor temporário Daltonismo Membros ocupados Pouca fluência na linguagem
  27. Acessibilidade na web é só para pessoas com algum tipo

    de deficiência
  28. Acessibilidade na web é só para pessoas com algum tipo

    de deficiência Mito!
  29. None
  30. DEFICIÊNCIAS TEMPORÁRIAS E SITUACIONAIS

  31. *algumas pessoas possuem mais de um tipo de deficiência Fonte:

    Senso IBGE 2010 24% pessoas com deficiência* NO BRASIL Visual: 35 milhões Motora: 13 milhões Auditiva: 10 milhões Intelectual: 2,5 milhões 45.606.048 pessoas
  32. Barreiras

  33. • Imagens sem descrição; • Vídeos sem alternativa textual ou

    sonora; • Funções que não funcionam pelo teclado; • Links mal descritos. CEGUEIRA BARREIRAS ENFRENTADAS
  34. • Contraste inadequado de cores; • Fonte de letra com

    serifa ou decorada; • Conteúdos que perdem sua funcionalidade quando ampliados. BAIXA VISÃO BARREIRAS ENFRENTADAS
  35. • Cor utilizada como único recurso para enfatizar o texto;

    • Contraste inadequado entre cores de fonte e fundo. DALTONISMO BARREIRAS ENFRENTADAS
  36. TESTE DE DALTONISMO

  37. None
  38. • Vídeo sem legendas ou Libras; • Áudio sem transcrição

    em texto; • Conteúdo sem uma linguagem clara e simples. DEFICIÊNCIA AUDITIVA BARREIRAS ENFRENTADAS
  39. • Falta de clareza e consistência na organização das páginas;

    • Utilização de linguagem complexa sem necessidade; • Uso de imagens “piscantes” ou áudio em certa frequência que cause desconforto. DEFICIÊNCIA INTELECTUAL BARREIRAS ENFRENTADAS
  40. • Atividades com limite de tempo; • Abertura de várias

    janelas simultaneamente; • Funções que não funcionam pelo teclado. DEFICIÊNCIA FÍSICA BARREIRAS ENFRENTADAS
  41. Acessibilidade é usabilidade

  42. Acessibilidade é diversidade

  43. Qual horário que vocês mais utilizam?

  44. None
  45. None
  46. None
  47. Luz direta à noite ou em um ambiente escuro não

    é a melhor opção para nossos olhos.
  48. Tecnologia assistiva

  49. O QUE É? TECNOLOGIA ASSISTIVA

  50. MOUSES E TECLADOS ADAPTADOS TECNOLOGIA ASSISTIVA

  51. US$ 2.795,00 LINHA BRAILE TECNOLOGIA ASSISTIVA

  52. JAWS: Leitor de tela pago para Windows. NVDA: Leitor de

    tela gratuito para Windows. Virtual Vision: Leitor de tela pago para Windows. Orca: Leitor de tela gratuito para Linux. VoiceOver: Leitor de tela para IOS que acompanha os dispositivos da Apple. LEITORES DE TELA TECNOLOGIA ASSISTIVA
  53. setas - toda a página LEITORES DE TELA TECNOLOGIA ASSISTIVA

  54. setas - toda a página tecla tab - para links

    LEITORES DE TELA TECNOLOGIA ASSISTIVA
  55. setas - toda a página tecla tab - para links

    tecla H - para cabeçalhos LEITORES DE TELA TECNOLOGIA ASSISTIVA
  56. Regularização

  57. None
  58. WAI-ARIA (Accessible Rich Internet Applications) Adiciona atributos especiais à marcação.

    WAI-ARIA REGULARIZAÇÃO
  59. WCAG Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0. Abrangem

    um vasto conjunto de recomendações que têm como objetivo tornar o conteúdo Web mais acessível.
  60. WebAIM Web Accessibility in Mind Simplificou as diretrizes do WCAG

    em uma lista de verificação fácil de seguir.
  61. 1.Perceptível Princípios Alternativas de texto Legenda Conteúdo em geral

  62. 1.Perceptível Princípios 2.Operável Funcionalidades via teclado Navegação em geral

  63. 1.Perceptível Princípios 2.Operável 3.Compreensível Textos e conteúdos compreensíveis Ajudar os

    usuários a evitar erros
  64. 1.Perceptível Princípios 2.Operável 3.Compreensível 4.Robusto Maximizar a compatibilidade com recursos

    de tecnologia assistiva
  65. MODELO DE ACESSIBILIDADE EM GOVERNO ELETRÔNICO REGULARIZAÇÃO

  66. Planejar e implementar

  67. O cenário ideal é ter a acessibilidade como uma parte

    do projeto, desde a sua concepção.
  68. “Accessibility is a pain to spell”

  69. “Accessibility is a pain to spell, but it doesn’t have

    to be a pain to work on.”
  70. Maaaaas…. Projeto quase finalizado e só agora me toquei que

    devo pensar em acessibilidade ou minha empresa falou para "fazer", e agora?
  71. Refactoring!

  72. Dos / Dont’s

  73. <img src="img/image.jpg" alt="imagem"> #1: TEXTO ALTERNATIVO PARA IMAGENS DOS /

    DONT´S
  74. <img src="img/image.jpg" alt="foto do Thiago"> #1: TEXTO ALTERNATIVO PARA IMAGENS

    DOS / DONT´S
  75. <img src="img/image.jpg" alt="Thiago Marques e o nome de sua palestra

    no Devfest Nordeste: acessibilidade web: como estamos pensando. Dia do evento: 21 de outubro de 2017. Local do evento: SENAI CMATEC."> #1: TEXTO ALTERNATIVO PARA IMAGENS DOS / DONT´S
  76. PRA CEGO VER DOS / DONT´S

  77. Seguir a semântica do código H1 é pra ser usado

    no lugar do H1 #2 TEXTO ALTERNATIVO PARA IMAGENS DOS / DONT´S
  78. #3 ALERTAS DOS / DONT´S <div id="status" role="alert" aria-live="assertive" class="done">

    <p>Sua conta foi criada!</p> </div>
  79. <label>Nome</label> <input type="text" id="nome"> #4 INPUT DE FORMULÁRIO DOS /

    DONT´S
  80. <label>Nome</label> <input type="text" id="nome"> #4 INPUT DE FORMULÁRIO DOS /

    DONT´S <label for="nome">Nome</label> <input type="text" id="nome"> Don’t
  81. Clique aqui Download Saiba mais #5 NOMES DE LINKS DOS

    / DONT´S
  82. Acessar a página do Devfest Nordeste Baixar a nova versão

    do pdf Saiba mais sobre acessibilidade #5 NOMES DE LINKS DOS / DONT´S
  83. Atributos que representam ações nos elementos HTML. Marcam áreas de

    uma página. #6 ROLES DOS / DONT´S
  84. <ul role="list"> <li role="listitem">Item</li> <li role="listitem">Item</li> <li role="listitem">Item</li> </ul> #6

    ROLES - SEMÂNTICA JÁ FALA POR SI SÓ DOS / DONT´S
  85. #6 ROLES - SEMÂNTICA JÁ FALA POR SI SÓ DOS

    / DONT´S <ul> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <ul role="list"> <li role="listitem">Item</li> <li role="listitem">Item</li> <li role="listitem">Item</li> </ul> Don’t
  86. Testar e Medir

  87. Testar, sempre!

  88. Testar, sempre! Aprender como leitores de tela trabalham Navegar na

    página sem o mouse Testar o contraste de cores da página
  89. CYNTHIA SAYS http://www.cynthiasays.com

  90. A CHECKER https://achecker.ca/checker

  91. WAVE http://wave.webaim.org

  92. aXe https://goo.gl/bWijDJ

  93. Curso E-MAG para desenvolvedores Web Accessibility by Google - UDACITY

    DICAS DE CURSOS REGULAMENTAÇÃO
  94. Nenhuma ferramenta de avaliação automática pode informar se seu site

    está acessível. O teste humano é sempre necessário porque a acessibilidade é sobre a experiência humana.
  95. Dicas

  96. Acessibilidade na web depende tanto dos desenvolvedores como dos designers.

  97. Acessibilidade não é uma limitação.

  98. O que a lei nos diz?

  99. Não devemos fazer porque a lei obriga

  100. Devemos fazer porque nos importamos

  101. Um produto que atenda a todas a pessoas

  102. None
  103. None
  104. Obrigado! thiago.marques@hotmart.com.br thiagoam.com.br @althi