[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

Transcript

1. Acessibilidade web: como estamos pensando? Devfest Nordeste 2k17
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
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
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!
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
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?
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
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
104. Obrigado! thiago.marques@hotmart.com.br thiagoam.com.br @althi