Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Loading in …3
×
1 of 38

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Uso acessivel - O cumprimento das premissas na web contemporânea

  1. 1. Uso acessível O CUMPRIMENTO DAS PREMISSAS NA WEB CONTEMPORÂNEA Por Gabriel Luiz Ramos
  2. 2. Para quem você desenvolve? “Acessibilidade é tudo sobre a necessidade das pessoas.” Diego Eis
  3. 3. Dados Estatísticos Pessoas com deficiências no Brasil 24% da população = 45.623.910 pessoas Fonte: Censo 2010 No mundo Mais de 1 Bilhão de pessoas Fonte: ONU
  4. 4. Antes de tudo: -Web: qual a premissa? -Informação -> acesso -> usuário
  5. 5. Usabilidade -Utilidade; -Usabilidade; -Design de Interação (UI); -Experiência do Usuário (UX).
  6. 6. Como você acessa? -Em casa; -No trabalho; -Na escola; -No trânsito (ônibus, carro, avião, metrô).
  7. 7. Componentização de acesso -Teclado? -Mouse? -Boa resolução? -Boa conexão? -Tempo? -Boa geladeira?
  8. 8. (nem tão) pequenos detalhes
  9. 9. Todos possuem necessidades especiais Cegueira, daltonismo, deficiência auditiva, deficiência motora... Inclusive você!
  10. 10. Lei nº 13.146, de 6 de julho de 2015 Art. 63. É obrigatória a acessibilidade nos sítios da internet [...] para uso da pessoa com deficiência, garantindo-lhe acesso às informações disponíveis, conforme as melhores práticas e diretrizes de acessibilidade adotadas internacionalmente. Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm
  11. 11. Seu serviço nunca vai ser perfeito para todos Alguém disse flash?
  12. 12. Fundamentos Graceful Degradation x Progressive Enhancement -Fault Tolerance: Tolerância a erros desde o início; “Texto é universal”
  13. 13. Chega de Blábláblá -Conteúdo: HTML Semântico e Correto; -Formatação: CSS e estilo; -Comportamento: Javascript / jQuery e ações. -Front-End:
  14. 14. Escrita -Código limpo (se possível, compressão); -Organização em arquivos: melhora no desempenho, processamento e evita reflow e repaint.
  15. 15. -Semântica: div? O próprio DOCTYPE e a declaração de tagsDiego Eis
  16. 16. Tabelas? Sim! Não para estrutura Sim para diagramação de dados
  17. 17. FALLBACKS Estrutura representativa para utilizações “menos abastadas” Tratamento de erro para visualização de conteúdo
  18. 18. FALLBACKS Conditional Comments: <!--[if IE 6]> De acordo com comentário, esse navegador é IE 6 <![endif]--> <!--[if gte IE 8]> De acordo com comentário, esse navegador é IE 8 ou superior <![endif]--> <!--[if lt IE 9]> De acordo com comentário, esse navegador é IE 9 ou inferior <![endif]--> <!--[if !IE]> De acordo com comentário, esse navegador não é IE <![endif]--> http://www.quirksmode.org/css/condcom.html
  19. 19. FALLBACKS <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> W3C
  20. 20. Novidades como: Bordas, gradientes (degradês), rotações, implementações 3D, filtros. Mas e a acessibilidade? - Prefixos http://docs.emmet.io/css-abbreviations/vendor-prefixes/ -moz-border-radius: 12px; -webkit-border-radius: 12px; -o-border-radius: 12px; -ms-border-radius: 12px; border-radius: 12px; - Para Firefox e navegadores com motor Mozilla; FALLBACKS - Safari, Chrome e navegadores com motor Webkit; - Opera; - Internet Explorer; - Propriedade a ser aceita.
  21. 21. Interações: FALLBACKS Eventos: - onMouseOver / onMouseOut - onFocus / onBlur / onClick Aplicação de estilos: - a:hover - a:focus
  22. 22. FALLBACKS E agora? Será que tá habilitado? É realmente necessário? Pesquisa realizada pela WebAIM em 2012 indicou que 98,6% dos usuários de leitores de tela navegam com javascript habilitado http://webaim.org/techniques/javascript/
  23. 23. FALLBACKS <noscript> <style> .no-js{ display:none !important;} </style> </noscript>
  24. 24. Script download: Async x Defer
  25. 25. FALLBACKS Modernizr: https://modernizr.com/
  26. 26. Componentização/Reutilização (web components) Polymer: https://www.polymer-project.org/1.0/
  27. 27. Atributos Atributos REL e ALT <img src=“imagem.jpg” alt=“Planetas”> <a href=“http://link.com.br rel=“valor”>link</a> <p title=“informações”>essas são as informações</p>
  28. 28. Atributos Atributo tabindex <nav> <ul> <li><a href="#" tabindex="1">Link 1</a></li> <li><a href="#" tabindex="2">Link 2</a></li> <li><a href="#" tabindex="3">Link 3</a></li> <li><a href="#" tabindex="4">Link 4</a></li> <li><a href="#" tabindex="5">Link 5</a></li> </ul> </nav>
  29. 29. WAI-ARIA Extensões (atributos) para auxiliar a semântica, a interação e a navegação de leitores de tela em aplicações web. http://www.w3.org/TR/wai-aria/ http://www.w3.org/TR/aria-in-html/
  30. 30. WAI-ARIA - Widget: alert, button, tab... - Document Structure: list, listitem, img... - Landmarks: banner, main, navigation, form, search, complementary, contentinfo... Tipos de “roles” http://www.w3.org/TR/wai-aria/roles
  31. 31. WAI-ARIA Roles: Breve aplicação
  32. 32. WAI-ARIA States and Properties (Atributos “aria-[...]=”) - aria-labelledby, aria-haspopup, aria-hidden, aria- selected... http://www.w3.org/TR/wai-aria/states_and_properties
  33. 33. WAI-ARIA States and properties, breve aplicação: <ul role=“navigation”> <li><a role=“tab” tabindex=“1” aria-selected=“true”>Aba 1</a></li> <li><a role=“tab” tabindex=“2”>Aba 2</a></li> </ul> <section role=“main”> <div role=“tabpanel” aria-labelledby=“tab1”> Conteudo </div> </section>
  34. 34. WAI-ARIA Precauções: <div role=“button”>ativar</div> <button role=“button”>ativar</section> Prefira os elementos semânticos do próprio HTML.
  35. 35. Adaptive Web Design Fluido, responsivo, adaptativo: A entrega da informação ajustada ao meio de acesso.
  36. 36. Cor, contraste, imagem, mensagem... Do usuário, para o usuário Acessibilidade como algo cotidiano, do início ao fim http://www.w3.org/Translations/WCAG20-pt-br/
  37. 37. Muito obrigado!

×