Acessibilidade na web - Computer on the Beach 2015

493 visualizações

Publicada em

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

Publicada em: Internet
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
493
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Acessibilidade na web - Computer on the Beach 2015

  1. 1. Acessibilidade na Web Computer on the Beach Março - 2015 Reinaldo Ferraz W3C Brasil
  2. 2. http://premio.w3c.br/
  3. 3. http://www.w3c.br/GT/GrupoAcessibilidade
  4. 4. Acessibilidade na Web: A quem se destina?
  5. 5. Cegos - daltônicos - baixa visão
  6. 6. Deficiência auditiva
  7. 7. Deficiência motora
  8. 8. Estatísticas Pessoas com deficiências no Brasil 24% 45.623.910 pessoas Fonte: Censo 2010
  9. 9. Você acha que sabe tudo do seu usuário?
  10. 10. NÃO
  11. 11. Você não tem controle sobre o seu usuário
  12. 12. Acessibilidade na web Porque não desenvolvemos web sites acessíveis? Algumas hipóteses:
  13. 13. Desconhecimento
  14. 14. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  15. 15. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  16. 16. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  17. 17. http://random.irb.hr/signup.php http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  18. 18. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  19. 19. http://www.seosmarty.com/impossible-captcha-it-doesnt-really-matter-if-you-are-human-or-not/
  20. 20. Acessibilidade na web Preconceito
  21. 21. Público alvo
  22. 22. Acessibilidade na web Beneficia pessoas com deficiência
  23. 23. Acessibilidade na web: A quem se destina? Acessibilidade é para todos !
  24. 24. É muito caro! O prazo é curto! Dá muito trabalho! Não sei fazer!
  25. 25. Acessibilidade deve fazer parte da rotina
  26. 26. Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/
  27. 27. Diretrizes de Acessibilidade para Conteúdo Web http://www.w3.org/Translations/WCAG20-pt-br/
  28. 28. Princípio 1: Perceptível Princípio 2: Operável Princípio 3: Compreensível Princípio 4: Robusto Princípios do WCAG
  29. 29. 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
  30. 30. 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
  31. 31. 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
  32. 32. ARIA e HTML5 Implementação por leitores de tela: Landmark roles são suportadas em • JAWS 10 • NVDA 2010.1+ • VoiceOver no iPhone IOS4.
  33. 33. 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
  34. 34. Situação 1: Uma galeria de imagens
  35. 35. <img src=“starwars.jpg” alt=“Foto de Luke Skywalker no filme Star Wars – O império contra ataca”>
  36. 36. <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">
  37. 37. reinaldoferraz.com.br
  38. 38. Situação 2: Uma página cheia de destaques
  39. 39. <a href=“#contents”>Saltar</a> <elemento id=“contents”>
  40. 40. <h1>...</h1> <h2>...</h2> <h3>...</h3> <h2>...<h2> <h3>...</h3> <h4>...</h4> <h2>...</h2> <h3>...</h3>
  41. 41. html5accessibility.com
  42. 42. Situação 3: Menu e Submenus
  43. 43. CSS: a:hover a:focus JavaScript: onmouseover="#" onfocus="#" onmouseout="#" onblur="#"
  44. 44. Situação 4: Formulários
  45. 45. <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>
  46. 46. <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>
  47. 47. <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>
  48. 48. Slider
  49. 49. html5accessibility.com
  50. 50. html5accessibility.com
  51. 51. Situação 5: Utilização de cores
  52. 52. Contraste Ishihara Test
  53. 53. Visão normal
  54. 54. Protanopia (Deficiências em vermelho)
  55. 55. Deuteranopia (Deficiências em verde)
  56. 56. Tritanopia (Deficiências em azul)
  57. 57. Acromatopsia (Deficiências todas as cores)
  58. 58. Situação 4: Múltiplos idiomas
  59. 59. <html lang=“pt-br”> ... Esse texto está em português <span lang=“en”>and in english</span>
  60. 60. Situação 5: Elementos dinâmicos
  61. 61. <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>
  62. 62. <span aria-live=“off">Mensagem dinâmica</span> <span aria-live=“polite"> Mensagem dinâmica</span>
  63. 63. 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
  64. 64. “Se o seu site não está pronto para receber TODAS as pessoas, o site é deficiente.” Adaptado da arq. Thais Frota
  65. 65. Tks reinaldo@nic.br @reinaldoferraz w3cbrasil@nic.br @w3cbrasil Facebook.com/W3CBrasil

×