Acessibilidade WEB: Internet para todos

Palestra apresentada no Google Extended i/o São Luis. Evento realizado no dia 28/05/2015.

Transcript

2. ACESSIBILIDADE NA WEB: INTERNET PARA TODOS Google I/O extended 2015 São Luís - MA https://speakerdeck.com/willianmano/acessibilidade-web-internet-para-todos
3. “MANO” WILLIAN http://willianmano.net #ioExtendedSaoLuis
4. ABOUT ME • Graduando em Engenharia da Computação - UEMA • Assessor da transparência - STC • Vida útil na web: 7 anos #ioExtendedSaoLuis
5. A QUEM SE DESTINA ACESSIBILIDADE? #ioExtendedSaoLuis Acessibilidade serve para todos vocês!!!
6. VOCÊ SABIA? 23,9% da população total do Brasil, têm algum tipo de deficiência. Seja ela visual, auditiva, motora, mental ou intelectual.
 Censo 2010 Esse total corresponde a 45.606.048 Quarenta e cinco milhões seiscentos e seis mil e
 quarenta e oito pessoas #ioExtendedSaoLuis
7. VOCÊ SABIA? • 7,4% de de pessoas acima de 65 anos. 
 Censo 2010. • 7,3% de crianças de 0 a 4 anos.
 Censo 2010. • Nos países onde a esperança de vida é superior a 70 anos, cada indivíduo viverá com uma deficiência em média 8 anos, isto é 11,5% da sua existência. #ioExtendedSaoLuis
8. “Acessibilidade não se trata de custo ou altruísmo, acessibilidade é investimento!” #ioExtendedSaoLuis
9. UM POUCO SOBRE A LEGISLAÇÃO Criação do Comitê brasileiro(CB-40) da ABNT Dedica-se à normatização no campo de acessibilidade, atendendo aos preceitos de desenho universal. O Comitê possui diversas comissões, definindo normas de acessibilidade em todos os níveis, desde o espaço físico até o virtual Lei10.098 2000 Estabelece normas gerais e critérios básicos para a promoção da acessibilidade. Decreto número 5296 2004 Regulamenta a lei N. 10.098
10. Institucionalização do eMag tornando sua observância obrigatória nos sítios e portais do governo brasileiro. Portaria n. 3, de 7 de maio 2007 A acessibilidade na internet foi contemplada nos artigos 9 e 21 da Convenção, tornando obrigatória e crime de discriminação qualquer informação na internet não acessível para qualquer tipo de deficiência e a qualquer categoria de portal ou site, de empresa privada ou governamental. Brasil assina a "Convenção Internacional dos Direitos da Pessoa com Deficiência" 2007 Promulgação da Convenção Internacional sobre os Direitos das Pessoas com Deficiência, tornando-a um marco legal no Brasil. Decreto n. 6949, de 25 de agosto 2009
11. OK. Vamos ao que interessa! #ioExtendedSaoLuis
12. GUIAS DE ACESSIBILIDADE • Web Content Accessibility Guidelines - WCAG 2.0
 - http://www.w3.org/Translations/WCAG20-pt-PT • Modelo de acessibilidade do governo - eMag 3.1
 - http://emag.governoeletronico.gov.br • Modelo de Codificação do governo - ePWG
 - http://epwg.governoeletronico.gov.br/cartilha-codificacao • WAI-ARIA
 - http://www.w3.org/WAI/intro/aria.php #ioExtendedSaoLuis
13. SEMÂNTICA WEB WAI-ARIA E ROLES LANDMARKS http://maujor.com/tutorial/melhorando-acessibilidade-na-html5-com-uso-de-wai-aria.php #ioExtendedSaoLuis
14. 12 DICAS RÁPIDAS E EFICAZES
15. IDIOMA E TÍTULO DA PÁGINA Fonte: http://tableless.com.br/declarando-idiomas-no-html/ #ioExtendedSaoLuis
16. TEXTO ALTERNATIVO EM IMAGENS • Usado apenas em imagens que tenham importância no contexto. #ioExtendedSaoLuis
17. TEXTO ALTERNATIVO EM IMAGENS Dica • Treinar usuários de CMS como wordpress, joomla… #ioExtendedSaoLuis
18. LINKS • Informação deve ser o mais óbvia o possível • Links dentro de texto diferenciado e com underline Certo: #ioExtendedSaoLuis
19. LINKS ACESSADOS VIA TAB • Feedback sobre o item selecionado Como fazer? a:focus { outline: 1px solid #000; } #ioExtendedSaoLuis
20. CABEÇALHOS • Somente 1 h1 por página • Usar os demais de forma semântica e hierárquica - H2
 - H3
 - H3
 - H2
 - H3
 - H4 #ioExtendedSaoLuis
21. FORMULÁRIOS Utilize o Label para identificar o campo Errado Certo #ioExtendedSaoLuis
22. FORMULÁRIOS Defina o preenchimento obrigatório Errado Certo #ioExtendedSaoLuis
23. MENUS Não utilize menus que somente interagem com o mouse #ioExtendedSaoLuis
24. MENUS Qual a melhora maneira fazer? Fonte: http://tinyurl.com/menuacessivel #ioExtendedSaoLuis
25. MENSAGENS DE ALERTA <div role=“alert” class=“alert alert-success”>Mensagem</div> #ioExtendedSaoLuis
27. EVITE UTILIZAR CAPTCHAS • Podem ser quebrados pela máquina Webvisum - http://www.webvisum.com #ioExtendedSaoLuis
28. EVITE UTILIZAR TECLADO VIRTUAL Consegue ser pior do que o captcha #ioExtendedSaoLuis
29. DALTONISMO #ioExtendedSaoLuis
30. DIFERENÇA DE ELEMENTOS NÃO UTILIZE APENAS CORES OU OUTRAS CARACTERÍSTICAS SENSORIAIS PARA DIFERENCIAR ELEMENTOS A esquerda sinais com a visão normal, à direita os mesmo sinais vistos por quem tem daltonismo. #ioExtendedSaoLuis
31. OFERECER CONTRASTE MÍNIMO ENTRE PLANO DE FUNDO E PRIMEIRO PLANO • As cores do plano de fundo e do primeiro plano deverão ser suficientemente contrastantes para que possam ser visualizadas, também, por pessoas com baixa visão, com cromodeficiências ou que utilizam monitores de vídeo monocromático. • Relação de contraste, de, no mínimo, 4,5:1 #ioExtendedSaoLuis
32. CONTRASTE ENTRE CORES Contraste de 3:1 Contraste de 4,5:1 Recomendado pela ISO-9241-3 Recomendado pelo eMAG #ioExtendedSaoLuis
33. TABELA DE CONTRASTE #ioExtendedSaoLuis
34. • Daltonismo
 http://colororacle.org
 http://snook.ca/technical/colour_contrast/colour.html • WCAG
 http://wave.webaim.org • WCAG e eMAG
 http://www.dasilva.org.br • Leitores de tela
 JAWS - Windows
 NVDA - Windows
 VOICE OVER - OSX
 ORCA - LINUX FERRAMENTAS #ioExtendedSaoLuis
35. “Se o seu site não é acessível a todos, então ele é o deficiente no final das contas.” #ioExtendedSaoLuis
36. OBRIGADO #ioExtendedSaoLuis https://speakerdeck.com/willianmano/acessibilidade-web-internet-para-todos
37. PERGUNTAS? #ioExtendedSaoLuis https://speakerdeck.com/willianmano/acessibilidade-web-internet-para-todos