Top Banner

Click here to load reader

Acessibilidade na Web modo Jedi Master

May 08, 2015

ReportDownload

Documents

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.

  • 1.Acessibilidade na Web: A quem se destina?

2. Cegos - daltnicos - baixa viso 3. Deficincia auditiva 4. Deficincia motora 5. Estatsticas Pessoas com deficincias no Brasil24% 45.623.910 pessoas Fonte: Censo 2010 6. Estatsticas No mundo, esse nmero aproximadamente650 milhes pessoas Fonte: ONU 7. Voc no tem controle sobre o seu usurio 8. Acessibilidade deve fazer parte da rotina 9. WCAGWeb Content Accessibility Guidelines http://www.w3.org/TR/WCAG/ 10. Princpios do WCAG Princpio 1: Perceptvel Princpio 2: OpervelPrincpio 3: Compreensvel Princpio 4: Robusto 11. ARIA e HTML5WAI-ARIA (Accessible Rich Internet Applications) define uma forma de tornar o contedo e aplicativos web mais acessveis a pessoas com deficincias. Ele contribui especialmente com contedo dinmico e interface de controles de usurio avanadas desenvolvidos com Ajax, HTML, JavaScript e tecnologias relacionadas. http://www.w3.org/WAI/intro/aria 12. ARIA e HTML573 ROLES (Ou Papis) progressbar radiogroup scrollbar slider spinbutton status Tab tabpanel textbox tooltipalert Alertdialog button checkbox dialog menu menubar menuitem option ...http://www.w3.org/TR/wai-aria/roles#role_definitions 13. ARIA e HTML535 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 HTML5Implementao por leitores de tela: Landmark roles so suportadas em JAWS 10 NVDA 2010.1+ VoiceOver no iPhone IOS4. 15. Academia Jedi de acessibilidade 16. ALT 17. 18.

19. Exemplos 20. SALTAR CONTEDO REPETIDO 21. Saltar 22. CABEALHOS 23. ... ... ... ... ... ... ... ... 24. FOCUS 25. CSS: a:hover a:focus JavaScript: onmouseover="#" onfocus="#" onmouseout="#" onblur="#" 26. Exemplos 27. FORM 28. Casa de espetculos Nome do artista

Ei! d para colocar descrio relacionada ao campo!

29. Casa de espetculos Nome do artista

Ei! d para colocar descrio relacionada ao campo!

30. Casa de espetculos Nome do artista

Ei! d para colocar descrio relacionada ao campo!

31. CAPTCHA 32. Exemplos 33. SLIDER 34. Exemplos 35. No 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 DINMICO 45. 46. LIVE REGIONS 47. Exemplos 48. Dicas importantes para melhorar a acessibilidade Validao de Markup Siga as diretrizes de acessibilidade (WCAG e ARIA) Validao automtica de acessibilidade Verificao de avisos Teste com tecnologias assistivas Coloque a acessibilidade na rotina do desenvolvimento 49. Se o seu site no est pronto para receber TODAS as pessoas, o site deficiente. Adaptado da arq. Thais FrotaObrigado! @reinaldoferraz [email protected]

Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.