[1] O documento discute a importância da acessibilidade na web para pessoas com deficiências e como tornar sites acessíveis através do uso de semântica do HTML e atributos ARIA. [2] Ele também fornece exemplos de como tornar elementos como imagens, menus, formulários e conteúdo dinâmico acessíveis. [3] Por fim, o documento enfatiza a importância de seguir as diretrizes WCAG e testar a acessibilidade regularmente.

1. Acessibilidade na web
Google I/O - SP
26 de junho de 2014
Reinaldo Ferraz
@reinaldoferraz

3. http://premio.w3c.br/

5. Acessibilidade na Web: A quem se destina?

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

7. Surdos
Foto: everystockphoto.com - jessicafm

8. Mobilidade reduzida

9. Estatísticas
Pessoas com deficiências no Brasil
24%
45.623.910 pessoas
Fonte: Censo 2010

10. Estatísticas
No mundo, esse número é
aproximadamente
1 bilhão
de pessoas
Fonte: ONU

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://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. Acessibilidade na web
Preconceito

21. Público alvo

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

23. Já testou seu site?
Foto: Flickr.com - Baddog_

24. Já testou o seu site?
Acessível via teclado
Foto: Flickr.com - Baddog_

25. Já testou o seu site?

26. Já testou o seu site?
Vídeos com legendas

27. Já testou o seu site?
Sem CSS
e imagens
Foto: Flickr.com - Baddog_

28. Ou mesmo sem monitor

29. Acessibilidade na web
Beneficia pessoas com deficiência

30. Acessibilidade na web: A quem se destina?
Acessibilidade é para todos !

32. Você acha que tem controle sobre o seu
usuário?

33. NÃO

34. Você não tem controle sobre o seu usuário

35. Acessibilidade deve fazer parte da rotina

36. Web Content Accessibility Guidelines
http://www.w3.org/TR/WCAG/

37. Princípio 1: Perceptível
Princípio 2: Operável
Princípio 3: Compreensível
Princípio 4: Robusto
Princípios do WCAG

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

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

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

41. ARIA e HTML5
Implementação por leitores de tela:
Landmark roles são suportadas em
• JAWS 10
• NVDA 2010.1+
• VoiceOver no iPhone IOS4.

44. As WCAG utilizam a semântica do HTML
para tornar o conteúdo acessível
ARIA são atributos que conseguem mudar a
semântica dos elementos para tornar o
conteúdo acessível

45. Situação 1:
Uma galeria de imagens

46. <img src=“starwars.jpg”
alt=“Foto de Luke Skywalker no filme Star
Wars – O império contra ataca”>

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

48. reinaldoferraz.com.br

49. Situação 2:
Uma página cheia de
destaques

52. <a href=“#contents”>Saltar</a>
<elemento id=“contents”>

53. <h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h2>...<h2>
<h3>...</h3>
<h4>...</h4>
<h2>...</h2>
<h3>...</h3>

54. html5accessibility.com

55. Situação 3:
Menu e Submenus

56. CSS:
a:hover
a:focus
JavaScript:
onmouseover="#"
onfocus="#"
onmouseout="#"
onblur="#"

57. Situação 4:
Formulários

58. <fieldset>
<legend>
Identifique-se!
</legend>
<label for="text">
Nome</label>
<input id="text" type="text"
aria-describedby="comp">
<p id="comp">
Preencha seu nome
de verdade, viu?</p>
</fieldset>

59. <fieldset>
<legend>
Identifique-se!
</legend>
<label for="text">
Nome</label>
<input id="text" type="text"
aria-describedby="comp">
<p id="comp">
Preencha seu nome
de verdade, viu?</p>
</fieldset>

60. <fieldset>
<legend>
Identifique-se!
</legend>
<label for="text">
Nome</label>
<input id="text" type="text"
aria-describedby="comp">
<p id="comp">
Preencha seu nome
de verdade, viu?</p>
</fieldset>

61. Slider

63. Não dá para usar o
input type=“range”?

64. SIM!

65. html5accessibility.com

66. html5accessibility.com

67. Situação 5:
Utilização de cores

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

70. Daltonismo

71. Daltonismo

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

73. Daltonismo
Visão normal

74. Daltonismo
Protanopia (Deficiências em vermelho)

75. Daltonismo
Deuteranopia (Deficiências em verde)

76. Daltonismo
Tritanopia (Deficiências em azul)

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

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

79. Daltonismo

80. Situação 4:
Múltiplos idiomas

81. <html lang=“pt-br”>
...
Esse texto está em português

82. <html lang=“pt-br”>
...
Esse texto está em português <span
lang=“en”>and this one in english</span>

83. Situação 5:
Elementos dinâmicos

84. <button role=“button” aria-pressed=“false”>
<img src=“off.png” alt=“Status Desligado”>
</button>
<button role=“button” aria-pressed=“true”>
<img src=“on.png” alt=“Status Ligado”>
</button>

85. <div class="message">
<span id="messages" aria-live="assertive"></span>
</div>
<div class="message">
<span id="messages" aria-live=“off" ></span>
</div>

86. Dicas importantes para melhorar a acessibilidade
• Validação de Markup
• Siga as diretrizes de
acessibilidade (WCAG e ARIA)
• Validação automática de
acessibilidade
• Verificação de avisos
• Teste com tecnologias assistivas
• Coloque a acessibilidade na rotina
do desenvolvimento

87. Obrigado!
@reinaldoferraz
“Se o seu site não está pronto para receber
TODAS as pessoas, o site é deficiente.”
Adaptado da arq. Thais Frota