O documento discute a acessibilidade na web para pessoas com deficiência, cobrindo tópicos como: 1) como HTML5, WAI-ARIA e leitores de tela como NVDA podem tornar conteúdo acessível; 2) exemplos de como usar ARIA para melhorar a semântica e acessibilidade; e 3) dicas importantes para desenvolvedores melhorarem a acessibilidade de seus sites.

1. Fazendo a Web falar:
HTML5, WAI-ARIA e NVDA

2. Em breve

5. Público
premio.w3c.br

6. 25 e 26 de Setembro em São Paulo!

7. Acessibilidade na Web: A quem se destina?

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

9. Deficiência auditiva

10. Deficiência motora

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

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

14. Acessibilidade na web
Beneficia pessoas com deficiência

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

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

18. NÃO

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

20. Acessibilidade deve fazer parte da rotina

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

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

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

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

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

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

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

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

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

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

35. reinaldoferraz.com.br

36. Exemplos

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

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

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

42. html5accessibility.com

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

45. Exemplos

46. Situação 3:
Menu e Submenus

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

48. Exemplos

49. Situação 4:
Formulários

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

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

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

53. CAPTCHA

54. Exemplos

55. Slider

57. Exemplos

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

59. SIM!

60. html5accessibility.com

61. html5accessibility.com

62. Exemplos

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

65. Exemplos

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

67. Exemplos

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

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

70. Tablist

71. <ul role="tablist">
<li
role="tab“
id="tab1"
aria-controls="panel1"
aria-selected="false">
Valores</li>
</ul>
<div
id="panel1"
aria-labelledby="tab1"
role="tabpanel"
aria-hidden="true">

72. Exemplos

73. Live Regions

74. Exemplos

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

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