O documento discute acessibilidade na web. Ele fornece informações sobre o W3C e suas diretrizes de acessibilidade WCAG 2.0, aborda desafios comuns de acessibilidade como fontes pequenas e formatação de tabelas, e apresenta estatísticas sobre deficiências no Brasil.

1. Acessibilidade na web
TIP - Santos
10 de junho de 2014
Reinaldo Ferraz – W3C.br
@reinaldoferraz
@w3cbrasil

4. Um pouco do W3C

5. Um pouco do W3C

6. O W3C no Brasil

7. http://premio.w3c.br/

8. Acessibilidade, para quem?

9. Cegos – Daltônicos - Baixa visão
Foto: everystockphoto.com - namida-k

10. Surdos
Foto: everystockphoto.com - jessicafm

11. Mobilidade reduzida

12. Acessibilidade na web
Porque não
desenvolvemos
web sites
acessíveis?
Algumas hipóteses:

13. Desconhecimento

14. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

15. 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://random.irb.hr/signup.php
http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

18. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

19. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/

20. Acessibilidade na web
Preconceito

22. Público alvo

23. É muito caro!
O prazo é curto!
Dá muito trabalho!
Não sei fazer!

24. 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/

25. WCAG 2.0
1 - Perceptível
2 - Operável
3 - Compreensível
4 - Robusto

26. 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

27. http://1997.webhistory.org/www.lists/www-talk.1993q1/0182.html
Futuro da Web

28. http://1997.webhistory.org/www.lists/www-html.1995q2/0128.html
Futuro da Web

29. http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2006-October/007520.html
Futuro da Web

30. 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

31. 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

32. 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

33. A Web conta histórias.

34. 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

35. Andy Walker

36. Acessibilidade na web
13.273.969
Censo 2010
Pessoas com deficiências motoras no Brasil
Fonte: http://www.ibge.gov.br/

37. 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

38. Tornar todo o conteúdo
operável via teclado

39. Operável via teclado

40. Operável via teclado
CSS:
a:hover
a:focus
JavaScript:
onmouseover="#"
onfocus="#"
onmouseout="#"
onblur="#"

41. Operável via teclado

42. Operável via teclado
Um link “Pular para o conteúdo principal”

43. Formulários

44. Formulários

45. Formulários

46. Formulários

47. 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

48. 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>

49. Leonardo Gleisson

50. Acessibilidade na web
528.624
Censo 2010
Número de pessoas cegas no Brasil
Fonte: http://www.ibge.gov.br/

51. Tecnologias assistivas

52. Tecnologias assistivas

53. Bloqueios de teclado

54. Bloqueios de teclado

55. Bloqueios de teclado

56. Cabeçalhos

57. 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>

60. Tabelas

61. Tabelas

62. 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

63. <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

64. Textos alternativos

65. <img />
Textos alternativos

66. <img />
<img alt="Foto das teclas W, 3 e C
fora do teclado" />
Textos alternativos

67. <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

68. 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">

70. Imagens para layout

71. CaPtcHa

72. CaPtcHa
Exemplos
Ou
Que dia vem depois de sexta-feira?
Digite o código

73. Formulários

74. Formulários

75. 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

76. Formulários

77. Formulários

78. <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

79. 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

80. 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

81. <!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

82. <!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

83. Ivy Bean

85. Acessibilidade na web
35.791.488
Censo 2010
Pessoas com deficiência visual no Brasil
Fonte: http://www.ibge.gov.br/

86. 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

87. 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/

88. Medo de usar o computador
Foto: everystockphoto.com - Violator3

89. 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/

90. 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.

91. 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;

92. Contraste

93. Contraste

94. Você consegue ler este texto.
Contraste

95. Você consegue ler este texto?
Contraste

96. Você não consegue ler este texto!
Contraste

97. Neil Harbisson
http://www.youtube.com/watch?v=CvPOh0p9cf0

98. Daltonismo

99. Daltonismo

100. Daltonismo
Uma menina com cabelos loiros, olhos
azuis vestida de rosa

101. Daltonismo
Visão normal

102. Daltonismo
Protanopia (Deficiências em vermelho)

103. Daltonismo
Deuteranopia (Deficiências em verde)

104. Daltonismo
Tritanopia (Deficiências em azul)

105. Daltonismo
Acromatopsia (Deficiências todas as cores)

106. Daltonismo
Nunca utilize somente cor para
transmitir uma informação na Web

107. Daltonismo

108. Formulários

109. Acessibilidade é para todos !

110. Usuários de Dispositivos Móveis
Foto: everystockphoto.com -bartimaeus-

111. Deficiência temporária
Foto: Flickr.com - Tuftronic10000

112. Início de aprendizado
Nosso primeiro contato

113. Idade Avançada
Nós, daqui
alguns
anos
Foto: Flickr.com - Jacob Bøtter

114. Site acessível é feio
Padrões Web
limitam o design

115. http://www.csszengarden.com/
Foto: Flickr.com - Patrick Q

116. Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/

117. Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/

118. Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/

119. Foto: Flickr.com - Patrick Q
http://www.csszengarden.com/

121. Sua página não precisa ser feia para ser
acessível

122. Princípios do W3C
Web para todos,
em qualquer
dispositivo, em
qualquer lugar,
segura e
confiável!
Foto: everystockphoto.com - woodleywonderworks

123. A Web é feita por pessoas para pessoas

124. Nós somos os
responsáveis
por uma web
acessível

125. Obrigado!
Reinaldo Ferraz
W3C Escritório Brasil
www.w3c.br
Twitter: @w3cbrasil
reinaldo@nic.br
Twitter: @reinaldoferraz