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.

Frontend com Acessibilidade - FrontInSampa - Nov. 2012

10,448 views

Published on

Apresentação realizada em parceria com Clécio Bachini, no FrontinSampa, dia 3 de novembro de 2012.

Utilizamos o novo site do Itaú como estudo de caso de acessibilidade.

Published in: Technology

Frontend com Acessibilidade - FrontInSampa - Nov. 2012

  1. 1. Clécio Bachini Horácio Soares @cbachini @horaciosoares 11 2528-1521 21 9925-5404 frontend comacessibilidade
  2. 2. sou um frontend...
  3. 3. http://www.slideshare.net/fullscreen/bernarddeluna/quero-ser-um-ninja-em-xhtml-html5-e-css3/3 sou um ninja
  4. 4. Eu sou oBernardDe Luna
  5. 5. Então por que preciso mepreocupar comacessibilidade?
  6. 6. 1 oleis de acessibilidade
  7. 7. Decreto Leinº 5.296 (dez/04)
  8. 8. Decreto Lei nº 6.949 (ago/09), onde a convenção da ONU ganhou força de lei.
  9. 9. proteção contra processos
  10. 10. 2 oservir um público que não é atendido e que é maior do que se espera…
  11. 11. Censo 2010
  12. 12. Dos cerca de 190 milhões debrasileiros, aqueles com pelo menos uma deficiência, seja visual,auditiva, motora ou mental, somam 45 milhões (23,9%).
  13. 13. apesar das estatísticas,como anda a acessibilidade digital no Brasil?
  14. 14. parece, mas não é…
  15. 15. acessibilidadepara inglês ver.
  16. 16. estatísticas do W3C 2,5% em 2010 5% em 2011páginas governamentais sem errosde validação automática de HTML, CSS e acessibilidade.
  17. 17. 3 oatender melhor todas as pessoas…
  18. 18. acessibilidade pra quem cara pálida ?
  19. 19. Para pessoas com diferentes deficiências…
  20. 20. Marta e suas amigas…
  21. 21. Analfabeto funcional Um em cada cinco brasileiros (20,3%) é analfabeto funcional,de acordo com a Pnad(Pesquisa Nacional porAmostra de Domicílios) 2009, divulgada pelo IBGE. Homem de costas, sentado de frente para um quadro branco sem nada escrito.
  22. 22. Calvin, pouca experiência e medo do computadorHomem com muito medo olhando por cima de um notebook.
  23. 23. The Web is not fully accessible to perhaps 2 billion, including people with …Five groups of people for whom Web accessibility can be challenging: Challenges due to aging Literate in poorly-supported Disabilities languages Low literacy Little experience with technology 29
  24. 24. além desses 5 grupos?
  25. 25. Gabriel compenetrado, olhando para o Agora ele está olhando e monitor e clicando com o mouse. brincando como teclado. Gabriel, linguagem em desenvolvimento...
  26. 26. Max, com tendinite, usando o mousecom a mão trocada. Homem com expressão de desespero, usando o mouse com a mão esquerda
  27. 27. Como o Luli disse no Digitalks no Rio em 2012:“Nesse mundo Mobile, somos todos daltónicos e sofremos do Mal de Parkinson”
  28. 28. “design for mobile people,......not for mobile device” Foto: Rosenfield Media
  29. 29. Todos nós na primeira experiência. Um criança com camisa social e gravata em frente a um notebook
  30. 30. E finalmente, o bilionário cego!!! Cifrão desenhado com moedas douradas
  31. 31. Dilbert fazendo parte do logotipo do Google e falando eu não posso ver .Google, o bilionário cego!!! É apenas um robô que indexa conteúdo em texto.
  32. 32. 4 oos benefícios…
  33. 33. Possibilidade de atingir 100% do público alvo;
  34. 34. atender melhor todas as pessoas
  35. 35. Comercial Mercado Livre“Eu compro o que quiser, 2011senão quiser,não compro”Comercial do Mercado Livre 2011
  36. 36. fidelizar clientes
  37. 37. mais fácil de usar e aprender
  38. 38. manutençãomais rápida ebarata, melhorperformance…
  39. 39. valorização da diversidade e responsabilidade social.http://pedagogiando.blogspot.com.br/2011/05/aprender-na-diversidade-e-conviver-com.html
  40. 40. vantagem competitivaMulher com notebook em sinal de ok
  41. 41. melhoria daqualidade. Mãe e filha felizes na praia dando uma estrela
  42. 42. erros que devem serevitados pelos ninjas…
  43. 43. mitos = verdades
  44. 44. Comer chocolote a noite engorda
  45. 45. XComer muito é que engorda, independente do horário…
  46. 46. mitosO excesso de testosterora queprovoca a queda dos cabelos, torna os carecas mais sexy
  47. 47. mitosV
  48. 48. derrubando mitos sobre acessibilidade web
  49. 49. acessibilidade Web não é difícil
  50. 50. nem caro…
  51. 51. muito menos limita a criatividade
  52. 52. ou torna seu site feio
  53. 53. construir sites acessíveis não é complicado e demorado
  54. 54. o público beneficiado com acessibilidade é muito maior do que se espera...
  55. 55. estudo de caso acessibilidade (não foram realizados testes abrangentes, nem com usuários) novo site Itaú outubro/novembro 2012 obs: o objetivo da análise não foi avaliar as mudanças no design, taxonomia, arquitetura, etc., mas sim apontaras evidentes barreiras de acessibilidade Web no novo site.
  56. 56. performance
  57. 57. 291 Kb
  58. 58. 274 Kb
  59. 59. semântica
  60. 60. estrutura de cabeçalhos A página inicial não apresenta Headers e, nas páginas internas,apenas um cabeçalho de nível 1 (H1).
  61. 61. estrutura de cabeçalhos exemplo da página interna “Cartões”
  62. 62. H1
  63. 63. H1
  64. 64. estrutura de cabeçalhosuma proposta de cabeçalhos para uma página Cartões:
  65. 65. H1H2 H2 H2 H2 H2 H2 H2 H2 H2
  66. 66. estrutura de cabeçalhos Assim, utilizando leitores de telas (ex.: NVDA, Jaws, etc.), os usuários com deficiência visual podem navegardiretamente pelo índice (cabeçalhos) da página utilizando a tecla “h”.
  67. 67. navegação via teclado
  68. 68. navegação via teclado•  Utilizando a tecla TAB para navegar diretamente pelos links e campos de formulário, tanto o menu principal, quanto nos links no corpo da páginas do site, não apresentam nenum feedback visual. obs: esse tipo de navegação através de TAB diretamente pelos links e campos de formulário é muito utilizada por pessoas com deficiência motora e visual, mas também é utilizado por usuários sem deficiências.
  69. 69. navegação via teclado•  as subopções do menu principal não estão disponíveis via teclado, pois são dependentes de mouse para aparecerem.
  70. 70. navegação via teclado•  como não é um botão ou link de fato, o botão “Acessar” não ganha o foco dos usuários que utilizam a tecla TAB.
  71. 71. navegação via teclado •  elementos somem ao navegar via tecladoobs: inicialmente, a página inicialtinha seu design desconfigurado quando acessada apenas via teclado.
  72. 72. navegação via teclado •  elementos somem ao navegar via teclado•  os elementos deixaram de sumir quando a página inicial é acessada via teclado, mas a navegação passou a fica em loop dos campos agência e conta.
  73. 73. navegação via teclado•  o menu no rodapé e o botão com “acesso rápido” podem passar desapercebidos dos usuários.
  74. 74. navegação via teclado•  acesso rápido não funciona corretamente nos tablets
  75. 75. navegação via teclado •  falta um salto para o conteúdoobs: a falta de um link com “salto para o conteúdo”, faz com que os usuários de teclado tenham que passar por todos os elementos apresentados no topo de uma página até chegarem ao conteúdo principal das páginas. O uso desse tipo de salto é importante na avaliação automática de acessibilidade.
  76. 76. navegação  Exemplo de salto visível com foco : http://webstanderds.org
  77. 77. navegação  Exemplo de salto visível com foco : http://webstanderds.org
  78. 78. Demonstração: vídeo – acessibilidade web: custo ou benefício?http://www.videolog.tv/video.php?id=230205 http://acessodigital.net/video-html5/ video-acessibilidade-br.html
  79. 79. textos com tamanho fixo e reduzido
  80. 80. links na home para própria home
  81. 81. menu com imagenssemelhantes a banners
  82. 82. baixo contraste.
  83. 83. links e imagens sem descrição
  84. 84. <a href="/">
<img src="/…/img/logo-itau.png" class="logoItau"/>
</a>"
  85. 85. <a href="/voce-mais-digital/">
<img src="/.../Banner-Home-voce-mais-digital.jpg"class="imgCampanhaHome" alt=""/>
</a>"
  86. 86. <a href="/videos/tutorial-novo-portal-itau.html">
<img src="/.../itau-doodle-novo-site.jpg"class="imgCampanhaHome" alt=""/>"</a>"
  87. 87. Home do Itaú com as imagens desabilitadas
  88. 88. imagens com descrições que fazem referências ao termo “imagem” e com conteúdo redundante ( ALT e TITLE )Obs: não é necessário descrever objetos como imagens e links, pois eles sãoidentificados pelos softwares leitores de telas.
  89. 89. <img src="/.../conta-corrente-home.jpg"alt="imagem - O seu primeiro passo em direção àsfacilidades que o Itaú oferece." 
title="imagem - O seu primeiro passo em direçãoàs facilidades que o Itaú oferece.">"
  90. 90. O atributo TITLE serve mesmo para?Em 99% das vezes apenas para aumentar a verbosidade e redundância... Mestre SEO, vc sabe?
  91. 91. simular elementos comobotões, links, menus do tipo select, etc.
  92. 92. <div class="loginBtn”>" <span class="btnSubmit">" <img src=”icon-cadeado-btn.png” alt=“” />" Acessar" </span>"</div>"
  93. 93. <div class="loginBtn”>"<div class="formLogin”>"<div class="btnGroup btnPosLeft”>"<span class="arrows"></span>"<a class="btnSelect dropdownSelect clearfix"id="linkfirst" href="#">Agência e Conta</a>"<ul class="dropdownMenu”>"<li><a href="#" id="agconta">Agência e Conta</a></li>"<li><a href="#" id="cartcred">Cartão de Crédito</a></li>"<li><a href="#" id="codop">Código Operador</a></li>"<li class="divider"></li>"<li><a href="https://www.itau.com.br/mais-acessos/" id="maisacessos">Mais acessos</a></li>"</ul>"
  94. 94. form sem LABEL
  95. 95. <div class="loginBtn”>"<form name="banklineAgConta" method="POST"action=”…”>"<fieldset class="agencia_conta opened">"..."<input type="text" id="campo_agencia"name="agencia" class="loginItau wAg" onFocus="if(this.value==Agência)this.value=;" onBlur="if(this.value==)this.value=Agência;"value="Agência" />""<input type="text" id="campo_conta"class="loginItau wCc" onFocus="if(this.value==Conta)this.value=;" onBlur="if(this.value==)this.value=Conta;"value="Conta" />"..."
  96. 96. modal inacessível via teclado
  97. 97. um exemplo de modal acessível http://webhipster.com/testing/ accessibility/modal-dialog-latest/
  98. 98. uso landmarks WAI/ARIA
  99. 99. navegação   Algumas regiões navegáveis com Landmark ARIA:•  banner – normalmente é utilizado como a região do cabeçalho do site, onde são incluídos o logotipo, slogan, etc.•  complementary – área complementar ao conteúdo principal da página, por exemplo, a coluna a direita da página onde podem ser incluídos outros conteúdos.•  contentinfo - área que contém as informações sobre o site como, por exemplo, copyright, privacidade, endereço e outras informações comuns ao rodapé da página.•  main – Conteúdo principal da página. Área coma conteúdo centrado no assunto/tema da página Web.•  navigation – área de navegação do site.•  search – área com uma busca.
  100. 100. Navegação  Landmark ARIA:<div role="banner"> [Conteúdo do cabeçalho] </div> <div role="navigation"> [Navegação] </div><div role="search"> [Busca] </div> <div role="main"> [Conteúdo principal] </div><div role="complementary"> [Conteúdo complementar] </div><div role="contentinfo"> [Rodapé] </div>
  101. 101. Accessible Rich Internet Applications ARIA NOW HTML  4  +  ARIA   HTML5  +  ARIA  http://www.abilitynet.org.uk/accessibility2/wp-content/uploads/2009/09/HTML5_Accessibility_faulkner.ppt
  102. 102. role="navigation"role="navigation"
  103. 103. Links
  104. 104. Links: identificação de destino Recomendação 13.1 (Referência no WCAG 1.0): Identifique claramente o alvo de cada link. Recomendação 2.4 Navegável (Referência no WCAG 2.0 – critério 2.4.4 Finalidade do link): Fornecer formas de ajudar os usuários a navegar, localizar conteúdos e determinar o local onde estão.
  105. 105. Links
  106. 106. “Clique aqui”, “Saiba mais”, “veja Mais”… 41.700.000 respostas para “clique aqui” no Google.
  107. 107. Links Saída   acessível  
  108. 108. Links Link  no  9tulo  da  chamada   com  cara  de  link.  S  
  109. 109. Se ao entrar no link o usuário for desligado do site corrente. - Links que abrem novos sites sem que ousuário note que foi levado para outro site.
  110. 110. ... <li><a href="http://.../serialization/"><span lang="en">Building Accessible Websites</span>.<img src="novo_site.gif" alt="abre novosite"></a><br>Excelente livro em inglês - versão digital.</li> ...
  111. 111. Se ao entrar no link o usuário for desligado do site corrente em uma nova janela. - Essa prática não é recomendada pelo W3C.Links que abrem em nova janela sem que o usuário seja avisado.
  112. 112. ... <li><a href="http://.../serialization/"><span lang="en">Building Accessible Websites</span>.<img src="novo_site.gif" alt="novo site emnova janela"></a><br>Excelente livro em inglês - versão digital.</li> ...
  113. 113. Links para formatos diferentes do HTML. - Links para arquivos em PDF, DOC, XLS,PNG, entre outros, sem a devida descriçãodo tipo de arquivo que será baixado e seu tamanho.  
  114. 114. Quando não se tem ideia: Clique aqui Saiba mais Continue lendo Veja mais
  115. 115. Quando somossurpreendidos: Conheça a legislaçãoLeia o manual do produto
  116. 116. Quando falta informação: Faça download da legislação Baixe aqui o manual do produto
  117. 117. Sem surpresas!Faça download da legislação (formato doc, 1.32 mb)Baixe aqui o manual do produto (formato pdf, 2.47 mb)
  118. 118. Sem surpresas e poluição Faça download da legislação Baixe aqui o manual do produto
  119. 119. Sem surpresas e poluição Faça download da legislação Formato DOC - 1.32 Mb Baixe aqui o manual do produto
  120. 120. Sem surpresas e poluição Faça download da legislação Baixe aqui o manual do produto Formato PDF - 2.47 MbRecomendações:●  A informação pode estar escondida, mas deve aparecer quando o elemento ganhar foco com o mouse ou teclado.●  Informações relevantes não devem ser incluídas via atribulo TITLE.
  121. 121. O Mundo ideal!Baixe aqui o manual do produto (formato pdf, 2.47 mb)Baixe aqui o manual do produto (formato doc, 2.84 mb)Baixe aqui o manual do produto (formato html, 1.24 mb)Baixe aqui o manual do produto (formato txt, 705 kb)
  122. 122. Mundo ideal sem poluiçãoManual do produtoSelecione um formato q Baixar o ManualPDF – tamanho 1.5 MbHTML – tamanho 0.7 MbTXT – tamanho 0.5 Mb
  123. 123. Outros erros•  erros de Web Standards•  iframe sem acessibilidade•  tabela para layout
  124. 124. bases para odesenvolvimento depáginas acessíveis
  125. 125. diretrizes de acessibilidade
  126. 126. Recomendações para acessibilidadedo conteúdo da Web 1.0 e 2.0 do W3CWCAG Web Content Accessibility Guidelinesà WCAG 1.0 – 05 de maio de 1999 http://www.utad.pt/wai/wai-pageauth.htmlà WCAG 2.0 – 11 de dezembro de 2008 http://www.ilearn.com.br/TR/WCAG20/
  127. 127. e-mag 3.0 Conteúdo baseado no WCAG 2.0, entretanto mais simples, didático e de fácil compreensão.http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG
  128. 128. Validação de Acessibilidade
  129. 129. Validação de Acessibilidadeà  Validação automática dos Padrões Web: XHTML e CSS.
  130. 130. Validador W3C – HTML/XHTML http://validator.w3.org/
  131. 131. Validador W3C – CSS http://jigsaw.w3.org/css-validator/
  132. 132. Validação de Acessibilidadeà  Validação automática e semi-automática de acessibilidade.
  133. 133. Da Silvahttp://www.dasilva.org.br/
  134. 134. Access Monitorhttp://www.acessibilidade.gov.pt/accessmonitor/
  135. 135. Lista de validadores indicados pelo WAI: http://www.w3.org/WAI/ER/tools/complete
  136. 136. Validação de AcessibilidadeAvaliação humana por especialistas e usuários:à  Aplicação de lista de verificação do WCAG por um especialista.à  Avaliação por usuários deficientes, experts em acessibilidade.à  Teste de acesso em diferentes ambientes, condições, navegadores, sistemas.à  Testes com dispositivos móveis e de impressão.à  Teste de usabilidade e acessibilidade com usuários.
  137. 137. Clécio Bachini Horácio Soares @cbachini @horaciosoares 11 2528-1521 21 9925-5404Obrigado!

×