Your SlideShare is downloading. ×
0
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Acessibilidade na Web - Senac 2013
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Acessibilidade na Web - Senac 2013

442

Published on

Palestra sobre acessibillidade na Web durante o RoadShow 2013

Palestra sobre acessibillidade na Web durante o RoadShow 2013

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
442
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
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 web Senac Santo André– 07 de Março de 2013 Senac Consolação– 11 de Março de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz @w3cbrasil
  • 2. Um pouco do W3C
  • 3. Um pouco do W3C
  • 4. O W3C no Brasil
  • 5. http://premio.w3c.br/
  • 6. Acessibilidade, para quem?
  • 7. Cegos – Daltônicos - Baixa visão Foto: everystockphoto.com - namida-k
  • 8. Surdos Foto: everystockphoto.com - jessicafm
  • 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.php http://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. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  • 18. Acessibilidade na web Preconceito
  • 19. Já testou o seu site? Vídeo O mundo adaptado
  • 20. Público alvo
  • 21. É muito caro! O prazo é curto! Dá muito trabalho! Não sei fazer!
  • 22. Já testou o seu site? Acessibilidade web Custo ou benefício?
  • 23. A Web conta histórias.
  • 24. Estatísticas 24% 45.623.910 pessoas Censo 2010 Fonte: IBGE Pessoas com deficiência no Brasil Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm
  • 25. Andy Walker
  • 26. Acessibilidade na web 13.273.969 Censo 2010 Pessoas com deficiências motoras no Brasil Fonte: http://www.ibge.gov.br/
  • 27. Acessibilidade na web Censo 2010 Pessoas com deficiências motoras Fonte: http://www.ibge.gov.br/ Não consegue (se movimentar) de modo algum Grande dificuldade Alguma dificuldade 740.456 3.701.790 8.831.723
  • 28. Tornar todo o conteúdo operável via teclado
  • 29. Operável via teclado
  • 30. <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> Operável via teclado
  • 31. Operável via teclado
  • 32. Operável via teclado Um link “Pular para o conteúdo principal”
  • 33. Formulários
  • 34. Formulários
  • 35. Formulários
  • 36. Formulários
  • 37. Formulários <input type="checkbox" value="yes" name="apples"> Apples <input type="checkbox" value="yes" name="oranges"> Oranges <input type="checkbox" value="yes" name="lemons"> Lemons <input type="checkbox" value="yes" name="limes"> Limes
  • 38. Formulários <input type="checkbox" value="yes" id=“apples“ name="apples"> <label for=“apples"> Apples</label> <input type="checkbox" value="yes" id=“oranges“ name="oranges"> <label for=“oranges"> Oranges</label> <input type="checkbox" value="yes" id=“lemmons“ name="lemons"> <label for=“lemons"> Lemons</label> <input type="checkbox" value="yes" id=“limes“ name="limes"> <label for=“limes"> Limes</label>
  • 39. Leonardo Gleisson
  • 40. Acessibilidade na web 528.624 Censo 2010 Número de pessoas cegas no Brasil Fonte: http://www.ibge.gov.br/
  • 41. Tecnologias assistivas
  • 42. Tecnologias assistivas
  • 43. Bloqueios de teclado
  • 44. Bloqueios de teclado
  • 45. Bloqueios de teclado
  • 46. Cabeçalhos
  • 47. Cabeçalhos <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>
  • 48. Cabeçalhos
  • 49. Tabelas
  • 50. Tabelas
  • 51. A5 - TIPO DE CONEXÃO PARA ACESSO À INTERNET NO DOMICÍLIO Percentual sobre o total de domicílios com acesso à Internet 1 Percentual (%) Modem Tradicional (acesso discado linha telefônica) Banda Larga 2 Outros NS/NR 3 TOTAL Banda Larga Modem digital via linha telefônica (tecnologia DSL) Modem via cabo Conexão via rádio Conexão via satélite TOTAL BRASIL 20 66 23 25 14 3 6 10 ÁREA URBANA 19 66 24 26 14 3 6 9 RURAL 21 55 17 14 20 5 8 16 REGIÕES DO PAÍS SUDESTE 22 65 21 30 11 3 4 10 NORDESTE 19 64 12 32 18 1 10 9 SUL 13 71 34 12 22 3 8 10 NORTE 31 49 23 11 11 5 14 7 CENTRO-OESTE 13 67 34 18 13 2 8 13 RENDA FAMILIAR Até R$465 16 51 14 20 14 3 12 21 R$466-R$930 22 61 18 24 15 4 4 14 R$931-R$1395 23 62 22 24 13 2 6 9 R$1396-R$2325 23 63 23 22 15 3 6 8 R$2326-R$4650 16 75 32 28 11 4 7 4 R$4651 ou mais 12 78 27 34 16 1 6 5 CLASSE SOCIAL 4 A 11 81 24 41 14 3 9 3 B 18 71 28 26 13 3 6 7 C 22 61 19 24 15 3 5 12 DE 26 41 10 15 15 2 3 29 Tabelas
  • 52. <table border="1"> <caption>Contact Information</caption> <tr> <td></td> <td scope="col">Name</td> <td scope="col">Phone#</td> <td scope="col">City</td> </tr><tr> <td>1.</td> <td scope="row">Joel Garner</td> <td>412-212-5421</td> <td>Pittsburgh</td> </tr><tr> <td>2.</td> <td scope="row">Clive Lloyd</td> <td>410-306-5400</td> <td>Baltimore</td> </tr> </table> Utilizar o atributo scope para associar células de cabeçalho e células de dados em tabelas de dados. Tabelas
  • 53. <table> <tr> <th rowspan="2" id="h">Homework</th> <th colspan="3" id="e">Exams</th> <th colspan="3" id="p">Projects</th> </tr> <tr> <th id="e1" headers="e">1</th> <th id="e2" headers="e">2</th> <th id="ef" headers="e">Final</th> <th id="p1" headers="p">1</th> <th id="p2" headers="p">2</th> <th id="pf" headers="p">Final</th> </tr> <tr> <td headers="h">15%</td> <td headers="e e1">15%</td> <td headers="e e2">15%</td> <td headers="e ef">20%</td> <td headers="p p1">10%</td> <td headers="p p2">10%</td> <td headers="p pf">15%</td> </tr> </table> Utilizar os atributos ID e headers para associar células de dados com células de cabeçalhos em tabelas de dados. Tabelas
  • 54. Textos alternativos
  • 55. <img /> Textos alternativos
  • 56. <img /> <img alt="Foto das teclas W, 3 e C fora do teclado" /> Textos alternativos
  • 57. <img /> <img alt="Foto das teclas W, 3 e C fora do teclado" /> <img src="foto.jpg" alt=“Foto das teclas W, 3 e C fora do teclado" /> Textos alternativos
  • 58. Imagens para layout
  • 59. CaPtcHa
  • 60. CaPtcHa Exemplos Ou Que dia vem depois de sexta-feira? Digite o código
  • 61. Formulários
  • 62. Formulários
  • 63. Em 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> Formulários
  • 64. Formulários
  • 65. Formulários
  • 66. <form action="http://example.com/adduser" method="post"> <fieldset> <legend>Residential Address</legend> <label for="raddress">Address: </label> <input type="text" id="raddress" name="raddress" /> <label for="rzip">Postal/Zip Code: </label> <input type="text" id="rzip" name="rzip" /> ...more residential address information... </fieldset> <fieldset> <legend>Postal Address</legend> <label for="paddress">Address: </label> <input type="text" id="paddress" name="paddress" /> <label for="pzip">Postal/Zip Code: </label> <input type="text" id="pzip" name="pzip" /> ...more postal address information... </fieldset> </form> Formulários
  • 67. 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> Formulários
  • 68. Propósito do link Título da notícia Esse é um exemplo de chamada de notícia, que tem um breve resumo para que o usuário leia o resto da notícia na outra página... Saiba mais Título da outra notícia Esse é um exemplo de chamada de notícia, que tem um breve resumo para que o usuário leia o resto da notícia na outra página... Saiba mais Título da terceira notícia Esse é um exemplo de chamada de notícia, que tem um breve resumo para que o usuário leia o resto da notícia na outra página... Saiba mais
  • 69. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.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> Definir o idioma da página Usando atributos de idioma no elemento HTML Idioma da página
  • 70. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.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”>and english</span>... </body> </html> Definir o idioma da página Usando atributos de idioma no elemento HTML Idioma da página
  • 71. Ivy Bean
  • 72. Acessibilidade na web 35.791.488 Censo 2010 Pessoas com deficiência visual no Brasil Fonte: http://www.ibge.gov.br/
  • 73. Acessibilidade na web Censo 2010 Pessoas com deficiência visual no Brasil Fonte: http://www.ibge.gov.br/ Não consegue (enxergar) de modo algum Grande dificuldade Alguma dificuldade 528.624 6.056.684 29.206.180
  • 74. Estatísticas Foto: Flickr.com - Jacob Bøtter Número de pessoas com 60 anos ou mais no mundo: 1950 – 205 milhões 2000 – 606 milhões Estimativa para 2050 Quase 2 bilhões de pessoas com mais de 60 anos. (+ de 20% da população) Fonte: http://www.un.org/esa/population/publications/worldageing19502050/
  • 75. Medo de usar o computador Foto: everystockphoto.com - Violator3
  • 76. Acessibilidade na web 57% Falta de habilidade com o computador/internet Fonte: Pesquisa TIC Domicílios 2011 – CGI.br Pessoas que nunca acessaram a internet, mas usaram um computador. Motivos pelos quais nunca utilizou a internet Fonte: http://www.cetic.br/
  • 77. Fontes pequenas Fontes muito pequenas dificultam a leitura, mas alguns websites não permitem que suas fontes sejam aumentadas. Fontes muito pequenas dificultam a leitura, mas alguns websites não permitem que suas fontes sejam aumentadas. Fontes muito pequenas dificultam a leitura, mas alguns websites não permitem que suas fontes sejam aumentadas. Fontes muito pequenas dificultam a leitura, mas alguns websites não permitem que suas fontes sejam aumentadas. Fontes muito pequenas dificultam a leitura, mas alguns websites não permitem que suas fontes sejam aumentadas. Fontes muito pequenas dificultam a leitura, mas alguns websites não permitem que suas fontes sejam aumentadas.
  • 78. Fontes pequenas Utilize CSS para definir tamanhos de fontes: Use unidades relativas em vez de absolutas Em vez de Font-size: 10px; Utilize Font-size: 1em;
  • 79. Contraste
  • 80. Contraste
  • 81. Você consegue ler este texto. Contraste
  • 82. Você consegue ler este texto? Contraste
  • 83. Você não consegue ler este texto! Contraste
  • 84. Neil Harbisson http://www.youtube.com/watch?v=CvPOh0p9cf0
  • 85. Daltonismo
  • 86. Daltonismo
  • 87. Daltonismo Uma menina com cabelos loiros, olhos azuis vestida de rosa
  • 88. Daltonismo Visão normal
  • 89. Daltonismo Protanopia (Deficiências em vermelho)
  • 90. Daltonismo Deuteranopia (Deficiências em verde)
  • 91. Daltonismo Tritanopia (Deficiências em azul)
  • 92. Daltonismo Acromatopsia (Deficiências todas as cores)
  • 93. Daltonismo Nunca utilize somente cor para transmitir uma informação na Web
  • 94. Daltonismo
  • 95. Formulários
  • 96. Acessibilidade é para todos !
  • 97. Usuários de Dispositivos Móveis Foto: everystockphoto.com -bartimaeus-
  • 98. Deficiência temporária Foto: Flickr.com - Tuftronic10000
  • 99. Início de aprendizado Nosso primeiro contato
  • 100. Idade Avançada Nós, daqui alguns anos Foto: Flickr.com - Jacob Bøtter
  • 101. Site acessível é feio Padrões Web limitam o design
  • 102. http://www.csszengarden.com/ Foto: Flickr.com - Patrick Q
  • 103. Foto: Flickr.com - Patrick Q http://www.csszengarden.com/
  • 104. Foto: Flickr.com - Patrick Q http://www.csszengarden.com/
  • 105. Foto: Flickr.com - Patrick Q http://www.csszengarden.com/
  • 106. Foto: Flickr.com - Patrick Q http://www.csszengarden.com/
  • 107. Sua página não precisa ser feia para ser acessível
  • 108. Aplicando acessibilidade Web Content Accessibility Guidelines (WCAG) Versão 1.0 – 5 de maio de 1999 www.w3.org/TR/WCAG10/ Versão 2.0 – 11 de dezembro de 2008 www.w3.org/TR/WCAG/
  • 109. WCAG 2.0 1 - Perceptível 2 - Operável 3 - Compreensível 4 - Robusto
  • 110. WCAG 2.04 Princípios Recomendações (12 no total) Critérios de sucesso Técnicas suficientes e aconselhadas Como Cumprir os critérios de sucesso Entendendo os critérios de sucesso Entendendo as Recomendações WCAG 2.0
  • 111. Princípios do W3C Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confiável! Foto: everystockphoto.com - woodleywonderworks
  • 112. A Web é feita por pessoas para pessoas
  • 113. Nós somos os responsáveis por uma web acessível
  • 114. Obrigado! Reinaldo Ferraz W3C Escritório Brasil www.w3c.br Twitter: @w3cbrasil reinaldo@nic.br Twitter: @reinaldoferraz

×