Your SlideShare is downloading. ×
0
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
Acessibilidade na Web modo Jedi Master
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

Acessibilidade na Web modo Jedi Master

869

Published on

Palestra feita no Front In Poa em novembro de 2013 sobre acessibilidade na Web, WCAG, ARIA e recursos que podem ser implementados para melhorar a acessibilidade dos projetos web.

Palestra feita no Front In Poa em novembro de 2013 sobre acessibilidade na Web, WCAG, ARIA e recursos que podem ser implementados para melhorar a acessibilidade dos projetos web.

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
869
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
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. Acessibilidade na Web: A quem se destina?
  • 2. Cegos - daltônicos - baixa visão
  • 3. Deficiência auditiva
  • 4. Deficiência motora
  • 5. Estatísticas Pessoas com deficiências no Brasil 24% 45.623.910 pessoas Fonte: Censo 2010
  • 6. Estatísticas No mundo, esse número é aproximadamente 650 milhões pessoas Fonte: ONU
  • 7. Você não tem controle sobre o seu usuário
  • 8. Acessibilidade deve fazer parte da rotina
  • 9. WCAG Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/
  • 10. Princípios do WCAG Princípio 1: Perceptível Princípio 2: Operável Princípio 3: Compreensível Princípio 4: Robusto
  • 11. 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
  • 12. ARIA e HTML5 73 ROLES (Ou Papéis) progressbar radiogroup scrollbar slider spinbutton status Tab tabpanel textbox tooltip alert Alertdialog button checkbox dialog menu menubar menuitem option ... http://www.w3.org/TR/wai-aria/roles#role_definitions
  • 13. ARIA e HTML5 35 States and Properties (Estados e Propriedades) 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) 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
  • 14. ARIA e HTML5 Implementação por leitores de tela: Landmark roles são suportadas em • JAWS 10 • NVDA 2010.1+ • VoiceOver no iPhone IOS4.
  • 15. Academia Jedi de acessibilidade
  • 16. ALT
  • 17. <img src=“starwars.jpg” alt=“Foto com a capa do filme Star Wars – O império contra ataca”>
  • 18. <div class="foto" role="img" aria-label="Logo do W3C que está dentro do CSS"></div> <img src="imgslides/w3clogo.png" alt="Logo do W3C dentro do HTML">
  • 19. Exemplos
  • 20. SALTAR CONTEÚDO REPETIDO
  • 21. <a href=“#contents”>Saltar</a> <elemento id=“contents”>
  • 22. CABEÇALHOS
  • 23. <h1>...</h1> <h2>...</h2> <h3>...</h3> <h2>...<h2> <h3>...</h3> <h4>...</h4> <h2>...</h2> <h3>...</h3>
  • 24. FOCUS
  • 25. CSS: a:hover a:focus JavaScript: onmouseover="#" onfocus="#" onmouseout="#" onblur="#"
  • 26. Exemplos
  • 27. FORM
  • 28. <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>
  • 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. <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. CAPTCHA
  • 32. Exemplos
  • 33. SLIDER
  • 34. Exemplos
  • 35. Não dá para usar o input type=“range”?
  • 36. SIM!
  • 37. html5accessibility.com
  • 38. html5accessibility.com
  • 39. Exemplos
  • 40. CONTRASTE
  • 41. LANG
  • 42. Exemplos
  • 43. LANDMARKS
  • 44. STATUS DINÂMICO
  • 45. <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>
  • 46. LIVE REGIONS
  • 47. Exemplos
  • 48. 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
  • 49. “Se o seu site não está pronto para receber TODAS as pessoas, o site é deficiente.” Adaptado da arq. Thais Frota Obrigado! @reinaldoferraz reinaldo@nic.br

×