0
Agosto 2012
Horácio Soareshoracio@digitalacesso.comhoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @ho...
Acessibilidade me lembra?
Acessibilidade para quem?
Todos nós...
Quem mais sofre com     a falta de  acessibilidade?
Marta e suas amigas…
Analfabeto         funcional     Um em cada cinco   brasileiros (20,3%) éanalfabeto funcional, de    acordo com a Pnad(Pes...
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...
E 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, somostodos daltónicos e sofremos do      Mal de Parkin...
“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ô    ...
Estatísticas no Brasil
Estatística: segundo IBGE noBrasil (2000)  180 milhões de habitantes;  24,3 milhões de pessoas com deficiência;  15 milhõe...
Censo 2010
Dos cerca de 190 milhões debrasileiros, aqueles com pelo menosuma deficiência, seja visual, auditiva,motora ou mental, som...
Leis 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.
Como anda a acessibilidade    digital no Brasil?
Motivação pelo     decreto de lei 5296Resultado: acessibilidade para         inglês ver.
Estatísticas do W3C      2,5% em 2010       5% em 2011  Sem erros de validaçãoautomática de HTML, CSS e      acessibilidade.
Acessibilidade WebE quais são os custos?
•   Curva de aprendizagem•   Alto custo no redesign•   Baixo em novos projetos•   Diminui com tempo•   Validação•   Manute...
Qual é o custo da  qualidade?
E os benefícios?
Possibilidade de atingir 100% do     público alvo;
Atender melhor todas as pessoas
Fidelizar clientes  Homem de terno comemorando
Mais fácil de usar e aprender
Proteção contraprocessos pela falta da    acessibilidade
Manutenção mais rápida e barata,          melhor  performance…                    Visualizar os benefícios                ...
Valorização da   Diversidade eResponsabilidade         Social.                   Mãos entrelaçadas
Vantagem                                     competitivaMulher com notebook em sinal de ok
Melhoria daqualidade.              Mãe e filha felizes na praia dando uma estrela
Um caminho para acessibilidade vem da busca pelas melhores           IDADES
IDADES?
}Acessibil                IDADE
}Acessibil Usabil                IDADE
Comercial          Mercado Livre  “Eu compro o   que quiser, 2011  senão quiser,   não compro”Comercial do Mercado Livre  ...
}Acessibil  UsabilSimplic                IDADE
ESPN Brasil– abril 2010
XESPN Brasil– abril 2010
10 princípios de UX do GooglePrincípio 3. O simples é poderoso.
Em uma interface perfeita para aspessoas, elas nunca deveriam errar, principalmente no mundo mobile…
} Acessibil   Usabil  SimplicInterativ                 IDADE
}Acessibil   Usabil  Simplic Interativ  Veloc          IDADE
X
X
10 princípios de UX do GooglePrincípio 2 - cada milisegundo importa.  Melhor definição de milisegundo?
}    Acessibil       Usabil      Simplic     Interativ        Veloc                     IDADEEncontrabil
}  Acessibil     Usabil    Simplic   Interativ      VelocEncontrabil                   IDADE   Atrativ
10 princípios de UX do GooglePrincípio 8 – agrade aos olhos sem          distrair a mente
}  Acessibil     Usabil    Simplic   Interativ      VelocEncontrabil                   IDADE     Atrativ       Util
10 princípios de UX do GooglePrincípio 1 – foque nas pessoas: suas       vidas, trabalho, sonhos.
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Observação e identificação de      um problema...
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
}  Acessibil     Usabil    Simplic   Interativ      VelocEncontrabil                   IDADE     Atrativ        Util     F...
Acessibil  UsabilSimplic
}  Acessibil     Usabil    Simplic   Interativ      VelocEncontrabil                   IDADE     Atrativ        Util      ...
A melhor idade vem da:}     Investigação     Observação     Colaboração        Análise       Avaliação       Validação
By Erico Fileno
Diretrizes de acessibilidade
Recomendações para acessibilidade do    conteúdo da Web 1.0 e 2.0 do W3CWCAG Web Content Accessibility Guidelines WCAG 1....
EMAG 3.0http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG
Iniciativas deAcessibilidade
W3C – WAI      Web Accessibility Initiative1.WCAG (Web Content Accessibility   Guidelines) recomendações para   acessibili...
W3C – WAI   Web Accessibility Initiative1.WCAG2.UAAG (The User Agent Accessibility   Guidelines) diretrizes de   acessibil...
W3C – WAI   Web Accessibility Initiative1.WCAG2.UAAG3.ATAG (Authoring Tool Accessibility   Guidelines) ferramentas de cria...
W3C – WAI   Web Accessibility Initiative1.WCAG2.UAAG3.ATAG4.ARIA (Accessible Rich Internet   Applications) Aplicações Inte...
Principais barreiras de    acessibilidade
ImagensRecomendação 1.1 Alternativas em Texto(Referências no WCAG 1.0 e WCAG 2.0) :Fornecer alternativas em texto para qua...
ImagensObs.: Deve ser fornecido um equivalente textual   para a imagens. A descrição deve ser a          melhor e menor po...
Imagens e links<a href=¨#¨>                </a>
Imagens e links              <a href=¨#¨>          <img src=http://[…]xxx.jpgalt=“70 Anos de Pelé – fotos e vídeos”       ...
Imagem com descrição ineficienteBanner do MCA - Módulo Criança e Adolescente onde a descrição da imagem é apenas a sigla  ...
Elementos sem descrição textualadequada (imagens, flash, etc.)
Links
Links: identificação de destinoRecomendação 13.1 (Referência no WCAG 1.0):Identifique claramente o alvo de cada link.Recom...
Links
“Clique aqui”, “Saiba mais”, “veja Mais”… 41.700.000 respostas  para “clique aqui” no Google.
Links          Saída        acessível
Links       Link no título da chamada            com cara de link.S
Links        Title aplicado ao link.S
Se ao entrar no link o usuário for    desligado do site corrente.- Links que abrem novos sites sem que o usuário        no...
... <li><a href="http://.../serialization/"><span lang="en">Building AccessibleWebsites</span>.<img src="novo_site.gif" al...
Se ao entrar no link o usuário fordesligado do site corrente em uma           nova janela.- Essa prática não é recomendada...
... <li><a href="http://.../serialization/"><span lang="en">Building AccessibleWebsites</span>.<img src="novo_site.gif" al...
Links para formatos diferentes do               HTML.- Links para arquivos em PDF, DOC, XLS, PNG,entre outros, sem a devid...
Quando não se tem ideia:         Clique aqui          Saiba mais        Continue lendo          Veja mais
Quando somos surpreendidos:        Conheça a legislação      Leia 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 ...
Sem surpresas e poluição                      Faça download da legislação                    Baixe aqui o manual do produt...
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 produtoPara baixar:Selecione um formato     Baixar o Manual  PDF – tamanho 1.5 Mb  HTML...
Links dependentes de scriptRecomendação 6.3 (Referência no WCAG 1.0) : Certifique-se que as páginas são acessíveise usávei...
Visão do inferno<a href=“javascript:meuFruFruFavorito();”style=“color:#900;”>Clique aqui!!!</a>E esse exemplo não é dos pi...
Mundo (quase) idealHTML<a href=“/algo.html” id=“frufru”>Meu frufru favorito</a>CSS#frufru{   color:#900;}JavaScriptvar fru...
Links e campos de formulários que nãose parecem como tal.
Design pesado e com poucos espaçosentre elementos.Uso de tecnologias em desuso e poucoacessívels
Idioma
Idioma Identificar claramente quaisquermudanças na linguagem natural do  texto ou equivalentes textuais.Recomendação 4.1 (...
Idioma<ul class="topo_idioma"><li><a href="http://www.xyz.com/en/">    <span Lang="en"> English </span></a></li><li><li><a...
- Uso de aspectos de  apresentação para veicularinformação (cores, disposição       na página, etc.)
- Contraste insuficiente
Baixo contraste.
Baixo contraste e informações com focoem cores
CAPTCHA
CAPTCHA                caPTcHaImagem: http://www.slideshare.net/jared_w_smith/web-accessibility-gone-wild-now-even-more-wi...
Captcha   http://sam.zoy.org/pwntcha/
Captcha(solução inacessível e insegura)    (http://www.webvisum.com/en/main/download)
CAPTCHA and BBC iD    http://www.bbc.co.uk/blogs/bbcinternet/2010/10/captcha_and_bbc_id.htmlCAPTCHA, herói ou vilão?http:/...
Semântica
Semântica Validação automática nãogarante uma boa semântica
Navegação
Navegação      1) Semântica:   Headers: <H1>...<H6>  Parágrafos: <p>texto</p>    Listas: <ul><ol><dl> Tabelas: <table>...<...
NavegaçãoRecomendação 2.4 Navegável (Referência noWCAG 2.0): Fornecer formas de ajudar osusuários a navegar, localizar con...
Navegação O primeiro elemento ativo da página deve ser   um link (salto) que nos permita alcançar       diretamente o cont...
Navegação1)Salto visível
Navegação2)Salto visível com focohttp://webstanderds.org
NavegaçãoAtalhos para principais áreas do siteRecomendação 9.5 (Referência no WCAG 1.0):Providencie teclas de atalho para ...
NavegaçãoSão três os tipos de teclas de atalho na Web:- teclas de atalho dos navegadores: como não há uma    padronização ...
Navegação<a href="pesquisa.html" title="tecla de   atalho [1] para pesquisa"   ACCESSKEY="1">Pesquisa [1]</a>
NavegaçãoNavegação e orientação:Recomendação 2.4 Navegável (Referência noWCAG 2.0): Fornecer formas de ajudar osusuários a...
NavegaçãoAlgumas regiões navegáveis com Landmark ARIA:banner – normalmente é utilizado como a região do cabeçalho do   sit...
NavegaçãoLandmark ARIA:<div role="banner"> [Conteúdo do cabeçalho]  </div>   <div role="navigation"> [Navegação] </div><di...
Accessible Rich Internet Applications                               ARIA NOW       HTML 4 + ARIA                          ...
Navegação pelo teclado - barreiras:           dropdown           Keyboard Accessibility for Web Applications  http://snook...
Menu DropDown O Professor Maurício Samy Silva, em seu livroConstruindo sites com CSS e (X)HTML, propõeuma solução para um ...
Menu expansívelTutorial - Accessible expanding and collapsing menuhttp://www.456bereastreet.com/archive/200705/accessible_...
Erro ao utilizar REFRESHRecarregar a página automáticamente:<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-eq...
Erro ao utilizar REFRESH
Utilizar o evento onChange em combos (menus                   de seleção)  Recomendação 8.1 (Referência no WCAG 1.0) : Cri...
Utilizar o evento onChange em combos (menus                   de seleção) Quando um usuário com deficiência visual ou moto...
Utilizar o evento onChange em combos (menus                   de seleção)
Eevento onChange em combosSolução 1: Retirar o evento onchange, permitindo assim anavegação via teclado pelas opções da co...
Formulários
Formulários  Fieldset- <form action="blabla.htm">- <fieldset>- Nome <input type="text"><br>- Endereço <input type="text">...
Formulários  legend- <form action="blabla.htm">- <fieldset>   <legend>Dados Pessoais</legend>- Nome <input type="text"><b...
Formulários  label- <form action="blabla.htm">- <fieldset>   <legend>Dados Pessoais</legend>- <label for=“non">    Nome <...
<form action="blabla.htm">-    <fieldset>-    <legend>Dados Pessoais</legend>-    <label for="non">-    Nome <input type="...
Formulários  optgroup<form id="form" method="post" action=""><p>    <label for="lista-de-mercado">     Lista de Mercado:<...
Formulários  optgroup
TabelasUso errado dos elementos HTML como           tabelas e DIVs. Recomendação 5.3. (Referência no WCAG 1.0): Não use ta...
Tabelas<table><tr>   <td>Janeiro</td>   <td>Fevereiro</td>   <td>Março</td></tr><tr>   <td>10</td>   <td>15</td>   <td>25<...
Tabelas - summary<table summary="Vendas de bananas no primeirotrimestre 2011 - tabela com 2 linhas e 3 colunas"><tr>   <td...
Tabelas - caption<table summary="Vendas de bananas no primeirotrimestre 2011 - tabela com 2 linhas e 3 colunas"><caption>V...
Tabelas – id/headers<table summary="Vendas de bananas no primeirotrimestre 2011 - tabela com 2 linhas e 3 colunas"><captio...
Tabelas – scope/col/row<table summary="Vendas de bananas no primeirotrimestre 2011 - tabela com 2 linhas e 3 colunas"><cap...
Performance
http://www.websiteoptimization.com/services/analyze/
Portal Brasil  GTMETRIX: http://gtmetrix.com
MODALinacessível…
Mudança de foco            (lightbox e lightwindows) Mudanças de foco causam desorientação e problemas   de navegação. U...
Modal acessível           (prática)http://webhipster.com/testing/accessibi        lity/modal-dialog-latest/
Players de vídeo e áudio.
Principais barreiras de acessibilidade em vídeo:• Os controles do player de vídeo são   inacessíveis pelo teclado.• Os con...
• Os vídeos não possuem audiodescrição.• Os vídeos não possuem legendas.• Os vídeos não possuem legenda oculta    ("closed...
Validação de   Acessibilidade Globo em ambiente futurista.
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 AcessibilidadeAvaliação automática de contraste.
Teste de contrastehttp://www.vischeck.com/vischeck/ (teste de imagens e sites)
Validação de AcessibilidadeAvaliação humana por especialistas e usuários:Aplicação de lista de verificação do WCAG por   ...
Para onde caminha a   acessibilidade
HTML5 WAI ARIAMultimídia  Mobile  Touch
Obrigado!Horácio Soareshoracio@digitalacesso.comhoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5...
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Webinar: Acessibilidade Web para desenvolvedores
Upcoming SlideShare
Loading in...5
×

Webinar: Acessibilidade Web para desenvolvedores

1,390

Published on

Apresentação utilizada no Webinar do iMastersPRO dia 23 de agosto de 2012

Published in: Technology
3 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,390
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
56
Comments
3
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Webinar: Acessibilidade Web para desenvolvedores"

  1. 1. Agosto 2012
  2. 2. Horácio Soareshoracio@digitalacesso.comhoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares
  3. 3. Acessibilidade me lembra?
  4. 4. Acessibilidade para quem?
  5. 5. Todos nós...
  6. 6. Quem mais sofre com a falta de acessibilidade?
  7. 7. Marta e suas amigas…
  8. 8. 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.
  9. 9. Calvin, pouca experiência e medo do computadorHomem com muito medo olhando por cima de um notebook.
  10. 10. 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
  11. 11. E além desses 5 grupos?
  12. 12. Gabriel compenetrado, olhando para o Agora ele está olhando e monitor e clicando com o mouse. brincando como teclado. Gabriel, linguagem em desenvolvimento...
  13. 13. Max, com tendinite, usando o mousecom a mão trocada. Homem com expressão de desespero, usando o mouse com a mão esquerda
  14. 14. Como o Luli disse no Digitalks no Rio em 2012: “Nesse mundo Mobile, somostodos daltónicos e sofremos do Mal de Parkinson”
  15. 15. “design for mobile people,......not for mobile device” Foto: Rosenfield Media
  16. 16. Todos nós na primeira experiência. Um criança com camisa social e gravata em frente a um notebook
  17. 17. E finalmente, o bilionário cego!!! Cifrão desenhado com moedas douradas
  18. 18. 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.
  19. 19. Estatísticas no Brasil
  20. 20. Estatística: segundo IBGE noBrasil (2000) 180 milhões de habitantes; 24,3 milhões de pessoas com deficiência; 15 milhões de pessoas com mais de 65 anos; 5,4 milhões de pessoas com mais de 65 anos e que já possuem alguma deficiência.
  21. 21. Censo 2010
  22. 22. Dos cerca de 190 milhões debrasileiros, aqueles com pelo menosuma deficiência, seja visual, auditiva,motora ou mental, somam 45 milhões (23,9%).
  23. 23. Leis de acessibilidade
  24. 24. Decreto Leinº 5.296 (dez/04)
  25. 25. Decreto Lei nº 6.949 (ago/09), onde a convenção da ONU ganhou força de lei.
  26. 26. Como anda a acessibilidade digital no Brasil?
  27. 27. Motivação pelo decreto de lei 5296Resultado: acessibilidade para inglês ver.
  28. 28. Estatísticas do W3C 2,5% em 2010 5% em 2011 Sem erros de validaçãoautomática de HTML, CSS e acessibilidade.
  29. 29. Acessibilidade WebE quais são os custos?
  30. 30. • Curva de aprendizagem• Alto custo no redesign• Baixo em novos projetos• Diminui com tempo• Validação• Manutenção• Melhoria contínua• Mudança de cultura
  31. 31. Qual é o custo da qualidade?
  32. 32. E os benefícios?
  33. 33. Possibilidade de atingir 100% do público alvo;
  34. 34. Atender melhor todas as pessoas
  35. 35. Fidelizar clientes Homem de terno comemorando
  36. 36. Mais fácil de usar e aprender
  37. 37. Proteção contraprocessos pela falta da acessibilidade
  38. 38. Manutenção mais rápida e barata, melhor performance… Visualizar os benefícios da acessibilidade
  39. 39. Valorização da Diversidade eResponsabilidade Social. Mãos entrelaçadas
  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. Um caminho para acessibilidade vem da busca pelas melhores IDADES
  43. 43. IDADES?
  44. 44. }Acessibil IDADE
  45. 45. }Acessibil Usabil IDADE
  46. 46. Comercial Mercado Livre “Eu compro o que quiser, 2011 senão quiser, não compro”Comercial do Mercado Livre 2011
  47. 47. }Acessibil UsabilSimplic IDADE
  48. 48. ESPN Brasil– abril 2010
  49. 49. XESPN Brasil– abril 2010
  50. 50. 10 princípios de UX do GooglePrincípio 3. O simples é poderoso.
  51. 51. Em uma interface perfeita para aspessoas, elas nunca deveriam errar, principalmente no mundo mobile…
  52. 52. } Acessibil Usabil SimplicInterativ IDADE
  53. 53. }Acessibil Usabil Simplic Interativ Veloc IDADE
  54. 54. X
  55. 55. X
  56. 56. 10 princípios de UX do GooglePrincípio 2 - cada milisegundo importa. Melhor definição de milisegundo?
  57. 57. } Acessibil Usabil Simplic Interativ Veloc IDADEEncontrabil
  58. 58. } Acessibil Usabil Simplic Interativ VelocEncontrabil IDADE Atrativ
  59. 59. 10 princípios de UX do GooglePrincípio 8 – agrade aos olhos sem distrair a mente
  60. 60. } Acessibil Usabil Simplic Interativ VelocEncontrabil IDADE Atrativ Util
  61. 61. 10 princípios de UX do GooglePrincípio 1 – foque nas pessoas: suas vidas, trabalho, sonhos.
  62. 62. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  63. 63. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  64. 64. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  65. 65. Observação e identificação de um problema...
  66. 66. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  67. 67. Case apresentado por Rodrigo Tigre, POPULIS - Content Marketing Digitalks Rio de Janeiro Abril2012
  68. 68. } Acessibil Usabil Simplic Interativ VelocEncontrabil IDADE Atrativ Util Facil
  69. 69. Acessibil UsabilSimplic
  70. 70. } Acessibil Usabil Simplic Interativ VelocEncontrabil IDADE Atrativ Util Facil Portabil …
  71. 71. A melhor idade vem da:} Investigação Observação Colaboração Análise Avaliação Validação
  72. 72. By Erico Fileno
  73. 73. Diretrizes de acessibilidade
  74. 74. Recomendações para acessibilidade do conteúdo da Web 1.0 e 2.0 do W3CWCAG Web Content Accessibility Guidelines WCAG 1.0 – 05 de maio de 1999Em português:http://www.utad.pt/wai/wai-pageauth.html WCAG 2.0 – 11 de dezembro de 2008http://www.ilearn.com.br/TR/WCAG20/
  75. 75. EMAG 3.0http://www.governoeletronico.gov.br/acoes-e-projetos/e-MAG
  76. 76. Iniciativas deAcessibilidade
  77. 77. W3C – WAI Web Accessibility Initiative1.WCAG (Web Content Accessibility Guidelines) recomendações para acessibilidade do conteúdo da Web.2.UAAG3.ATAG4.ARIAImagem de bonecos representando pessoas de mãos dadas .
  78. 78. W3C – WAI Web Accessibility Initiative1.WCAG2.UAAG (The User Agent Accessibility Guidelines) diretrizes de acessibilidade para navegadores e tecnologias assistivas.3.ATAG4.ARIA
  79. 79. W3C – WAI Web Accessibility Initiative1.WCAG2.UAAG3.ATAG (Authoring Tool Accessibility Guidelines) ferramentas de criação de páginas/conteúdo Web.4.ARIA
  80. 80. W3C – WAI Web Accessibility Initiative1.WCAG2.UAAG3.ATAG4.ARIA (Accessible Rich Internet Applications) Aplicações Internet Ricas e Acessíveis.
  81. 81. Principais barreiras de acessibilidade
  82. 82. ImagensRecomendação 1.1 Alternativas em Texto(Referências no WCAG 1.0 e WCAG 2.0) :Fornecer alternativas em texto para qualquerconteúdo não textual.
  83. 83. ImagensObs.: Deve ser fornecido um equivalente textual para a imagens. A descrição deve ser a melhor e menor possível.
  84. 84. Imagens e links<a href=¨#¨> </a>
  85. 85. Imagens e links <a href=¨#¨> <img src=http://[…]xxx.jpgalt=“70 Anos de Pelé – fotos e vídeos” width=XXX height=XXX /> </a>
  86. 86. Imagem com descrição ineficienteBanner do MCA - Módulo Criança e Adolescente onde a descrição da imagem é apenas a sigla “MCA”.
  87. 87. Elementos sem descrição textualadequada (imagens, flash, etc.)
  88. 88. Links
  89. 89. Links: identificação de destinoRecomendação 13.1 (Referência no WCAG 1.0):Identifique claramente o alvo de cada link.Recomendação 2.4 Navegável (Referência noWCAG 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 ondeestão.
  90. 90. Links
  91. 91. “Clique aqui”, “Saiba mais”, “veja Mais”… 41.700.000 respostas para “clique aqui” no Google.
  92. 92. Links Saída acessível
  93. 93. Links Link no título da chamada com cara de link.S
  94. 94. Links Title aplicado ao link.S
  95. 95. Se ao entrar no link o usuário for desligado do site corrente.- Links que abrem novos sites sem que o usuário note que foi levado para outro site.
  96. 96. ... <li><a href="http://.../serialization/"><span lang="en">Building AccessibleWebsites</span>.<img src="novo_site.gif" alt="abre novosite"></a><br>Excelente livro em inglês - versão digital.</li> ...
  97. 97. Se ao entrar no link o usuário fordesligado 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.
  98. 98. ... <li><a href="http://.../serialization/"><span lang="en">Building AccessibleWebsites</span>.<img src="novo_site.gif" alt="novo site emnova janela"></a><br>Excelente livro em inglês - versão digital.</li> ...
  99. 99. Links para formatos diferentes do HTML.- Links para arquivos em PDF, DOC, XLS, PNG,entre outros, sem a devida descrição do tipo de arquivo que será baixado e seu tamanho.  
  100. 100. Quando não se tem ideia: Clique aqui Saiba mais Continue lendo Veja mais
  101. 101. Quando somos surpreendidos: Conheça a legislação Leia o manual do produto
  102. 102. Quando falta informação: Faça download da legislação Baixe aqui o manual do produto
  103. 103. Sem surpresas! Faça download da legislação (formato doc, 1.32 mb)Baixe aqui o manual do produto (formato pdf, 2.47 mb)
  104. 104. Sem surpresas e poluição Faça download da legislação Baixe aqui o manual do produto
  105. 105. Sem surpresas e poluição Faça download da legislação Formato DOC - 1.32 Mb Baixe aqui o manual do produto
  106. 106. 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. Essa recomendação não é válida para MOBILE.● Informações relevantes não devem ser incluídas via atribulo TITLE.
  107. 107. 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)
  108. 108. Mundo ideal sem poluiçãoManual do produtoPara baixar:Selecione um formato  Baixar o Manual PDF – tamanho 1.5 Mb HTML – tamanho 0.7 Mb TXT – tamanho 0.5 Mb
  109. 109. Links dependentes de scriptRecomendação 6.3 (Referência no WCAG 1.0) : Certifique-se que as páginas são acessíveise usáveis mesmo quando as tecnologiasutilizadas não são suportadas ou seencontram desligadas.Recomendação 4.1 (Referência no WCAG 2.0) : Maximizar a compatibilidade com atuais efuturos agentes de usuário, incluindotecnologias assistivas.
  110. 110. Visão do inferno<a href=“javascript:meuFruFruFavorito();”style=“color:#900;”>Clique aqui!!!</a>E esse exemplo não é dos piores...
  111. 111. Mundo (quase) idealHTML<a href=“/algo.html” id=“frufru”>Meu frufru favorito</a>CSS#frufru{ color:#900;}JavaScriptvar frufru = document.getElementById(‘frufru’);function meuFruFruFavorito() { [codigo]}frufru.onclick = meuFruFruFavorito;frufru.onkeypress = meuFruFruFavorito;
  112. 112. Links e campos de formulários que nãose parecem como tal.
  113. 113. Design pesado e com poucos espaçosentre elementos.Uso de tecnologias em desuso e poucoacessívels
  114. 114. Idioma
  115. 115. Idioma Identificar claramente quaisquermudanças na linguagem natural do texto ou equivalentes textuais.Recomendação 4.1 (Referência no WCAG 1.0) :Identifique claramente alterações ocorridas noidioma do texto do documento e em qualquerequivalente textual.Recomendação 3.1 (Referência no WCAG 2.0) :Legível: Tornar o conteúdo de texto legível ecompreensível - 3.1.2 Linguagem das Partes.
  116. 116. Idioma<ul class="topo_idioma"><li><a href="http://www.xyz.com/en/"> <span Lang="en"> English </span></a></li><li><li><a href="http://www.xyz.com/es/"> <span Lang="es"> Español </span></a></li><li>...</ul>
  117. 117. - Uso de aspectos de apresentação para veicularinformação (cores, disposição na página, etc.)
  118. 118. - Contraste insuficiente
  119. 119. Baixo contraste.
  120. 120. Baixo contraste e informações com focoem cores
  121. 121. CAPTCHA
  122. 122. CAPTCHA caPTcHaImagem: http://www.slideshare.net/jared_w_smith/web-accessibility-gone-wild-now-even-more-wilder
  123. 123. Captcha http://sam.zoy.org/pwntcha/
  124. 124. Captcha(solução inacessível e insegura) (http://www.webvisum.com/en/main/download)
  125. 125. CAPTCHA and BBC iD http://www.bbc.co.uk/blogs/bbcinternet/2010/10/captcha_and_bbc_id.htmlCAPTCHA, herói ou vilão?http://acessodigital.net/art_captcha-heroi-ou-vilao.html
  126. 126. Semântica
  127. 127. Semântica Validação automática nãogarante uma boa semântica
  128. 128. Navegação
  129. 129. Navegação 1) Semântica: Headers: <H1>...<H6> Parágrafos: <p>texto</p> Listas: <ul><ol><dl> Tabelas: <table>...</table>Formulários: <form>...</form>
  130. 130. NavegaçãoRecomendação 2.4 Navegável (Referência noWCAG 2.0): Fornecer formas de ajudar osusuários a navegar, localizar conteúdos edeterminar o local onde estão. - 2.4.1 IgnorarBlocos: Disponibilizar um mecanismo para ignorarblocos de conteúdo que são repetidos.
  131. 131. Navegação O primeiro elemento ativo da página deve ser um link (salto) que nos permita alcançar diretamente o conteúdo principal.<a href=”#conteudo” class=”salto”>Salto para conteúdo</a><h2><a name=”conteudo” id=”conteudo”>Título do H2</a></h2><a name=”conteudo” id=”conteudo”></a>
  132. 132. Navegação1)Salto visível
  133. 133. Navegação2)Salto visível com focohttp://webstanderds.org
  134. 134. NavegaçãoAtalhos para principais áreas do siteRecomendação 9.5 (Referência no WCAG 1.0):Providencie teclas de atalho para linksimportantes.Recomendação 2.4 Navegável (Referência noWCAG 2.0): Fornecer formas de ajudar osusuários a navegar, localizar conteúdos edeterminar o local onde estão. - 2.4.1 IgnorarBlocos: Disponibilizar um mecanismo paraignorar blocos de conteúdo que são repetidos.
  135. 135. NavegaçãoSão três os tipos de teclas de atalho na Web:- teclas de atalho dos navegadores: como não há uma padronização entre eles, cada browser tem seu próprio grupo de atalhos.- teclas de atalho próprias aos leitores de tela e outras tecnologias assistivas.- teclas de atalhos próprias ao site.
  136. 136. Navegação<a href="pesquisa.html" title="tecla de atalho [1] para pesquisa" ACCESSKEY="1">Pesquisa [1]</a>
  137. 137. NavegaçãoNavegação e orientação:Recomendação 2.4 Navegável (Referência noWCAG 2.0): Fornecer formas de ajudar osusuários a navegar, localizar conteúdos edeterminar o local onde estão.Para facilitar a navegação pelas diferentes áreas do site, é recomendada a divisão da página em regiões navegáveis diretamente com leitores de tela. Para tal sugerimos a utilização de ARIA Landmark Roles: http://www.w3.org/TR/wai-aria/roles#landmark_roles ,- É um recurso já implementado em 2 leitores de tela usados no Brasil - Jaws (muito usado) e NVDA (aberto e gratuito).
  138. 138. NavegaçãoAlgumas 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 com conteúdo centrado no assunto/tema da página Web.navigation – área de navegação do site.
  139. 139. NavegaçãoLandmark 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 principal] </div>
  140. 140. Accessible Rich Internet Applications ARIA NOW HTML 4 + ARIA HTML5 + ARIAhttp://www.abilitynet.org.uk/accessibility2/wp-content/uploads/2009/09/HTML5_Accessibility_faulkner.ppt
  141. 141. Navegação pelo teclado - barreiras: dropdown Keyboard Accessibility for Web Applications http://snook.ca/archives/accessibility_and_usability/keyboard-accessibility-for-web-apps
  142. 142. Menu DropDown O Professor Maurício Samy Silva, em seu livroConstruindo sites com CSS e (X)HTML, propõeuma solução para um menu em cascata acessível via teclado: http://livrocss.com.br/cap_09/arquivo_9.24-a.html
  143. 143. Menu expansívelTutorial - Accessible expanding and collapsing menuhttp://www.456bereastreet.com/archive/200705/accessible_expanding_and_collapsing_menu/
  144. 144. Erro ao utilizar REFRESHRecarregar a página automáticamente:<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="refresh"content="300" />...
  145. 145. Erro ao utilizar REFRESH
  146. 146. Utilizar o evento onChange em combos (menus de seleção) Recomendação 8.1 (Referência no WCAG 1.0) : Criar elementos de programação, tais como programas interpretáveis e applets, diretamente acessíveis pelas tecnologias de apoio ou com elas compatíveis. Recomendação 2.1 (Referência no WCAG 2.0) : Acessível por Teclado: Fazer com que toda a funcionalidade fique disponível a partir do teclado. Recomendação 3.2 (Referência no WCAG 2.0) : Previsível: 3.2.1 Em Foco: Quando um componente recebe o foco, ele não inicia uma alteração de contexto.
  147. 147. Utilizar o evento onChange em combos (menus de seleção) Quando um usuário com deficiência visual ou motora (que usa o teclado para navegar) utiliza o evento onchange num menu select (combo box), a primeira opção é selecionada automaticamente sem que o usuário a tenha escolhido, antes que o usuário possa conhecer as opções disponíveis.
  148. 148. Utilizar o evento onChange em combos (menus de seleção)
  149. 149. Eevento onChange em combosSolução 1: Retirar o evento onchange, permitindo assim anavegação via teclado pelas opções da combo box. Paraconfirmar a seleção do item, deve ser disponibilizado umsubmit (botão de Ok).
  150. 150. Formulários
  151. 151. Formulários  Fieldset- <form action="blabla.htm">- <fieldset>- Nome <input type="text"><br>- Endereço <input type="text">- </fieldset>- </form>
  152. 152. Formulários  legend- <form action="blabla.htm">- <fieldset> <legend>Dados Pessoais</legend>- Nome <input type="text"><br>- Endereço <input type="text">- </fieldset>- </form>
  153. 153. Formulários  label- <form action="blabla.htm">- <fieldset> <legend>Dados Pessoais</legend>- <label for=“non"> Nome <input type="text" id=“non">- </label>- <label for=“end"> Endereço <input type="text“id=“end">- </label>- </fieldset>- </form>
  154. 154. <form action="blabla.htm">- <fieldset>- <legend>Dados Pessoais</legend>- <label for="non">- Nome <input type="text" id="non">- </label>- <label for="end">- Endereço <input type="text" id="end">- </label>- <fieldset><legend>Sexo</legend>- <label for="m"><input type="radio" name="g" id="m">Masculino</label>- <label for="f">- <input type="radio" name="g” id="f">Feminino</label>- </fieldset>- </fieldset>- </form>
  155. 155. Formulários  optgroup<form id="form" method="post" action=""><p> <label for="lista-de-mercado"> Lista de Mercado:<br /> <select name="select" id="lista-de-mercado"> <option selected="selected" value="1"> Escolha um item</option> <optgroup label="Laticíneos"> <option value="2">Leite desnatado</option> <option value="3">Queijo ralado</option> <option value="4">Queijo prato</option> </optgroup> <optgroup label="Verduras"> <option value="6">Alface</option> <option value="7">Alho</option> </optgroup> </select> </label></form>
  156. 156. Formulários  optgroup
  157. 157. TabelasUso errado dos elementos HTML como tabelas e DIVs. Recomendação 5.3. (Referência no WCAG 1.0): Não use tabelas para layout (disposição de páginas) a não ser que a tabela faça sentido quando linearizada. Recomendação 1.3 Adaptável (Referência no WCAG 2.0 – critério 1.3.2 Sequência com Significado): Criar conteúdos que possam ser apresentados de diferentes maneiras sem perder informação ou estrutura.
  158. 158. Tabelas<table><tr> <td>Janeiro</td> <td>Fevereiro</td> <td>Março</td></tr><tr> <td>10</td> <td>15</td> <td>25</td></tr></table>
  159. 159. Tabelas - summary<table summary="Vendas de bananas no primeirotrimestre 2011 - tabela com 2 linhas e 3 colunas"><tr> <td>Janeiro</td> <td>Fevereiro</td> <td>Março</td></tr><tr> <td>10</td> <td>15</td> <td>25</td></tr></table>
  160. 160. Tabelas - caption<table summary="Vendas de bananas no primeirotrimestre 2011 - tabela com 2 linhas e 3 colunas"><caption>Vendas de bananas - 1o. semestre</caption><tr> <td>Janeiro</td> <td>Fevereiro</td> <td>Março</td></tr><tr> <td>10</td> <td>15</td> <td>25</td></tr></table>
  161. 161. Tabelas – id/headers<table summary="Vendas de bananas no primeirotrimestre 2011 - tabela com 2 linhas e 3 colunas"><caption>Vendas de bananas - 1o. semestre</caption><tr> <th id=“jan">Janeiro</th> <th id=“fev">Fevereiro</th> <th id=“mar">Março</th></tr><tr> <td headers=“jan">10</td> <td headers=“fev">15</td> <td headers=“mar">25</td></tr></table>
  162. 162. Tabelas – scope/col/row<table summary="Vendas de bananas no primeirotrimestre 2011 - tabela com 2 linhas e 3 colunas"><caption>Vendas de bananas - 1o. semestre</caption><tr> <th scope=“col”>Janeiro</th> <th scope=“col”>Fevereiro</th> <th scope=“col”>Março</th></tr><tr> <td>10</td> <td>15</td> <td>25</td></tr></table>
  163. 163. Performance
  164. 164. http://www.websiteoptimization.com/services/analyze/
  165. 165. Portal Brasil  GTMETRIX: http://gtmetrix.com
  166. 166. MODALinacessível…
  167. 167. Mudança de foco (lightbox e lightwindows) Mudanças de foco causam desorientação e problemas de navegação. Usuários não tem a menor idéia de como achar o novo conteúdo atualizado. As mudanças de foco impedem que usuários tenham uma visão completa da página. - Building a Better Lightbox (recomendações de usabilidade) http://www.habdas.org/2009/03/29/building-a-better-lightbox/
  168. 168. Modal acessível (prática)http://webhipster.com/testing/accessibi lity/modal-dialog-latest/
  169. 169. Players de vídeo e áudio.
  170. 170. Principais barreiras de acessibilidade em vídeo:• Os controles do player de vídeo são inacessíveis pelo teclado.• Os controles do player de vídeo podem ser acessados pelo teclado, mas não apresentam rótulos adequados.• Os vídeos incluídos diretamente na página, com o uso de um player externo, começam a tocar assim que a página é carregada.• ramente sobre esta função..
  171. 171. • Os vídeos não possuem audiodescrição.• Os vídeos não possuem legendas.• Os vídeos não possuem legenda oculta ("closed caption").• Os vídeos não possuem transcrição.• Quando um vídeo é disponibilizado para download, o respectivo link não informa claramente sobre esta função..
  172. 172. Validação de Acessibilidade Globo em ambiente futurista.
  173. 173. Validação de AcessibilidadeValidação automática dos Padrões Web: XHTML e CSS.
  174. 174. Validador W3C – HTML/XHTML http://validator.w3.org/
  175. 175. Validador W3C – CSS http://jigsaw.w3.org/css-validator/
  176. 176. Validação de AcessibilidadeValidação automática e semi-automática de acessibilidade.
  177. 177. Da Silvahttp://www.dasilva.org.br/
  178. 178. Access Monitorhttp://www.acessibilidade.gov.pt/accessmonitor/
  179. 179. Lista de validadores indicados pelo WAI: http://www.w3.org/WAI/ER/tools/complete
  180. 180. Validação de AcessibilidadeAvaliação automática de contraste.
  181. 181. Teste de contrastehttp://www.vischeck.com/vischeck/ (teste de imagens e sites)
  182. 182. 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.
  183. 183. Para onde caminha a acessibilidade
  184. 184. HTML5 WAI ARIAMultimídia Mobile Touch
  185. 185. Obrigado!Horácio Soareshoracio@digitalacesso.comhoracio.soares@internativa.com.brfacebook.com/internativabrasil(21) 9925-5404 - @horaciosoares
  1. A particular slide catching your eye?

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

×