Acessibilidade Web

Porque o desenvolvedor Front-End deveria deixar todos os projetos acessívels.
Talk realizada no primeiro FEMUG-ABC em Agosto de 2015

Transcript

1. Ubirajara Pelli @ubirajarapelli Desenvolvedor Front-End
2. 1 Acordo Plataforma para mediação de conflitos www.1acordo.com
3. Colégio e Faculdade Pentágono www.pentagonoedu.com.br
4. MeetUp Front ABC Front ABC
5. FEMUG ABC
6. Acessibilidade Web Porque você desenvolvedor deveria estar aplicando acessibilidade em seus projetos.
7. O que é Acessibilidade? Qualidade ou caráter do que é acessível. Facilidade na aproximação, no tratamento ou na aquisição.
9. 60 Milhões de Usuários Ativos Individuo que acessa a internet pelo menos uma vez a cada 30 dias. (Março 2014) bit.ly/1hgcp05
10. Somos mais de 190 Milhões de Brasileiros, segundo o censo demográfico do IBGE realizado no ano de 2010. bit.ly/1TJ1CqW
11. Mais de 45 Milhões são deficientes Calma aí, vamos entender o que carateriza a deficiência. bit.ly/1TJ1CqW
12. Deficiência Toda perda ou anormalidade de uma estrutura ou função psicológica fisiológica ou anatômica que gere incapacidade para o desempenho de atividade, dentro do padrão considerado normal para o ser humano.
13. Deficiência Permanente Aquela que ocorreu ou se estabilizou durante um período de tempo suficiente para não permitir recuperação ou ter probabilidade de que se altere, apesar de novos tratamentos.
14. Deficiência Física Alteração completa ou parcial de um ou mais segmentos do corpo humano, acarretando o comprometimento da função física, exceto as deformidades estéticas e as que não produzam dificuldades para o desempenho de funções
15. Deficiência Auditiva Perda bilateral, parcial ou total, de quarenta e um decibéis (dB) ou mais, aferida por audiograma nas frequências de 500HZ, 1.000HZ, 2.000Hz e 3.000Hz;
16. Deficiência Visual Cegueira, na qual a acuidade visual é igual ou menor que 0,05 no melhor olho, com a melhor correção óptica; a baixa visão, que significa acuidade visual entre 0,3 e 0,05 no melhor olho, com a melhor correção óptica; os casos nos quais a somatória da medida do campo visual em ambos os olhos for igual ou menor que 60o; ou a ocorrência simultânea de quaisquer das condições anteriores
17. Deficiência Mental Funcionamento intelectual significativamente inferior à média, com manifestação antes dos dezoito anos e limitações associadas a duas ou mais áreas de habilidades adaptativas
18. Representa 23,92% da população Mais 12 milhões de pessoas com deficiência acessando a internet diariamente (2010) bit.ly/1TJ1CqW
19. O que é acessibilidade Web? Acessibilidade na Web significa que pessoas com deficiência podem usar a Web. Mais especificamente, a acessibilidade na Web significa que pessoas com deficiência podem perceber entender, navegar, interagir e contribuir para a Web. (W3C Brasil, 2013) bit.ly/1IVKxVz
20. • Uma mulher cega, utilizando um leitor de telas, pesquisa a restituição de imposto de renda no sítio da Receita Federal; • Um jovem surdo ou com deficiência auditiva que faz um curso de inglês à distância. Acessibilidade Web pra quem?
21. • Um homem cego e sem braços procura sua ex-professora em um sistema de busca utilizando um programa de reconhecimento de voz para entrar comandos no computador e receber retorno a partir do leitor de telas; • Um homem com paralisia cerebral, com grandes dificuldades motoras e que só utiliza um dedo para teclar, atualiza seu perfil em uma rede social;
22. • Um homem com deficiência motora, que usa um mouse adaptado, faz compras em uma loja virtual; • Uma jovem tetraplégica, utilizando apenas um ponteiro na cabeça, procura informações sobre células-tronco em sítios especializados; • Uma mulher com deficiência intelectual faz exercícios pela web para melhorar sua comunicação;
23. • Um senhor surdocego namora pela web, utilizando um dispositivo que mostra em Braille as informações exibidas na tela; • Uma mulher com baixa visão procura informações sobre investimentos e a crise econômica mundial, utilizando um programa ampliador de tela; • Um programador daltônico testa uma aplicação na web, procurando erros;
24. Acessibilidade é para todos! "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." Tim Berners-Lee
25. bit.ly/1IVKxVz Diretrizes de Acessibilidade para Conteúdo Web
26. • As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0 definem a forma de como tornar o conteúdo da Web mais acessível para pessoas com deficiência. • Estas diretrizes tornam também o conteúdo da Web mais acessível por pessoas idosas, cujas habilidades estão em constante mudança devido ao envelhecimento, e muitas vezes melhoram a usabilidade para usuários em geral.
27. bit.ly/1J0Yvp9 Camadas de Orientação das WCAG 2.0
28. As pessoas e organizações que utilizam as WCAG são diversas e incluem programadores e web designers, legisladores, responsáveis pelas compras, professores e alunos. Para corresponder às várias necessidades deste público, são fornecidas diversas camadas de orientação, incluindo princípios globais, diretrizes gerais, critérios de sucesso testáveis, um rico conjunto de técnicas de tipo necessárias e de tipo sugeridas, bem como falhas comuns documentadas com exemplos, links para recursos e código fonte.
29. 1. Perceptível 2. Operável 3. Compreensível 4. Robusto As 4 Diretrizes do WCAG 2.0
30. As informações e os componentes da interface do usuário devem ser apresentados em formas que possam ser percebidas pelo usuário 1 - Perceptível
31. Forncer alternativas textuais para qualquer conteúdo não textual para que possa ser transformado em outras formas de acordo com as necessidades dos usuários 1.1 Alternativas em Texto:
37. Fornecer alternativas textuais para qualquer conteúdo não textual para que possa ser transformado em outras formas de acordo com as necessidades dos usuários 1.2 Midias Baseas em Tempo
39. Vídeos com legenda bit.ly/1E3XuQh <video width="390" id="clip" controls> <source src="movie.webm" type='video/webm; codecs="vp8, vorbis"' /> <track kind="subtitles" src="subtitles-en. vtt" srclang="en" label="English subtitles" default /> <track kind="subtitles" src="subtitles-ptbr. vtt" srclang="pt-br" label="Legendas em Portugês"> </video> var videoElement = document.querySelector("video"); var textTracks = videoElement.textTracks; //one for each track element var textTrack = textTracks[0]; //corresponds to the first track element var kind = textTrack.kind //e.g. "subtitles" var mode = textTrack.mode // 0 (TextTrack.OFF in spec, TextTrack.DISABLED in Chrome), 1 (TextTrack. HIDDEN) or 2 (TextTrack.SHOWING) WEBVTT FILE 1 00:00:00.500 --> 00:00:02.000 D:vertical A:start The Web is always changing 2 00:00:02.500 --> 00:00:04.300 and the way we access it is changing 3 00:00:05.000 --> 00:00:07.000 The source of that change is <c.highlight>you</c>
40. Criar conteúdo que pode ser apresentado de diferentes maneiras sem perder informação ou estrutura. 1.3 Adaptável
41. Facilitar a audição e a visualização de conteúdo aos usuários, incluindo a separação entre o primeiro plano e o plano de fundo. 1.4 Discernivel
43. Analizador de contraste bit.ly/1E3XuQh
44. Os componentes de interface de usuário e a navegação devem ser operáveis. 2 - Operável
45. Fazer com que toda funcionalidade fique disponível a partir de um teclado. 2.1 Acessível por teclado
46. <input type="text" tabindex="1"> <input type="text" tabindex="2"> <input type="text" accesskey="q">
47. Fornecer aos usuários tempo suficiente para ler e utilizar o conteúdo. 2.2 Tempo Suficente
48. Criando um Slider acessível bit.ly/1K4QfZx
49. Não criar conteúdo de uma forma conhecida por causar convulsões. 2.3 Convulsões
50. Fornecer maneiras de ajudar os usuários a navegar, localizar conteúdos e determinar onde se encontram. 2.4 Navegável
51. e-MAG bit.ly/1URSq69
52. e-MAG bit.ly/1URSq69
53. e-MAG bit.ly/1URSq69
54. A informação e a operação da interface de usuário devem ser compreensíveis 3 - Compreensível
55. Tornar o conteúdo do texto legível e compreensível. 3.1 Legível
56. Exemplo
57. Microdatas bit.ly/1Lk57F8
58. Fazer com que as páginas Web apareçam e funcionem de modo previsível. 3.2 Previsível
59. Exemplo
60. Ajudar os usuários a evitar e corrigir erros. 3.3 Assistência de Entrada
61. Exemplo
62. O conteúdo deve ser robusto o suficiente para poder ser interpretado de forma confiável por uma ampla variedade de agentes de usuário, incluindo tecnologias assistivas. 4 - Robusto
63. Maximizar a compatibilidade entre os atuais e futuros agentes de usuário, incluindo tecnologias assistivas. 4.1 Compatível
64. Exemplo bit.ly/1URSq69
65. Accessible Rich Internet Applications (WAI-ARIA) 1.0 WAI-ARIA
66. O WAI-ARIA define uma forma de tornar o conteúdo e aplicativos Web mais acessíveis a pessoas com deficiências. Ele contribui especialmente com conteúdo dinâmico e interface de controles de usuário avançadas desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas.
67. Composta por 73 Roles, Dividias em 4 Grupos: Abstract, Widget, Document Structure e Landmarks Roles (Papéis) bit.ly/1TVdG8x
68. Exemplo
69. Composta por 35 States e Properties Estados e Propriedades bit.ly/1TVdG8x
70. Exemplo
72. Lei Brasileira de Inclusão da Pessoa com Deficiência bit.ly/1J3NPIJ Código de Trânsito Brasileiro - Lei 9503/97 | Lei nº 9.503, de 23 de setembro de 1997 Art. 88. Nenhuma via pavimentada poderá ser entregue após sua construção, ou reaberta ao trânsito após a realização de obras ou de manutenção, enquanto não estiver devidamente sinalizada, vertical e horizontalmente, de forma a garantir as condições adequadas de segurança na circulação. Parágrafo único. Nas vias ou trechos de vias em obras deverá ser afixada sinalização específica e adequada.
74. @ubirajarapelli ubirajaracpelli@gmail.com www.ubirajarapelli.com.br Obrigado