Acessibilidade na Web - Fapce 2013

612 visualizações

Publicada em

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
612
No SlideShare
0
A partir de incorporações
0
Número de incorporações
353
Ações
Compartilhamentos
0
Downloads
1
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Acessibilidade na Web - Fapce 2013

  1. 1. Acessibilidade na web VI Encontro de Iniciação Científica & V Encontro de Extensão da FAP – 2013 22 de maio de 2013 Reinaldo Ferraz – W3C.br @reinaldoferraz @w3cbrasil
  2. 2. Um pouco do W3C
  3. 3. Um pouco do W3C
  4. 4. O W3C no Brasil
  5. 5. http://premio.w3c.br/
  6. 6. Acessibilidade, para quem?
  7. 7. Cegos – Daltônicos - Baixa visão Foto: everystockphoto.com - namida-k
  8. 8. Surdos Foto: everystockphoto.com - jessicafm
  9. 9. Mobilidade reduzida
  10. 10. Acessibilidade na web Porque não desenvolvemos web sites acessíveis? Algumas hipóteses:
  11. 11. Desconhecimento
  12. 12. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  13. 13. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  14. 14. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  15. 15. http://random.irb.hr/signup.php http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  16. 16. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  17. 17. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  18. 18. Acessibilidade na web Preconceito
  19. 19. Já testou o seu site? Vídeo O mundo adaptado
  20. 20. Público alvo
  21. 21. É muito caro! O prazo é curto! Dá muito trabalho! Não sei fazer!
  22. 22. A Web conta histórias.
  23. 23. Aplicando acessibilidade Web Content Accessibility Guidelines (WCAG) Versão 1.0 – 5 de maio de 1999 Versão 2.0 – 11 de dezembro de 2008 www.w3.org/TR/WCAG/
  24. 24. http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html Futuro da Web
  25. 25. http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html Futuro da Web
  26. 26. http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html Futuro da Web
  27. 27. 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
  28. 28. Andy Walker
  29. 29. Acessibilidade na web 13.273.969 Censo 2010 Pessoas com deficiências motoras no Brasil Fonte: http://www.ibge.gov.br/
  30. 30. 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
  31. 31. Tornar todo o conteúdo operável via teclado
  32. 32. Operável via teclado
  33. 33. <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
  34. 34. Operável via teclado
  35. 35. Operável via teclado Um link “Pular para o conteúdo principal”
  36. 36. Formulários
  37. 37. Formulários
  38. 38. Formulários
  39. 39. Formulários
  40. 40. 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
  41. 41. 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>
  42. 42. Leonardo Gleisson
  43. 43. Acessibilidade na web 528.624 Censo 2010 Número de pessoas cegas no Brasil Fonte: http://www.ibge.gov.br/
  44. 44. Tecnologias assistivas
  45. 45. Tecnologias assistivas
  46. 46. Bloqueios de teclado
  47. 47. Bloqueios de teclado
  48. 48. Bloqueios de teclado
  49. 49. Cabeçalhos
  50. 50. 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>
  51. 51. Cabeçalhos
  52. 52. Tabelas
  53. 53. Tabelas
  54. 54. 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
  55. 55. <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
  56. 56. <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
  57. 57. Textos alternativos
  58. 58. <img /> Textos alternativos
  59. 59. <img /> <img alt="Foto das teclas W, 3 e C fora do teclado" /> Textos alternativos
  60. 60. <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
  61. 61. Imagens para layout
  62. 62. CaPtcHa
  63. 63. CaPtcHa Exemplos Ou Que dia vem depois de sexta-feira? Digite o código
  64. 64. Formulários
  65. 65. Formulários
  66. 66. 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
  67. 67. Formulários
  68. 68. Formulários
  69. 69. <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
  70. 70. 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
  71. 71. 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
  72. 72. <!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
  73. 73. <!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
  74. 74. Ivy Bean
  75. 75. Acessibilidade na web 35.791.488 Censo 2010 Pessoas com deficiência visual no Brasil Fonte: http://www.ibge.gov.br/
  76. 76. 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
  77. 77. 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/
  78. 78. Medo de usar o computador Foto: everystockphoto.com - Violator3
  79. 79. 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/
  80. 80. 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.
  81. 81. 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;
  82. 82. Contraste
  83. 83. Contraste
  84. 84. Você consegue ler este texto. Contraste
  85. 85. Você consegue ler este texto? Contraste
  86. 86. Você não consegue ler este texto! Contraste
  87. 87. Neil Harbisson http://www.youtube.com/watch?v=CvPOh0p9cf0
  88. 88. Daltonismo
  89. 89. Daltonismo
  90. 90. Daltonismo Uma menina com cabelos loiros, olhos azuis vestida de rosa
  91. 91. Daltonismo Visão normal
  92. 92. Daltonismo Protanopia (Deficiências em vermelho)
  93. 93. Daltonismo Deuteranopia (Deficiências em verde)
  94. 94. Daltonismo Tritanopia (Deficiências em azul)
  95. 95. Daltonismo Acromatopsia (Deficiências todas as cores)
  96. 96. Daltonismo Nunca utilize somente cor para transmitir uma informação na Web
  97. 97. Daltonismo
  98. 98. Formulários
  99. 99. Acessibilidade é para todos !
  100. 100. Usuários de Dispositivos Móveis Foto: everystockphoto.com -bartimaeus-
  101. 101. Deficiência temporária Foto: Flickr.com - Tuftronic10000
  102. 102. Início de aprendizado Nosso primeiro contato
  103. 103. Idade Avançada Nós, daqui alguns anos Foto: Flickr.com - Jacob Bøtter
  104. 104. Site acessível é feio Padrões Web limitam o design
  105. 105. http://www.csszengarden.com/ Foto: Flickr.com - Patrick Q
  106. 106. Foto: Flickr.com - Patrick Q http://www.csszengarden.com/
  107. 107. Foto: Flickr.com - Patrick Q http://www.csszengarden.com/
  108. 108. Foto: Flickr.com - Patrick Q http://www.csszengarden.com/
  109. 109. Foto: Flickr.com - Patrick Q http://www.csszengarden.com/
  110. 110. Sua página não precisa ser feia para ser acessível
  111. 111. Aplicando acessibilidade Web Content Accessibility Guidelines (WCAG) Versão 1.0 – 5 de maio de 1999 Versão 2.0 – 11 de dezembro de 2008 www.w3.org/TR/WCAG/
  112. 112. WCAG 2.0 1 - Perceptível 2 - Operável 3 - Compreensível 4 - Robusto
  113. 113. 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
  114. 114. Princípios do W3C Web para todos, em qualquer dispositivo, em qualquer lugar, segura e confiável! Foto: everystockphoto.com - woodleywonderworks
  115. 115. A Web é feita por pessoas para pessoas
  116. 116. Nós somos os responsáveis por uma web acessível
  117. 117. Obrigado! Reinaldo Ferraz W3C Escritório Brasil www.w3c.br Twitter: @w3cbrasil reinaldo@nic.br Twitter: @reinaldoferraz

×