Your SlideShare is downloading. ×
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,022

Published on

Palestra feita na QconSP em abril de 2014 sobre os padrões de acessibilidade na Web do W3C (WCAG e WAI-ARIA) e como o código é apresentado ao usuário que utiliza um software leitor de tela.

Palestra feita na QconSP em abril de 2014 sobre os padrões de acessibilidade na Web do W3C (WCAG e WAI-ARIA) e como o código é apresentado ao usuário que utiliza um software leitor de tela.

Published in: Internet
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,022
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
19
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Fazendo a Web falar: HTML5, WAI-ARIA e NVDA
  • 2. Em breve
  • 3. Público premio.w3c.br
  • 4. 25 e 26 de Setembro em São Paulo!
  • 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
  • 10. Estatísticas No mundo, esse número é aproximadamente 1 bilhão de pessoas Fonte: ONU
  • 11. Acessibilidade na web Beneficia pessoas com deficiência
  • 12. Acessibilidade na web: A quem se destina? Acessibilidade é para todos !
  • 13. Você acha que tem controle sobre o seu usuário?
  • 14. NÃO
  • 15. Você não tem controle sobre o seu usuário
  • 16. Acessibilidade deve fazer parte da rotina
  • 17. Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/
  • 18. Princípio 1: Perceptível Princípio 2: Operável Princípio 3: Compreensível Princípio 4: Robusto Princípios do WCAG
  • 19. 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
  • 20. 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
  • 21. 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
  • 22. ARIA e HTML5 Implementação por leitores de tela: Landmark roles são suportadas em • JAWS 10 • NVDA 2010.1+ • VoiceOver no iPhone IOS4.
  • 23. • 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
  • 24. Situação 1: Uma galeria de imagens
  • 25. <img src=“starwars.jpg” alt=“Foto de Luke Skywalker no filme Star Wars – O império contra ataca”>
  • 26. <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">
  • 27. reinaldoferraz.com.br
  • 28. Exemplos
  • 29. Situação 2: Uma página cheia de destaques
  • 30. <a href=“#contents”>Saltar</a> <elemento id=“contents”>
  • 31. <h1>...</h1> <h2>...</h2> <h3>...</h3> <h2>...<h2> <h3>...</h3> <h4>...</h4> <h2>...</h2> <h3>...</h3>
  • 32. html5accessibility.com
  • 33. <input type=“email”> <input type=“url”> <input type=“tel”>
  • 34. Exemplos
  • 35. Situação 3: Menu e Submenus
  • 36. CSS: a:hover a:focus JavaScript: onmouseover="#" onfocus="#" onmouseout="#" onblur="#"
  • 37. Exemplos
  • 38. Situação 4: Formulários
  • 39. <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>
  • 40. <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>
  • 41. <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>
  • 42. CAPTCHA
  • 43. Exemplos
  • 44. Slider
  • 45. Exemplos
  • 46. Não dá para usar o input type=“range”?
  • 47. SIM!
  • 48. html5accessibility.com
  • 49. html5accessibility.com
  • 50. Exemplos
  • 51. Situação 5: Utilização de cores
  • 52. Exemplos
  • 53. Situação 4: Múltiplos idiomas
  • 54. Exemplos
  • 55. Situação 5: Elementos dinâmicos
  • 56. <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>
  • 57. Tablist
  • 58. <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">
  • 59. Exemplos
  • 60. Live Regions
  • 61. Exemplos
  • 62. 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
  • 63. 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

×