O objetivo desta palestra é apresentar como a acessibilidade na Web impacta a vida de todos e como pequenas intervenções podem fazer uma enorme diferença no acesso de pessoas com deficiência na Web. Serão apresentados os principais motivos para tornar a Web acessível e exemplos práticos de como a acessibilidade na Web funciona na prática.

1. Acessibilidade na Web
Desenvolvendo para pessoas e não só para máquinas
Reinaldo Ferraz – W3C Brasil - CEWEB.br

2. @reinaldoferraz
Slideshare.com/reinaldoferraz

5. Acessibilidade na Web: A quem se destina?

6. Cegos - daltônicos - baixa visão

7. Deficiência auditiva

8. Deficiência motora

10. 24%
45.623.910 pessoas
Censo 2010
Fonte: http://www.ibge.gov.br/home/estatistica/populacao/censo2010/resultados_preliminares/default_resultados_preliminares.shtm

11. Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm
LEI Nº 13.146, DE 6 DE JULHO DE 2015.
Art. 63. É obrigatória a acessibilidade nos sítios da
internet mantidos por empresas com sede ou
representação comercial no País ou por órgãos de
governo, para uso da pessoa com deficiência,
garantindo-lhe acesso às informações disponíveis,
conforme as melhores práticas e diretrizes de
acessibilidade adotadas internacionalmente.

12. LEI Nº 13.146, DE 6 DE JULHO DE 2015.
Art. 63. É obrigatória a acessibilidade nos sítios da
internet mantidos por empresas com sede ou
representação comercial no País ou por órgãos de
governo, para uso da pessoa com deficiência,
garantindo-lhe acesso às informações disponíveis,
conforme as melhores práticas e diretrizes de
acessibilidade adotadas internacionalmente.
Fonte: http://www.planalto.gov.br/ccivil_03/_Ato2015-2018/2015/Lei/L13146.htm

13. A Web foi feita para as pessoas

14. AndyWalker

15. LeonardoGleisson

16. IvyBean

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

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

19. Desconhecimento

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

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

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

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

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

25. Preconceito

27. Público alvo

29. Játestouoseusite?

30. Foto: Flickr.com - Baddog_

32. Beneficia pessoas com deficiência

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

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

36. NÃO

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

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

39. Acessibilidade deve fazer parte da rotina

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

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

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

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

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

45. Landmark roles são suportadas em
• JAWS 10
• NVDA 2010.1+
• VoiceOver no iPhone IOS4.

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

48. Quatro regras de WAI-ARIA

49. Regra nº 1
Não use ARIA
(prefira os elementos semânticos do HTML)

50. Regra nº 2
Não mude a semântica
dos elementos
(apenas se você realmente precisar)

51. Não faça isso:
<h1 role=button>heading button</h1>

52. Não faça isso:
<h1 role=button>heading button</h1>
Faça isso:
<h1>
<button>heading button</button>
</h1>

53. Não faça isso:
<h1 role=button>heading button</h1>
Faça isso:
<h1>
<button>heading button</button>
</h1>
Se não puder usar o elemento correto, faça isso:
<h1>
<span role=button>heading button</span>
</h1>

54. Regra nº 3
Todos os controles
interativos devem ser
acessíveis via teclado

55. Regra nº 4
Não use
role="presentation" ou
aria-hidden="true“ em um
elemento de foco visível

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

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

59. reinaldoferraz.com.br

60. Situação 2:
Esconder conteúdo de um
leitor de tela

61. <a href=“#”
role="presentation">
<img src=“starwars.jpg”
alt=“Foto de Luke Skywalker no filme Star
Wars – O império contra ataca”>
</a>
<a href=“#”
aria-hidden="true“>
<img src=“starwars.jpg”
alt=“Foto de Luke Skywalker no filme Star
Wars – O império contra ataca”>
</a>

62. <p aria-hidden="true“>
Conteúdo que deve estar escondido não deve
permitir foco via teclado. Utilizar role
presentation somente tira a semântica do
elemento.
</p>

63. Formas de ocultar elementos e efeitos na acessibilidade
CSS Efeito na tela Efeito na acessibilidade
visibility:hidden;
O elemento fica oculto, mas
continua a ocupar o espaço
que normalmente ocuparia
O conteúdo é ignorado pelos
leitores de tela
display:none;
O elemento fica oculto e não
ocupa espaço
O conteúdo é ignorado pelos
leitores de tela
height: 0;
width: 0;
overflow: hidden;
O elemento fica oculto e não
ocupa espaço
O conteúdo é ignorado pelos
leitores de tela
text-indent: -999em;
O conteúdo é movido para
"fora da tela", não sendo mais
visível, mas links podem ser
focalizados de maneira
imprevisível
Os leitores de tela acessam o
conteúdo, mas somente texto
e elementos inline
position: absolute; left: -
999em;
O conteúdo é removido de
sua posição, não ocupando
espaço e é movido para "fora
da tela", ficando oculto
Os leitores de tela acessam o
conteúdo
Fonte: http://emag.governoeletronico.gov.br/cursodesenvolvedor/desenvolvimento-web/praticas-web-acessivel-apresentacao-design.html

64. Exemplos

65. Situação 3:
Uma página cheia de destaques

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

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

70. html5accessibility.com

71. <input type=“email”>
<input type=“url”>
<input type=“tel”>

73. Exemplos

74. Situação 4:
Menu e Submenus

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

76. Exemplos

77. Situação 5:
Formulários

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

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

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

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

82. html5accessibility.com

83. Exemplos

84. Situação 6:
Utilização de cores

86. Visão normal

87. Protanopia (Deficiências em vermelho)

88. Deuteranopia (Deficiências em verde)

89. Tritanopia (Deficiências em azul)

90. Acromatopsia (Deficiências todas as cores)

94. Exemplos

95. Situação 7:
Múltiplos idiomas

96. Exemplos

97. Situação 8:
Elementos dinâmicos

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

99. Live Regions

100. Exemplos

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

102. http://premio.ceweb.br/

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