Your SlideShare is downloading. ×
0
Acessibilidade na webO caminho das pedras para construir páginas acessíveis               22 de outubro de 2012      Seman...
Um pouco do W3C
"O poder da Web está na suauniversalidade. O acesso por todos,independentemente da deficiência é umaspecto essencial."    ...
O W3C no Brasil
http://premio.w3c.br/
Acessibilidade, para quem?
Foto: everystockphoto.com - namida-k             Cegos – Daltônicos - Baixa visão
Foto: everystockphoto.com - jessicafm                                        Surdos
Mobilidade reduzida
Acessibilidade na web   Porque não  desenvolvemos     web sites    acessíveis?Algumas hipóteses:
Desconhecimento
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
http://random.irb.hr/signup.phphttp://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
Acessibilidade na webPreconceito
Já testou o seu site?     VídeoO mundo adaptado
Público alvo
É muito caro! O prazo é curto!Dá muito trabalho!    Não sei fazer!
Pequenos testes, grandes descobertas
Já testou o seu site?       VídeoArquitetura inclusiva
Acessível via teclado                   Foto: Flickr.com - Baddog_
Já testou o seu site?
Já testou o seu site?  João étetraplégico
Vídeos com legendas
Já testou o seu site?Michele é  surda
Já testou o seu site?Sem CSSe imagens               Foto: Flickr.com - Baddog_
Ou mesmo sem monitor
Já testou o seu site?Carlos é cego
Estatísticas                      Pessoas com deficiência no Brasil                                             24%       ...
Acessibilidade na web        Pessoas com deficiência visual no Brasil           35.791.488                        Censo 20...
Acessibilidade na web        Pessoas com deficiência visual no BrasilNão consegue                                   Grande...
Acessibilidade na web     Pessoas com deficiências motoras no Brasil           13.273.969                        Censo 201...
Acessibilidade na webBeneficia pessoas com deficiência
Acessibilidade na web: A quem se destina?Acessibilidade é para todos !
Usuários de Dispositivos Móveis
Deficiência temporária
Medo de usar o computadorFoto: everystockphoto.com - Violator3
Acessibilidade na web     Motivos pelos quais nunca utilizou a internet                              57%     Falta de habi...
Início de aprendizadoNosso primeiro contato
Acessibilidade na webPROPORÇÃO DE INDIVÍDUOS QUE JÁ ACESSARAM A INTERNET           Indivíduos de 10 a 12 anos de idade    ...
Acessibilidade na web   FREQÜÊNCIA DO ACESSO INDIVIDUAL À INTERNET         Indivíduos de 10 a 12 anos de idade            ...
Idade Avançada  Nós, daqui    alguns     anos
Acessibilidade na web Número de pessoas com    60 anos ou mais       no mundo:1950 – 205 milhões2000 – 606 milhões    Esti...
% de pessoas com 60 anos ou mais que               nunca acessou a internet100               9895                         ...
Acessibilidade na web   A5 - TIPO DE CONEXÃO PARA ACESSO À INTERNET NO DOMICÍLIO   Percentual sobre o total de domicílios ...
Acessibilidade na webA6 - VELOCIDADE DA CONEXÃO À INTERNET UTILIZADA NO DOMICÍLIOPercentual sobre o total de domicílios co...
Aplicando acessibilidade                            O caminho para a                           acessibilidade na webFoto: ...
Aplicando acessibilidade    Web Content Accessibility       Guidelines (WCAG)Versão 1.0 – 5 de maio de 1999www.w3.org/TR/W...
Futuro da Webhttp://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
Futuro da Webhttp://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
Futuro da Webhttp://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html
WCAG 2.04 Princípios                    WCAG 2.0                                             Entendendo as Recomendações  ...
Princípio 1: PerceptívelIsto significa que os usuários devem ser capazes de perceber a   informação que está sendo apresen...
Perceptível• Forneça alternativas de texto para o conteúdo  não textual.
Considerando perspectivas<img />
Considerando perspectivas<img /><img alt="Foto das teclas W, 3 e Cfora do teclado" />
Considerando perspectivas<img /><img alt="Foto das teclas W, 3 e Cfora do teclado" /><img src="foto.jpg" alt=“Foto dastecl...
Princípio 1: PerceptívelSe o elemento nãotextual necessitar deentrada de dados dousuário
Princípio 1: Perceptível                                   ExemplosEm um campo de entrada de texto:<label for="firstname">...
Princípio 1: PerceptívelClicando aqui                 Aciona aqui
Princípio 1: Perceptível    Utilizar o elemento o atributo “title” para identificar    controles de formulários quando o e...
Princípio 1: Perceptível                            71Se o elemento nãotextual deve ser ignoradopelas tecnologiasassistivas?
Princípio 1: Perceptível      Utilize CSS para incluir imagens decorativas O objetivo desta técnica é fornecer um mecanism...
Princípio 1: Perceptível                                                                        73Utilização de Folhas de ...
Princípio 1: Perceptível                                                            74Utilização de Folhas de Estilo (CSS)...
Princípio 1: Perceptível                                                            75Utilização de Folhas de Estilo (CSS)...
Princípio 1: PerceptívelTécnicas suficientes        Se conteúdo não        textual é um        CAPTCHA:
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
Perceptível• Forneça alternativas de texto para o conteúdo  não textual.• Forneça legendas e alternativas para  conteúdo d...
Princípio 1: PerceptívelProporcionar legendas (open ou closed caption)
Princípio 1: PerceptívelProporcionar uma alternativa para a mídia baseadaem tempo                                        T...
Perceptível• Forneça alternativas de texto para o conteúdo  não textual.• Forneça legendas e alternativas para  conteúdo d...
Princípio 1: Perceptível
Tabelas A5 - TIPO DE CONEXÃO PARA ACESSO À INTERNET NODOMICÍLIO Percentual sobre o total de domicílios com acesso àInterne...
Princípio 1: Perceptível<table summary="As duas primeiras colunas databela são as variáveis de cruzamento (por exemplo,Reg...
O FUTURO E O PASSADO DAS TABELAS
HTML5“As tabelas não devem ser utilizadas como auxiliares de layout.Historicamente, alguns autores têm abusado das tabelas...
Perceptível• Forneça alternativas de texto para o conteúdo  não textual.• Forneça legendas e alternativas para  conteúdo d...
DaltonismoVisão normal
DaltonismoProtanopia (Deficiências em vermelho)
DaltonismoDeuteranopia (Deficiências em verde)
DaltonismoTritanopia (Deficiências em azul)
DaltonismoAcromatopsia (Deficiências todas as cores)
Daltonismo
Você consegue ler este texto.
Você consegue ler este texto?
Você não consegue ler este texto!
Princípio 2: OperávelIsto significa que os usuários devem ser capazes de operar a   interface; a interface de interação nã...
Operável• Faça todas as funcionalidades acessíveis via  teclado.
Princípio 2: OperávelUtilizar o teclado e outras funções específicas do dispositivo    <a href="menu.php"    onmouseover="...
Operável• Faça todas as funcionalidades acessíveis via  teclado.• Não utilize conteúdo que cause convulsões.
Operável• Faça todas as funcionalidades acessíveis via  teclado.• Não utilize conteúdo que cause convulsões.• Ajude os usu...
Princípio 2: OperávelUm link “Pular para o conteúdo principal”
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>Su...
Princípio 3: CompreensívelIsto significa que os usuários devem ser capazes de compreender as   informações, bem como o fun...
Princípio 3: Compreensível        Definir o idioma da página     Usando atributos de idioma no elemento HTML<!DOCTYPE HTML...
Princípio 3: Compreensível        Definir o idioma da página     Usando atributos de idioma no elemento HTML<!DOCTYPE HTML...
Princípio 3: Compreensível• Ajude os usuários a evitar e corrigir erros.
Princípio 4: RobustoIsto significa que os usuários devem ser capazes de acessar o   conteúdo conforme as tecnologias evolu...
Robusto• Maximize a compatibilidade com as tecnologias  atuais e futuras.
Princípio 4: Robusto              Validar as páginas Web                           O objetivo desta técnica é             ...
Princípio 4: RobustoUsando HTML de acordo com a especificação                         HTML                         <img sr...
Princípio 4: RobustoAssegurar que abertura e fechamento de tags sejam utilizadas de acordo com a especificação (HTML)     ...
ARIA e HTML5   ARIA e HTML5Ao infinito e além!
ARIA e HTML5WAI-ARIA (Accessible Rich Internet Applications)define uma forma de tornar o conteúdo eaplicativos web mais ac...
ARIA e HTML5                  73 ROLES (Ou Papéis)  progressbar                    alert  radiogroup                     A...
ARIA e HTML535 States and Properties (Estados e Propriedades)aria-activedescendant                        aria-haspopupari...
ARIA e HTML5       Implementação por leitores de tela:      Landmark roles são suportadas em• JAWS 10• NVDA 2010.1+• Voice...
ARIA e HTML5<a href="#“     id="handle_zoomSlider“     role="slider“     aria-orientation="vertical“     aria-valuemin="0“...
Mas é muito complicado!
Comece belo básico
ARIA e HTML5
ARIA e HTML5
Enriqueça aplicações
http://test.cita.uiuc.edu/aria/
Com que frequência você navega por landmarks no seu leitor de tela?          Resposta              Nº de Respondentes    %...
Princípios do W3CWeb para todos,  em qualquer dispositivo, em qualquer lugar,    segura e    confiável!                   ...
Acessibilidade é isso!Porque sou diferentedos outros?                   Foto: everystockphoto.com - txd
Acessibilidade é isso!                                  Porque                                  você tem                  ...
Obrigado!  Reinaldo Ferraz W3C Escritório Brasil     www.w3c.br Twitter: @w3cbrasil    reinaldo@nic.brTwitter: @reinaldofe...
Acessibilidade na WEB
Acessibilidade na WEB
Acessibilidade na WEB
Acessibilidade na WEB
Acessibilidade na WEB
Acessibilidade na WEB
Acessibilidade na WEB
Acessibilidade na WEB
Acessibilidade na WEB
Acessibilidade na WEB
Acessibilidade na WEB
Upcoming SlideShare
Loading in...5
×

Acessibilidade na WEB

391

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
391
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Acessibilidade na WEB"

  1. 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. 2. Um pouco do W3C
  3. 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. 4. O W3C no Brasil
  5. 5. http://premio.w3c.br/
  6. 6. Acessibilidade, para quem?
  7. 7. Foto: everystockphoto.com - namida-k Cegos – Daltônicos - Baixa visão
  8. 8. Foto: everystockphoto.com - jessicafm Surdos
  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.phphttp://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. Acessibilidade na webPreconceito
  18. 18. Já testou o seu site? VídeoO mundo adaptado
  19. 19. Público alvo
  20. 20. É muito caro! O prazo é curto!Dá muito trabalho! Não sei fazer!
  21. 21. Pequenos testes, grandes descobertas
  22. 22. Já testou o seu site? VídeoArquitetura inclusiva
  23. 23. Acessível via teclado Foto: Flickr.com - Baddog_
  24. 24. Já testou o seu site?
  25. 25. Já testou o seu site? João étetraplégico
  26. 26. Vídeos com legendas
  27. 27. Já testou o seu site?Michele é surda
  28. 28. Já testou o seu site?Sem CSSe imagens Foto: Flickr.com - Baddog_
  29. 29. Ou mesmo sem monitor
  30. 30. Já testou o seu site?Carlos é cego
  31. 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. 32. Acessibilidade na web Pessoas com deficiência visual no Brasil 35.791.488 Censo 2010Fonte: http://www.ibge.gov.br/
  33. 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. 34. Acessibilidade na web Pessoas com deficiências motoras no Brasil 13.273.969 Censo 2010Fonte: http://www.ibge.gov.br/
  35. 35. Acessibilidade na webBeneficia pessoas com deficiência
  36. 36. Acessibilidade na web: A quem se destina?Acessibilidade é para todos !
  37. 37. Usuários de Dispositivos Móveis
  38. 38. Deficiência temporária
  39. 39. Medo de usar o computadorFoto: everystockphoto.com - Violator3
  40. 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. 41. Início de aprendizadoNosso primeiro contato
  42. 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. 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. 44. Idade Avançada Nós, daqui alguns anos
  45. 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. 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. 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. 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. 49. Aplicando acessibilidade O caminho para a acessibilidade na webFoto: everystockphoto.com - Colin Gregory Palmer
  50. 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. 51. Futuro da Webhttp://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
  52. 52. Futuro da Webhttp://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
  53. 53. Futuro da Webhttp://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html
  54. 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. 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. 56. Perceptível• Forneça alternativas de texto para o conteúdo não textual.
  57. 57. Considerando perspectivas<img />
  58. 58. Considerando perspectivas<img /><img alt="Foto das teclas W, 3 e Cfora do teclado" />
  59. 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. 60. Princípio 1: PerceptívelSe o elemento nãotextual necessitar deentrada de dados dousuário
  61. 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. 62. Princípio 1: PerceptívelClicando aqui Aciona aqui
  63. 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. 64. Princípio 1: Perceptível 71Se o elemento nãotextual deve ser ignoradopelas tecnologiasassistivas?
  65. 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. 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. 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. 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. 69. Princípio 1: PerceptívelTécnicas suficientes Se conteúdo não textual é um CAPTCHA:
  70. 70. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  71. 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. 72. Princípio 1: PerceptívelProporcionar legendas (open ou closed caption)
  73. 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. 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. 75. Princípio 1: Perceptível
  76. 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. 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. 78. O FUTURO E O PASSADO DAS TABELAS
  79. 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. 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. 81. DaltonismoVisão normal
  82. 82. DaltonismoProtanopia (Deficiências em vermelho)
  83. 83. DaltonismoDeuteranopia (Deficiências em verde)
  84. 84. DaltonismoTritanopia (Deficiências em azul)
  85. 85. DaltonismoAcromatopsia (Deficiências todas as cores)
  86. 86. Daltonismo
  87. 87. Você consegue ler este texto.
  88. 88. Você consegue ler este texto?
  89. 89. Você não consegue ler este texto!
  90. 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. 91. Operável• Faça todas as funcionalidades acessíveis via teclado.
  92. 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. 93. Operável• Faça todas as funcionalidades acessíveis via teclado.• Não utilize conteúdo que cause convulsões.
  94. 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. 95. Princípio 2: OperávelUm link “Pular para o conteúdo principal”
  96. 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. 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. 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. 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. 100. Princípio 3: Compreensível• Ajude os usuários a evitar e corrigir erros.
  101. 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. 102. Robusto• Maximize a compatibilidade com as tecnologias atuais e futuras.
  103. 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. 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. 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. 106. ARIA e HTML5 ARIA e HTML5Ao infinito e além!
  107. 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. 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. 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. 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. 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. 112. Mas é muito complicado!
  113. 113. Comece belo básico
  114. 114. ARIA e HTML5
  115. 115. ARIA e HTML5
  116. 116. Enriqueça aplicações
  117. 117. http://test.cita.uiuc.edu/aria/
  118. 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. 119. Princípios do W3CWeb para todos, em qualquer dispositivo, em qualquer lugar, segura e confiável! Foto: everystockphoto.com - woodleywonderworks
  120. 120. Acessibilidade é isso!Porque sou diferentedos outros? Foto: everystockphoto.com - txd
  121. 121. Acessibilidade é isso! Porque você tem que ser igual aos outros?Foto: everystockphoto.com - txd
  122. 122. Obrigado! Reinaldo Ferraz W3C Escritório Brasil www.w3c.br Twitter: @w3cbrasil reinaldo@nic.brTwitter: @reinaldoferraz
  1. A particular slide catching your eye?

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

×