Acessibilidade na web
TIP - Santos
10 de junho de 2014
Reinaldo Ferraz – W3C.br
@reinaldoferraz
@w3cbrasil
Um pouco do W3C
Um pouco do W3C
O W3C no Brasil
http://premio.w3c.br/
Acessibilidade, para quem?
Cegos – Daltônicos - Baixa visão
Foto: everystockphoto.com - namida-k
Surdos
Foto: everystockphoto.com - jessicafm
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.php
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-no...
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/
Acessibilidade na web
Preconceito
Público alvo
É muito caro!
O prazo é curto!
Dá muito trabalho!
Não sei fazer!
Aplicando acessibilidade
Web Content Accessibility
Guidelines (WCAG)
Versão 1.0 – 5 de maio de 1999
Versão 2.0 – 11 de dez...
WCAG 2.0
1 - Perceptível
2 - Operável
3 - Compreensível
4 - Robusto
WCAG 2.04 Princípios
Recomendações
(12 no total)
Critérios de
sucesso
Técnicas
suficientes e
aconselhadas
Como Cumprir os ...
http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
Futuro da Web
http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
Futuro da Web
http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html
Futuro da Web
ARIA e HTML5
WAI-ARIA (Accessible Rich Internet Applications)
define uma forma de tornar o conteúdo e
aplicativos web mais...
ARIA e HTML5
progressbar
radiogroup
scrollbar
slider
spinbutton
status
Tab
tabpanel
textbox
tooltip
73 ROLES (Ou Papéis)
a...
ARIA e HTML5
aria-activedescendant
aria-atomic
aria-autocomplete
aria-busy (state)
aria-checked (state)
aria-controls
aria...
A Web conta histórias.
Estatísticas
24%
45.623.910 pessoas
Censo 2010
Fonte: IBGE
Pessoas com deficiência no Brasil
Fonte: http://www.ibge.gov.br...
Andy Walker
Acessibilidade na web
13.273.969
Censo 2010
Pessoas com deficiências motoras no Brasil
Fonte: http://www.ibge.gov.br/
Acessibilidade na web
Censo 2010
Pessoas com deficiências motoras
Fonte: http://www.ibge.gov.br/
Não consegue (se
moviment...
Tornar todo o conteúdo
operável via teclado
Operável via teclado
Operável via teclado
CSS:
a:hover
a:focus
JavaScript:
onmouseover="#"
onfocus="#"
onmouseout="#"
onblur="#"
Operável via teclado
Operável via teclado
Um link “Pular para o conteúdo principal”
Formulários
Formulários
Formulários
Formulários
Formulários
<input type="checkbox" value="yes" name="apples">
Apples
<input type="checkbox" value="yes" name="oranges">
Or...
Formulários
<input type="checkbox" value="yes" id=“apples“ name="apples">
<label for=“apples"> Apples</label>
<input type=...
Leonardo Gleisson
Acessibilidade na web
528.624
Censo 2010
Número de pessoas cegas no Brasil
Fonte: http://www.ibge.gov.br/
Tecnologias assistivas
Tecnologias assistivas
Bloqueios de teclado
Bloqueios de teclado
Bloqueios de teclado
Cabeçalhos
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>
<...
Tabelas
Tabelas
A5 - TIPO DE CONEXÃO PARA ACESSO À INTERNET NO
DOMICÍLIO Percentual sobre o total de domicílios com acesso à
Internet 1 Pe...
<table border="1">
<caption>Contact
Information</caption>
<tr>
<td></td>
<td scope="col">Name</td>
<td scope="col">Phone#<...
Textos alternativos
<img />
Textos alternativos
<img />
<img alt="Foto das teclas W, 3 e C
fora do teclado" />
Textos alternativos
<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 t...
Textos alternativos
<div class="foto" role="img"
aria-label="Logo do W3C que está dentro do
CSS"></div>
<img src="img-slid...
Imagens para layout
CaPtcHa
CaPtcHa
Exemplos
Ou
Que dia vem depois de sexta-feira?
Digite o código
Formulários
Formulários
Em um campo de entrada de texto:
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstn...
Formulários
Formulários
<form action="http://example.com/adduser" method="post">
<fieldset>
<legend>Residential Address</legend>
<label for="raddr...
Utilizar o elemento o atributo “title” para identificar
controles de formulários quando o elemento “label” não
puder ser u...
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 le...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>...
Ivy Bean
Acessibilidade na web
35.791.488
Censo 2010
Pessoas com deficiência visual no Brasil
Fonte: http://www.ibge.gov.br/
Acessibilidade na web
Censo 2010
Pessoas com deficiência visual no Brasil
Fonte: http://www.ibge.gov.br/
Não consegue
(enx...
Estatísticas
Foto: Flickr.com - Jacob Bøtter
Número de pessoas com
60 anos ou mais
no mundo:
1950 – 205 milhões
2000 – 60...
Medo de usar o computador
Foto: everystockphoto.com - Violator3
Acessibilidade na web
65%
Falta de habilidade com o
computador/internet
Fonte: Pesquisa TIC Domicílios 2012 – CGI.br
Pesso...
Fontes pequenas
Fontes muito pequenas dificultam a leitura, mas alguns websites não permitem que suas fontes sejam aumenta...
Fontes pequenas
Utilize CSS para definir tamanhos de fontes:
Use unidades relativas em vez de absolutas
Em vez de
Font-siz...
Contraste
Contraste
Você consegue ler este texto.
Contraste
Você consegue ler este texto?
Contraste
Você não consegue ler este texto!
Contraste
Neil Harbisson
http://www.youtube.com/watch?v=CvPOh0p9cf0
Daltonismo
Daltonismo
Daltonismo
Uma menina com cabelos loiros, olhos
azuis vestida de rosa
Daltonismo
Visão normal
Daltonismo
Protanopia (Deficiências em vermelho)
Daltonismo
Deuteranopia (Deficiências em verde)
Daltonismo
Tritanopia (Deficiências em azul)
Daltonismo
Acromatopsia (Deficiências todas as cores)
Daltonismo
Nunca utilize somente cor para
transmitir uma informação na Web
Daltonismo
Formulários
Acessibilidade é para todos !
Usuários de Dispositivos Móveis
Foto: everystockphoto.com -bartimaeus-
Deficiência temporária
Foto: Flickr.com - Tuftronic10000
Início de aprendizado
Nosso primeiro contato
Idade Avançada
Nós, daqui
alguns
anos
Foto: Flickr.com - Jacob Bøtter
Site acessível é feio
Padrões Web
limitam o design
http://www.csszengarden.com/
Foto: Flickr.com - Patrick Q
Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/
Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/
Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/
Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/
Sua página não precisa ser feia para ser
acessível
Princípios do W3C
Web para todos,
em qualquer
dispositivo, em
qualquer lugar,
segura e
confiável!
Foto: everystockphoto.co...
A Web é feita por pessoas para pessoas
Nós somos os
responsáveis
por uma web
acessível
Obrigado!
Reinaldo Ferraz
W3C Escritório Brasil
www.w3c.br
Twitter: @w3cbrasil
reinaldo@nic.br
Twitter: @reinaldoferraz
Acessibilidade na Web
Acessibilidade na Web
Acessibilidade na Web
Acessibilidade na Web
Acessibilidade na Web
Acessibilidade na Web
Acessibilidade na Web
Acessibilidade na Web
Próximos SlideShares
Carregando em…5
×

Acessibilidade na Web

416 visualizações

Publicada em

Palestra sobre a importância da acessibilidade na Web e como melhorar a acessibilidade da página utilizando as diretrizes de acessibilidade do W3C

Publicada em: Internet
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

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

Nenhuma nota no slide

Acessibilidade na Web

  1. 1. Acessibilidade na web TIP - Santos 10 de junho de 2014 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. Público alvo
  20. 20. É muito caro! O prazo é curto! Dá muito trabalho! Não sei fazer!
  21. 21. 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/
  22. 22. WCAG 2.0 1 - Perceptível 2 - Operável 3 - Compreensível 4 - Robusto
  23. 23. 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
  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. ARIA e HTML5 WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o conteúdo e aplicativos web mais acessíveis a pessoas com deficiências. Ele contribui especialmente com conteúdo dinâmico e interface de controles de usuário avançadas desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas. http://www.w3.org/WAI/intro/aria
  28. 28. ARIA e HTML5 progressbar radiogroup scrollbar slider spinbutton status Tab tabpanel textbox tooltip 73 ROLES (Ou Papéis) alert Alertdialog button checkbox dialog menu menubar menuitem option ... http://www.w3.org/TR/wai-aria/roles#role_definitions
  29. 29. ARIA e HTML5 aria-activedescendant aria-atomic aria-autocomplete aria-busy (state) aria-checked (state) aria-controls aria-describedby aria-disabled (state) aria-dropeffect aria-expanded (state) aria-flowto aria-grabbed (state) 35 States and Properties (Estados e Propriedades) aria-haspopup aria-hidden (state) aria-invalid (state) aria-label aria-labelledby aria-level aria-live aria-multiline aria-multiselectable aria-orientation aria-owns ... http://www.w3.org/TR/wai-aria/states_and_properties
  30. 30. A Web conta histórias.
  31. 31. 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
  32. 32. Andy Walker
  33. 33. Acessibilidade na web 13.273.969 Censo 2010 Pessoas com deficiências motoras no Brasil Fonte: http://www.ibge.gov.br/
  34. 34. 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
  35. 35. Tornar todo o conteúdo operável via teclado
  36. 36. Operável via teclado
  37. 37. Operável via teclado CSS: a:hover a:focus JavaScript: onmouseover="#" onfocus="#" onmouseout="#" onblur="#"
  38. 38. Operável via teclado
  39. 39. Operável via teclado Um link “Pular para o conteúdo principal”
  40. 40. Formulários
  41. 41. Formulários
  42. 42. Formulários
  43. 43. Formulários
  44. 44. 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
  45. 45. 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>
  46. 46. Leonardo Gleisson
  47. 47. Acessibilidade na web 528.624 Censo 2010 Número de pessoas cegas no Brasil Fonte: http://www.ibge.gov.br/
  48. 48. Tecnologias assistivas
  49. 49. Tecnologias assistivas
  50. 50. Bloqueios de teclado
  51. 51. Bloqueios de teclado
  52. 52. Bloqueios de teclado
  53. 53. Cabeçalhos
  54. 54. 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>
  55. 55. Tabelas
  56. 56. Tabelas
  57. 57. 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
  58. 58. <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
  59. 59. Textos alternativos
  60. 60. <img /> Textos alternativos
  61. 61. <img /> <img alt="Foto das teclas W, 3 e C fora do teclado" /> Textos alternativos
  62. 62. <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
  63. 63. Textos alternativos <div class="foto" role="img" aria-label="Logo do W3C que está dentro do CSS"></div> <img src="img-slides/w3clogo.png" alt="Logo do W3C dentro do HTML">
  64. 64. Imagens para layout
  65. 65. CaPtcHa
  66. 66. CaPtcHa Exemplos Ou Que dia vem depois de sexta-feira? Digite o código
  67. 67. Formulários
  68. 68. Formulários
  69. 69. 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
  70. 70. Formulários
  71. 71. Formulários
  72. 72. <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
  73. 73. 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
  74. 74. 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
  75. 75. <!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
  76. 76. <!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
  77. 77. Ivy Bean
  78. 78. Acessibilidade na web 35.791.488 Censo 2010 Pessoas com deficiência visual no Brasil Fonte: http://www.ibge.gov.br/
  79. 79. 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
  80. 80. 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/
  81. 81. Medo de usar o computador Foto: everystockphoto.com - Violator3
  82. 82. Acessibilidade na web 65% Falta de habilidade com o computador/internet Fonte: Pesquisa TIC Domicílios 2012 – CGI.br Pessoas que nunca acessaram a internet, mas usaram um computador. Motivos pelos quais nunca utilizou a internet Fonte: http://www.cetic.br/
  83. 83. 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.
  84. 84. 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;
  85. 85. Contraste
  86. 86. Contraste
  87. 87. Você consegue ler este texto. Contraste
  88. 88. Você consegue ler este texto? Contraste
  89. 89. Você não consegue ler este texto! Contraste
  90. 90. Neil Harbisson http://www.youtube.com/watch?v=CvPOh0p9cf0
  91. 91. Daltonismo
  92. 92. Daltonismo
  93. 93. Daltonismo Uma menina com cabelos loiros, olhos azuis vestida de rosa
  94. 94. Daltonismo Visão normal
  95. 95. Daltonismo Protanopia (Deficiências em vermelho)
  96. 96. Daltonismo Deuteranopia (Deficiências em verde)
  97. 97. Daltonismo Tritanopia (Deficiências em azul)
  98. 98. Daltonismo Acromatopsia (Deficiências todas as cores)
  99. 99. Daltonismo Nunca utilize somente cor para transmitir uma informação na Web
  100. 100. Daltonismo
  101. 101. Formulários
  102. 102. Acessibilidade é para todos !
  103. 103. Usuários de Dispositivos Móveis Foto: everystockphoto.com -bartimaeus-
  104. 104. Deficiência temporária Foto: Flickr.com - Tuftronic10000
  105. 105. Início de aprendizado Nosso primeiro contato
  106. 106. Idade Avançada Nós, daqui alguns anos Foto: Flickr.com - Jacob Bøtter
  107. 107. Site acessível é feio Padrões Web limitam o design
  108. 108. http://www.csszengarden.com/ Foto: Flickr.com - Patrick Q
  109. 109. Foto: Flickr.com - Patrick Q http://www.csszengarden.com/
  110. 110. Foto: Flickr.com - Patrick Q http://www.csszengarden.com/
  111. 111. Foto: Flickr.com - Patrick Q http://www.csszengarden.com/
  112. 112. Foto: Flickr.com - Patrick Q http://www.csszengarden.com/
  113. 113. Sua página não precisa ser feia para ser acessível
  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

×