Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

1.587 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Internet

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

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

×