Your SlideShare is downloading. ×
0
Clécio Bachini   Horácio Soares           @cbachini    @horaciosoares        11 2528-1521      21 9925-5404   frontend com...
sou um frontend...
http://www.slideshare.net/fullscreen/bernarddeluna/quero-ser-um-ninja-em-xhtml-html5-e-css3/3        sou um ninja
Eu sou oBernardDe Luna
Então por que  preciso mepreocupar comacessibilidade?
1 oleis de acessibilidade
Decreto Leinº 5.296 (dez/04)
Decreto Lei nº 6.949 (ago/09), onde a convenção da ONU    ganhou força de lei.
proteção contra processos
2 oservir um público que não é atendido e que é maior    do que se espera…
Censo 2010
Dos cerca de 190 milhões debrasileiros, aqueles com pelo menos   uma deficiência, seja visual,auditiva, motora ou mental, ...
apesar das estatísticas,como anda a acessibilidade     digital no Brasil?
parece, mas não é…
acessibilidadepara inglês ver.
estatísticas do W3C        2,5% em 2010         5% em 2011páginas governamentais sem errosde validação automática de HTML,...
3 oatender melhor todas as      pessoas…
acessibilidade pra quem cara pálida ?
Para pessoas com diferentes deficiências…
Marta e suas amigas…
Analfabeto        funcional    Um em cada cinco  brasileiros (20,3%) é  analfabeto funcional,de acordo com a Pnad(Pesquisa...
Calvin, pouca                                   experiência e                                     medo do                 ...
The Web is not fully accessible to perhaps 2 billion, including people with …Five groups of people for whom Web accessibil...
além desses 5 grupos?
Gabriel compenetrado, olhando para o   Agora ele está olhando e  monitor e clicando com o mouse.      brincando como tecla...
Max, com tendinite, usando o   mousecom a mão  trocada.              Homem com expressão de desespero, usando o mouse com ...
Como o Luli disse no Digitalks no Rio em 2012:“Nesse mundo Mobile, somos todos daltónicos e sofremos    do Mal de Parkinson”
“design for mobile people,......not for mobile device”         Foto: Rosenfield Media
Todos nós na primeira experiência.    Um criança com camisa social e gravata em frente a um notebook
E finalmente, o bilionário    cego!!!       Cifrão desenhado com            moedas douradas
Dilbert fazendo parte do logotipo do Google e falando eu não posso ver .Google, o bilionário cego!!! É apenas um  robô que...
4 oos benefícios…
Possibilidade de atingir 100% do    público alvo;
atender melhor todas as pessoas
Comercial       Mercado Livre“Eu compro o que quiser, 2011senão quiser,não compro”Comercial do Mercado    Livre 2011
fidelizar clientes
mais fácil de usar e aprender
manutençãomais rápida ebarata, melhorperformance…
valorização da diversidade e                     responsabilidade social.http://pedagogiando.blogspot.com.br/2011/05/apren...
vantagem                                     competitivaMulher com notebook em sinal de ok
melhoria daqualidade.              Mãe e filha felizes na praia dando uma estrela
erros que devem serevitados pelos ninjas…
mitos = verdades
Comer chocolote a noite engorda
XComer muito é que engorda, independente do horário…
mitosO excesso de testosterora queprovoca a queda dos cabelos, torna os carecas mais sexy
mitosV
derrubando mitos sobre  acessibilidade web
acessibilidade Web não é difícil
nem caro…
muito menos limita a criatividade
ou torna seu site feio
construir sites acessíveis não é   complicado e demorado
o público beneficiado com acessibilidade    é muito maior do que se espera...
estudo de caso            acessibilidade              (não foram realizados testes            abrangentes, nem com usuário...
performance
291 Kb
274 Kb
semântica
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 (...
estrutura de cabeçalhos  exemplo da página interna         “Cartões”
H1
H1
estrutura de cabeçalhosuma proposta de cabeçalhos para      uma página Cartões:
H1H2        H2   H2   H2     H2                  H2     H2        H2         H2
estrutura de cabeçalhos Assim, utilizando leitores de telas (ex.:   NVDA, Jaws, etc.), os usuários com    deficiência visu...
navegação via teclado
navegação via teclado•  Utilizando a tecla TAB para navegar   diretamente pelos links e campos de    formulário, tanto o m...
navegação via teclado•  as subopções do menu principal       não estão disponíveis via    teclado, pois são dependentes   ...
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    ...
navegação via teclado   •  elementos somem ao       navegar via tecladoobs: inicialmente, a página inicialtinha seu design...
navegação via teclado     •  elementos somem ao         navegar via teclado•  os elementos deixaram de sumir       quando ...
navegação via teclado•  o menu no rodapé e o botão com    “acesso rápido” podem passar    desapercebidos dos usuários.
navegação via teclado•  acesso rápido não funciona    corretamente nos tablets
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...
navegação	  Exemplo de salto visível com foco : http://webstanderds.org
navegação	  Exemplo de salto visível com foco : http://webstanderds.org
Demonstração:  vídeo – acessibilidade web:      custo ou benefício?http://www.videolog.tv/video.php?id=230205  http://aces...
textos com tamanho fixo e reduzido
links na home para   própria home
menu com imagenssemelhantes a banners
baixo contraste.
links e imagens sem descrição
<a href="/">
<img src="/…/img/logo-itau.png" class="logoItau"/>
</a>"
<a href="/voce-mais-digital/">
<img src="/.../Banner-Home-voce-mais-digital.jpg"class="imgCampanhaHome" alt=""/>
</a>"
<a href="/videos/tutorial-novo-portal-itau.html">
<img src="/.../itau-doodle-novo-site.jpg"class="imgCampanhaHome" alt=""/...
Home do Itaú com as imagens desabilitadas
imagens com descrições que fazem referências ao termo  “imagem” e com conteúdo         redundante       ( ALT e TITLE )Obs...
<img src="/.../conta-corrente-home.jpg"alt="imagem - O seu primeiro passo em direção àsfacilidades que o Itaú oferece." 
t...
O atributo TITLE     serve mesmo para?Em 99% das vezes apenas para  aumentar a verbosidade e       redundância...        M...
simular elementos comobotões, links, menus do tipo select,                etc.
<div class="loginBtn”>"  <span class="btnSubmit">"      <img src=”icon-cadeado-btn.png” alt=“” />"        Acessar"  </span...
<div class="loginBtn”>"<div class="formLogin”>"<div class="btnGroup btnPosLeft”>"<span class="arrows"></span>"<a class="bt...
form sem LABEL
<div class="loginBtn”>"<form name="banklineAgConta" method="POST"action=”…”>"<fieldset class="agencia_conta opened">"..."<...
modal inacessível via teclado
um exemplo de modal acessível  http://webhipster.com/testing/ accessibility/modal-dialog-latest/
uso landmarks  WAI/ARIA
navegação	                Algumas regiões navegáveis com Landmark ARIA:•    banner – normalmente é utilizado como a região...
Navegação	  Landmark ARIA:<div role="banner"> [Conteúdo do cabeçalho] </div>  <div role="navigation"> [Navegação] </div><d...
Accessible Rich Internet Applications                               ARIA NOW       HTML	  4	  +	  ARIA	                   ...
role="navigation"role="navigation"
Links
Links: identificação de destino Recomendação 13.1 (Referência no WCAG 1.0): Identifique claramente o alvo de cada link. Re...
Links
“Clique aqui”, “Saiba mais”, “veja  Mais”… 41.700.000 respostas  para “clique aqui” no Google.
Links          Saída	          acessível	  
Links           Link	  no	  9tulo	  da	  chamada	                    com	  cara	  de	  link.	  S	  
Se ao entrar no link o usuário for   desligado do site corrente. - Links que abrem novos sites sem que ousuário note que f...
... <li><a href="http://.../serialization/"><span lang="en">Building Accessible Websites</span>.<img src="novo_site.gif" a...
Se ao entrar no link o usuário for desligado do site corrente em        uma nova janela.  - Essa prática não é recomendada...
... <li><a href="http://.../serialization/"><span lang="en">Building Accessible Websites</span>.<img src="novo_site.gif" a...
Links para formatos diferentes           do HTML. - Links para arquivos em PDF, DOC, XLS,PNG, entre outros, sem a devida d...
Quando não se tem ideia:        Clique aqui        Saiba mais       Continue lendo         Veja mais
Quando somossurpreendidos: Conheça a legislaçãoLeia o manual do produto
Quando falta informação:    Faça download da legislação   Baixe aqui o manual do produto
Sem surpresas!Faça download da legislação (formato doc, 1.32 mb)Baixe aqui o manual do produto (formato pdf, 2.47 mb)
Sem surpresas e poluição    Faça download da legislação   Baixe aqui o manual do produto
Sem surpresas e poluição    Faça download da legislação                 Formato DOC - 1.32 Mb   Baixe aqui o manual do pro...
Sem surpresas e poluição              Faça download da legislação             Baixe aqui o manual do produto              ...
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)Ba...
Mundo ideal sem poluiçãoManual do produtoSelecione um formato    q   Baixar o ManualPDF – tamanho 1.5 MbHTML – tamanho 0....
Outros erros•  erros de Web Standards•  iframe sem acessibilidade•  tabela para layout
bases para odesenvolvimento depáginas acessíveis
diretrizes de acessibilidade
Recomendações para acessibilidadedo conteúdo da Web 1.0 e 2.0 do W3CWCAG Web Content Accessibility Guidelinesà WCAG 1.0 –...
e-mag 3.0        Conteúdo baseado no WCAG 2.0,       entretanto mais simples, didático e             de fácil compreensão....
Validação de   Acessibilidade
Validação de Acessibilidadeà  Validação automática dos Padrões Web:    XHTML e CSS.
Validador W3C – HTML/XHTML        http://validator.w3.org/
Validador W3C – CSS http://jigsaw.w3.org/css-validator/
Validação de Acessibilidadeà  Validação automática e semi-automática    de acessibilidade.
Da Silvahttp://www.dasilva.org.br/
Access Monitorhttp://www.acessibilidade.gov.pt/accessmonitor/
Lista de validadores indicados pelo WAI:       http://www.w3.org/WAI/ER/tools/complete
Validação de AcessibilidadeAvaliação humana por especialistas e usuários:à  Aplicação de lista de verificação do WCAG por...
Clécio Bachini Horácio Soares        @cbachini @horaciosoares     11 2528-1521   21 9925-5404Obrigado!
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Frontend com Acessibilidade - FrontInSampa - Nov. 2012
Upcoming SlideShare
Loading in...5
×

Frontend com Acessibilidade - FrontInSampa - Nov. 2012

7,574

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
7 Comments
29 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,574
On Slideshare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
91
Comments
7
Likes
29
Embeds 0
No embeds

No notes for slide

Transcript of "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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×