Acessibilidade na WEB

  • 344 views
Uploaded on

Apresentação de Reinaldo Ferraz durante a VI Semana de Tecnologia da Fatec de Carapicuíba.

Apresentação de Reinaldo Ferraz durante a VI Semana de Tecnologia da Fatec de Carapicuíba.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
344
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Acessibilidade na webO caminho das pedras para construir páginas acessíveis 22 de outubro de 2012 Semana de Tecnologia – Fatec Carapicuíba Reinaldo Ferraz – W3C.br
  • 2. Um pouco do W3C
  • 3. "O poder da Web está na suauniversalidade. O acesso por todos,independentemente da deficiência é umaspecto essencial." Tim Berners-Lee, inventor da Web
  • 4. O W3C no Brasil
  • 5. http://premio.w3c.br/
  • 6. Acessibilidade, para quem?
  • 7. Foto: everystockphoto.com - namida-k Cegos – Daltônicos - Baixa visão
  • 8. Foto: everystockphoto.com - jessicafm Surdos
  • 9. Mobilidade reduzida
  • 10. Acessibilidade na web Porque não desenvolvemos web sites acessíveis?Algumas hipóteses:
  • 11. Desconhecimento
  • 12. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  • 13. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  • 14. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  • 15. http://random.irb.hr/signup.phphttp://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  • 16. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  • 17. Acessibilidade na webPreconceito
  • 18. Já testou o seu site? VídeoO mundo adaptado
  • 19. Público alvo
  • 20. É muito caro! O prazo é curto!Dá muito trabalho! Não sei fazer!
  • 21. Pequenos testes, grandes descobertas
  • 22. Já testou o seu site? VídeoArquitetura inclusiva
  • 23. Acessível via teclado Foto: Flickr.com - Baddog_
  • 24. Já testou o seu site?
  • 25. Já testou o seu site? João étetraplégico
  • 26. Vídeos com legendas
  • 27. Já testou o seu site?Michele é surda
  • 28. Já testou o seu site?Sem CSSe imagens Foto: Flickr.com - Baddog_
  • 29. Ou mesmo sem monitor
  • 30. Já testou o seu site?Carlos é cego
  • 31. Estatísticas Pessoas com deficiência no Brasil 24% 45.623.910 pessoas Censo 2010 Fonte: IBGEFonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm
  • 32. Acessibilidade na web Pessoas com deficiência visual no Brasil 35.791.488 Censo 2010Fonte: http://www.ibge.gov.br/
  • 33. Acessibilidade na web Pessoas com deficiência visual no BrasilNão consegue Grande Alguma(enxergar) de dificuldade dificuldade modo algum 528.624 6.056.684 29.206.180 Censo 2010Fonte: http://www.ibge.gov.br/
  • 34. Acessibilidade na web Pessoas com deficiências motoras no Brasil 13.273.969 Censo 2010Fonte: http://www.ibge.gov.br/
  • 35. Acessibilidade na webBeneficia pessoas com deficiência
  • 36. Acessibilidade na web: A quem se destina?Acessibilidade é para todos !
  • 37. Usuários de Dispositivos Móveis
  • 38. Deficiência temporária
  • 39. Medo de usar o computadorFoto: everystockphoto.com - Violator3
  • 40. Acessibilidade na web Motivos pelos quais nunca utilizou a internet 57% Falta de habilidade com o computador/internet Pessoas que nunca acessaram a internet, mas usaram um computador. Fonte: Pesquisa TIC Domicílios 2011 – CGI.brFonte: http://www.cetic.br/
  • 41. Início de aprendizadoNosso primeiro contato
  • 42. Acessibilidade na webPROPORÇÃO DE INDIVÍDUOS QUE JÁ ACESSARAM A INTERNET Indivíduos de 10 a 12 anos de idade 75% Fonte: Pesquisa TIC Domicílios 2011 – CGI.brFonte: http://www.cetic.br/
  • 43. Acessibilidade na web FREQÜÊNCIA DO ACESSO INDIVIDUAL À INTERNET Indivíduos de 10 a 12 anos de idade 57%Acessam a internet todos os dias Fonte: Pesquisa TIC Domicílios 2011 – CGI.br
  • 44. Idade Avançada Nós, daqui alguns anos
  • 45. Acessibilidade na web Número de pessoas com 60 anos ou mais no mundo:1950 – 205 milhões2000 – 606 milhões Estimativa para 2050Quase 2 bilhões de pessoascom mais de 60 anos.(+ de 20% da população) Foto: Flickr.com - Jacob BøtterFonte: http://www.un.org/esa/population/publications/worldageing19502050/
  • 46. % de pessoas com 60 anos ou mais que nunca acessou a internet100 9895 94 9490 888580 2008 2009 2010 2011 Fonte: Pesquisa TIC Domicílios – CETIC.br
  • 47. Acessibilidade na web A5 - TIPO DE CONEXÃO PARA ACESSO À INTERNET NO DOMICÍLIO Percentual sobre o total de domicílios com acesso à Internet Acesso TOTAL Percentual (%) discado Banda larga fixa TOTAL BRASIL 10 68 Fonte: Pesquisa TIC Domicílios 2011 – CGI.brFonte: http://www.cetic.br/
  • 48. Acessibilidade na webA6 - VELOCIDADE DA CONEXÃO À INTERNET UTILIZADA NO DOMICÍLIOPercentual sobre o total de domicílios com acesso à Internet em que osrespondentes sabem o tipo de conexão que possuem Não 256 Até 1 Mbps 2 Mbps 4 Mbps Acima sabe / Percentual Kbps 256 a2 a4 a8 de Não (%) a1 Kbps Mbps Mbps Mbps 8 Mbps respond Mbps euTOTALBRASIL 5 29 16 6 5 9 30 Fonte: Pesquisa TIC Domicílios 2011 – CGI.brFonte: http://www.cetic.br/
  • 49. Aplicando acessibilidade O caminho para a acessibilidade na webFoto: everystockphoto.com - Colin Gregory Palmer
  • 50. Aplicando acessibilidade Web Content Accessibility Guidelines (WCAG)Versão 1.0 – 5 de maio de 1999www.w3.org/TR/WCAG10/Versão 2.0 – 11 de dezembro de 2008www.w3.org/TR/WCAG/
  • 51. Futuro da Webhttp://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
  • 52. Futuro da Webhttp://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
  • 53. Futuro da Webhttp://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html
  • 54. WCAG 2.04 Princípios WCAG 2.0 Entendendo as Recomendações Recomendações (12 no total) Critérios de sucesso Como Cumprir os critérios de sucesso Técnicas Entendendo os critérios de sucesso suficientes e aconselhadas
  • 55. Princípio 1: PerceptívelIsto significa que os usuários devem ser capazes de perceber a informação que está sendo apresentada, não podendo ser invisível para todos os seus sentidos.
  • 56. Perceptível• Forneça alternativas de texto para o conteúdo não textual.
  • 57. Considerando perspectivas<img />
  • 58. Considerando perspectivas<img /><img alt="Foto das teclas W, 3 e Cfora do teclado" />
  • 59. Considerando perspectivas<img /><img alt="Foto das teclas W, 3 e Cfora do teclado" /><img src="foto.jpg" alt=“Foto dasteclas W, 3 e C fora do teclado" />
  • 60. Princípio 1: PerceptívelSe o elemento nãotextual necessitar deentrada de dados dousuário
  • 61. Princípio 1: Perceptível ExemplosEm um campo de entrada de texto:<label for="firstname">First name:</label><input type="text" name="firstname" id="firstname">Em um campo checkbox:<input type="checkbox" id="markuplang" name="computerskills“><label for="markuplang">HTML</label> Obs: Elemento Label deve estar posicionado depois dos elementos “input” de type="checkbox" e type="radio"
  • 62. Princípio 1: PerceptívelClicando aqui Aciona aqui
  • 63. Princípio 1: Perceptível Utilizar o elemento o atributo “title” para identificar controles de formulários quando o elemento “label” não puder ser utilizado Exemplo: Campos de texto para números de telefone<fieldset><legend>Phone number</legend><input id="areaCode" title="Area Code" type="text" size="3" value="" ><input id="exchange“ title="First three digits of phone number" type="text“ value="" ><input id="lastDigits“ title="Last four digits of phone number" type="text“ value="" ></fieldset>
  • 64. Princípio 1: Perceptível 71Se o elemento nãotextual deve ser ignoradopelas tecnologiasassistivas?
  • 65. Princípio 1: Perceptível Utilize CSS para incluir imagens decorativas O objetivo desta técnica é fornecer um mecanismo queadicione imagens meramente decorativas sem adicioná-la dentro do conteúdo.<style type="text/css">body { background: url(/images/home-bg.jpg);}</style>
  • 66. Princípio 1: Perceptível 73Utilização de Folhas de Estilo (CSS)<font face=“Arial, Verdana, Helvetica, sans-serif” size=“2”color=“black”>Seu texto</font>body {color: #ffffff;font-family: Arial, Verdana, Helvetica, sans-serif;font-size: 1em;}Seu texto
  • 67. Princípio 1: Perceptível 74Utilização de Folhas de Estilo (CSS) <font></font>< font></font> <font></font>< CSS <font></font> font></font> <font></font> <font></font> <font></font> <font></font> <font></font>< <font></font>< <font></font> font></font> font></font> <font></font> <font></font> <font></font>< <font></font> <font></font> font></font> <font></font> <font></font> <font></font> <font></font> <font></font>< <font></font> font></font> <font></font>< <font></font> font></font> <font></font> <font></font> <font></font>< <font></font> <font></font> font></font> <font></font> <font></font> <font></font> <font></font>
  • 68. Princípio 1: Perceptível 75Utilização de Folhas de Estilo (CSS) <font></font>< font></font> <font></font>< CSS <font></font> font></font> <font></font> <font></font> <font></font> <font></font> <font></font>< <font></font>< <font></font> font></font> font></font> <font></font> <font></font> <font></font>< <font></font> <font></font> font></font> <font></font> <font></font> <font></font> <font></font> <font></font>< <font></font> font></font> <font></font>< <font></font> font></font> <font></font> <font></font> <font></font>< <font></font> <font></font> font></font> <font></font> <font></font> <font></font> <font></font>
  • 69. Princípio 1: PerceptívelTécnicas suficientes Se conteúdo não textual é um CAPTCHA:
  • 70. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  • 71. Perceptível• Forneça alternativas de texto para o conteúdo não textual.• Forneça legendas e alternativas para conteúdo de áudio e vídeo.
  • 72. Princípio 1: PerceptívelProporcionar legendas (open ou closed caption)
  • 73. Princípio 1: PerceptívelProporcionar uma alternativa para a mídia baseadaem tempo Transcrição do vídeo em textoVeja a versão em texto do treinamento
  • 74. Perceptível• Forneça alternativas de texto para o conteúdo não textual.• Forneça legendas e alternativas para conteúdo de áudio e vídeo.• Faça o conteúdo adaptável e disponível para tecnologias assistivas.
  • 75. Princípio 1: Perceptível
  • 76. Tabelas A5 - TIPO DE CONEXÃO PARA ACESSO À INTERNET NODOMICÍLIO Percentual sobre o total de domicílios com acesso àInternet 1 Percentual (%) Modem Tradicional (acesso discado linhatelefônica) Banda Larga 2 Outros NS/NR 3 TOTAL Banda LargaModem digital via linha telefônica (tecnologia DSL) Modem via caboConexão via rádio Conexão via satélite TOTAL BRASIL 20 66 23 25 143 6 10 ÁREA URBANA 19 66 24 26 14 3 6 9 RURAL 21 55 17 14 20 5 816 REGIÕES DO PAÍS SUDESTE 22 65 21 30 11 3 4 10 NORDESTE19 64 12 32 18 1 10 9 SUL 13 71 34 12 22 3 8 10 NORTE 31 49 23 1111 5 14 7 CENTRO-OESTE 13 67 34 18 13 2 8 13 RENDA FAMILIARAté R$465 16 51 14 20 14 3 12 21 R$466-R$930 22 61 18 24 15 4 4 14R$931-R$1395 23 62 22 24 13 2 6 9 R$1396-R$2325 23 63 23 22 15 36 8 R$2326-R$4650 16 75 32 28 11 4 7 4 R$4651 ou mais 12 78 27 3416 1 6 5 CLASSE SOCIAL 4 A 11 81 24 41 14 3 9 3 B 18 71 28 26 13 36 7 C 22 61 19 24 15 3 5 12 DE 26 41 10 15 15 2 3 29
  • 77. Princípio 1: Perceptível<table summary="As duas primeiras colunas databela são as variáveis de cruzamento (por exemplo,Regiões do país) e as subdivisões de cada bloco(por exemplo, sudeste, sul, etc.). As demais colunassão os números percentuais de cada indicador.Informações adicionais para melhor leitura dosdados estão no rodapé de cada tabela.">
  • 78. O FUTURO E O PASSADO DAS TABELAS
  • 79. HTML5“As tabelas não devem ser utilizadas como auxiliares de layout.Historicamente, alguns autores têm abusado das tabelas em HTML,como forma de controlar o seu layout de página. Esse uso não érecomendado, porque as ferramentas que tentam extrair os dadostabulares de tais documentos obtém resultados confusos. Emparticular, os usuários de ferramentas de acessibilidade, comoleitores de tela podem achar muito difícil de navegar em páginas comtabelas usadas para layout.”http://www.w3.org/TR/html5/tabular-data.html#the-table-element
  • 80. Perceptível• Forneça alternativas de texto para o conteúdo não textual.• Forneça legendas e alternativas para conteúdo de áudio e vídeo.• Faça o conteúdo adaptável e disponível para tecnologias assistivas.• Usar contraste suficiente para tornar as coisas fáceis de ver e ouvir.
  • 81. DaltonismoVisão normal
  • 82. DaltonismoProtanopia (Deficiências em vermelho)
  • 83. DaltonismoDeuteranopia (Deficiências em verde)
  • 84. DaltonismoTritanopia (Deficiências em azul)
  • 85. DaltonismoAcromatopsia (Deficiências todas as cores)
  • 86. Daltonismo
  • 87. Você consegue ler este texto.
  • 88. Você consegue ler este texto?
  • 89. Você não consegue ler este texto!
  • 90. Princípio 2: OperávelIsto significa que os usuários devem ser capazes de operar a interface; a interface de interação não pode exigir interação que o usuário não possa executar.
  • 91. Operável• Faça todas as funcionalidades acessíveis via teclado.
  • 92. Princípio 2: OperávelUtilizar o teclado e outras funções específicas do dispositivo <a href="menu.php" onmouseover="swapImageOn(menu)" onfocus="swapImageOn(menu)" onmouseout="swapImageOff(menu)" onblur="swapImageOff(menu)"> <img id="menu" src="menu_off.gif" alt="Menu" /> </a>
  • 93. Operável• Faça todas as funcionalidades acessíveis via teclado.• Não utilize conteúdo que cause convulsões.
  • 94. Operável• Faça todas as funcionalidades acessíveis via teclado.• Não utilize conteúdo que cause convulsões.• Ajude os usuários a navegar e encontrar conteúdo.
  • 95. Princípio 2: OperávelUm link “Pular para o conteúdo principal”
  • 96. Princípio 2: OperávelFornecer elementos de cabeçalho no início de cada seção de conteúdo<H1>Título Principal</H1> <H2>Subtítulo</H2> <H3>Sub-Subtítulo</H3> <H2>Subtítulo</H2> <H3>Sub-Subtítulo</H3> <H4>....</H4>
  • 97. Princípio 3: CompreensívelIsto significa que os usuários devem ser capazes de compreender as informações, bem como o funcionamento da interface do usuário; o conteúdo ou operação não pode ir além de sua compreensão.
  • 98. Princípio 3: Compreensível Definir o idioma da página Usando atributos de idioma no elemento HTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="fr"><head> <title>document écrit en français</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /></head><body> ...document écrit en français</body></html>
  • 99. Princípio 3: Compreensível Definir o idioma da página Usando atributos de idioma no elemento HTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="fr"><head> <title>document écrit en français</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /></head><body> ...document écrit en français <span lang=“en”>andenglish</span>...</body></html>
  • 100. Princípio 3: Compreensível• Ajude os usuários a evitar e corrigir erros.
  • 101. Princípio 4: RobustoIsto significa que os usuários devem ser capazes de acessar o conteúdo conforme as tecnologias evoluem; como a tecnologia e os agentes de usuário evoluem, o conteúdo deve permanecer acessível.
  • 102. Robusto• Maximize a compatibilidade com as tecnologias atuais e futuras.
  • 103. Princípio 4: Robusto Validar as páginas Web O objetivo desta técnica é evitar ambigüidades em páginas da Web que muitas vezes resultam em código que não valida contra especificaçõeshttp://validator.w3.org/ formais.
  • 104. Princípio 4: RobustoUsando HTML de acordo com a especificação HTML <img src=“img.gif” alt=“”> XHTML <img src=“img.gif” alt=“” /> http://www.w3.org/TR/
  • 105. Princípio 4: RobustoAssegurar que abertura e fechamento de tags sejam utilizadas de acordo com a especificação (HTML) <div><b>Texto </b> <p><a href=“link.htm”>Texto </p></a>
  • 106. ARIA e HTML5 ARIA e HTML5Ao infinito e além!
  • 107. ARIA e HTML5WAI-ARIA (Accessible Rich Internet Applications)define uma forma de tornar o conteúdo eaplicativos web mais acessíveis a pessoas comdeficiências. Ele contribui especialmente comconteúdo dinâmico e interface de controles deusuário avançadas desenvolvidos com Ajax, HTML,JavaScript e tecnologias relacionadas. http://www.w3.org/WAI/intro/aria
  • 108. ARIA e HTML5 73 ROLES (Ou Papéis) progressbar alert radiogroup Alertdialog scrollbar button slider checkbox spinbutton dialog status menu Tab menubar tabpanel menuitem textbox option tooltip ...http://www.w3.org/TR/wai-aria/roles#role_definitions
  • 109. ARIA e HTML535 States and Properties (Estados e Propriedades)aria-activedescendant aria-haspopuparia-atomic aria-hidden (state)aria-autocomplete aria-invalid (state)aria-busy (state) aria-labelaria-checked (state) aria-labelledbyaria-controls aria-levelaria-describedby aria-livearia-disabled (state) aria-multilinearia-dropeffect aria-multiselectablearia-expanded (state) aria-orientationaria-flowto aria-ownsaria-grabbed (state) ...http://www.w3.org/TR/wai-aria/states_and_properties
  • 110. ARIA e HTML5 Implementação por leitores de tela: Landmark roles são suportadas em• JAWS 10• NVDA 2010.1+• VoiceOver no iPhone IOS4.
  • 111. ARIA e HTML5<a href="#“ id="handle_zoomSlider“ role="slider“ aria-orientation="vertical“ aria-valuemin="0“ aria-valuemax="17“ aria-valuetext="14“ aria-valuenow="14" > <span>11</span></a> HTML + Scritps + CSS para manipulação
  • 112. Mas é muito complicado!
  • 113. Comece belo básico
  • 114. ARIA e HTML5
  • 115. ARIA e HTML5
  • 116. Enriqueça aplicações
  • 117. http://test.cita.uiuc.edu/aria/
  • 118. Com que frequência você navega por landmarks no seu leitor de tela? Resposta Nº de Respondentes % de RespondentesSempre que estiver presente 408 24.6%Frequentemente 262 15.8%De vez em quando 423 25.5%Raramente 307 18.5%Nunca 259 15.6%http://webaim.org/projects/screenreadersurvey4/
  • 119. Princípios do W3CWeb para todos, em qualquer dispositivo, em qualquer lugar, segura e confiável! Foto: everystockphoto.com - woodleywonderworks
  • 120. Acessibilidade é isso!Porque sou diferentedos outros? Foto: everystockphoto.com - txd
  • 121. Acessibilidade é isso! Porque você tem que ser igual aos outros?Foto: everystockphoto.com - txd
  • 122. Obrigado! Reinaldo Ferraz W3C Escritório Brasil www.w3c.br Twitter: @w3cbrasil reinaldo@nic.brTwitter: @reinaldoferraz