Nobody leaves this place without coding an accessible projetc

1.334 visualizações

Publicada em

Palestra sobre acessibilidade na Web, WCAG e ARIA no Front In Sampa em 14 de setembro de 2013

Publicada em: Tecnologia
1 comentário
6 gostaram
Estatísticas
Notas
  • Palestra show...

    Nessa palestra deveria ter como auditório todos os setores de uma empresa, agência e etc. Por o programador convencer sozinho que acessibilidade é necessário é uma tarefa difícil.

    O importante é estudar e sempre que possível aplicar os conhecimentos ricos não só pela técnica e sim pela razão!
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
Sem downloads
Visualizações
Visualizações totais
1.334
No SlideShare
0
A partir de incorporações
0
Número de incorporações
366
Ações
Compartilhamentos
0
Downloads
11
Comentários
1
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Nobody leaves this place without coding an accessible projetc

  1. 1. http://youtu.be/VbruE1qIFQA
  2. 2. Acessibilidade na Web: A quem se destina?
  3. 3. Cegos - daltônicos - baixa visão
  4. 4. Deficiência auditiva
  5. 5. Deficiência motora
  6. 6. Estatísticas Pessoas com deficiências no Brasil 24% 45.623.910 pessoas Fonte: Censo 2010
  7. 7. Estatísticas No mundo, esse número é aproximadamente 650 milhões pessoas Fonte: ONU
  8. 8. Você não tem controle sobre o seu usuário
  9. 9. Acessibilidade deve fazer parte da rotina
  10. 10. Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/ WCAG
  11. 11. Princípio 1: Perceptível Princípio 2: Operável Princípio 3: Compreensível Princípio 4: Robusto Princípios do WCAG
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. ARIA e HTML5 Implementação por leitores de tela: Landmark roles são suportadas em • JAWS 10 • NVDA 2010.1+ • VoiceOver no iPhone IOS4.
  16. 16. Agora começa a aventura
  17. 17. ALT
  18. 18. <img src=“babisitting.jpg” alt=“Foto com a capa do filme em VHS Uma noite de aventuras”>
  19. 19. <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">
  20. 20. Exemplos
  21. 21. SALTAR CONTEÚDO REPETIDO
  22. 22. <a href=“#contents”>Saltar</a> <elemento id=“contents”>
  23. 23. CABEÇALHOS
  24. 24. <h1>...</h1> <h2>...</h2> <h3>...</h3> <h2>...<h2> <h3>...</h3> <h4>...</h4> <h2>...</h2> <h3>...</h3>
  25. 25. FOCUS
  26. 26. CSS: a:hover a:focus JavaScript: onmouseover="#" onfocus="#" onmouseout="#" onblur="#"
  27. 27. Exemplos
  28. 28. FORM
  29. 29. <fieldset> <legend> Casa de espetáculos </legend> <label for="text"> Nome do artista</label> <input id="text" type="text" aria-describedby="comp"> <p id="comp"> Ei! dá para colocar descrição relacionada ao campo!</p> </fieldset>
  30. 30. <fieldset> <legend> Casa de espetáculos </legend> <label for="text"> Nome do artista</label> <input id="text" type="text" aria-describedby="comp"> <p id="comp"> Ei! dá para colocar descrição relacionada ao campo!</p> </fieldset>
  31. 31. <fieldset> <legend> Casa de espetáculos </legend> <label for="text"> Nome do artista</label> <input id="text" type="text" aria-describedby="comp"> <p id="comp"> Ei! dá para colocar descrição relacionada ao campo!</p> </fieldset>
  32. 32. CAPTCHA
  33. 33. Exemplos
  34. 34. SLIDER
  35. 35. Exemplos
  36. 36. Não dá para usar o input type=“range”?
  37. 37. SIM!
  38. 38. html5accessibility.com
  39. 39. html5accessibility.com
  40. 40. Exemplos
  41. 41. CONTRASTE
  42. 42. LANG
  43. 43. Exemplos
  44. 44. LANDMARKS
  45. 45. STATUS DINÂMICO
  46. 46. <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>
  47. 47. LIVE REGIONS LIVE REGIONS
  48. 48. Exemplos
  49. 49. 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
  50. 50. http://premio.w3c.br/
  51. 51. R$ 5.000,00
  52. 52. 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

×