Palestra sobre Acessibilidade na Web feita na abertura do Computer on the Beach 2015

1. Acessibilidade na Web
Computer on the Beach
Março - 2015
Reinaldo Ferraz
W3C Brasil

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

4. http://www.w3c.br/GT/GrupoAcessibilidade

5. Acessibilidade na Web: A quem se destina?

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

7. Deficiência auditiva

8. Deficiência motora

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

11. Você acha que sabe tudo do seu usuário?

12. NÃO

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

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

15. Desconhecimento

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

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

24. Público alvo

25. Acessibilidade na web
Beneficia pessoas com deficiência

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

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

29. Acessibilidade deve fazer parte da rotina

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

31. Diretrizes de Acessibilidade para Conteúdo Web
http://www.w3.org/Translations/WCAG20-pt-br/

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

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

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

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

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

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

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

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

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

43. reinaldoferraz.com.br

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

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

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

49. html5accessibility.com

50. Situação 3:
Menu e Submenus

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

53. Situação 4:
Formulários

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

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

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

57. Slider

60. html5accessibility.com

61. html5accessibility.com

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

64. Contraste
Ishihara Test

65. Visão normal

66. Protanopia (Deficiências em vermelho)

67. Deuteranopia (Deficiências em verde)

68. Tritanopia (Deficiências em azul)

69. Acromatopsia (Deficiências todas as cores)

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

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

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

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

77. <span aria-live=“off">Mensagem dinâmica</span>
<span aria-live=“polite"> Mensagem dinâmica</span>

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

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

80. Tks
reinaldo@nic.br @reinaldoferraz
w3cbrasil@nic.br @w3cbrasil Facebook.com/W3CBrasil