Nobody leaves this place without coding an accessible projetc
6 gostaram1,555 visualizações
O vídeo discute a importância da acessibilidade na web para pessoas com deficiências visuais, auditivas e motoras. Apresenta estatísticas sobre a prevalência de deficiências no Brasil e no mundo. Explica os princípios WCAG de acessibilidade e como ARIA e HTML5 podem ser usados para tornar conteúdos e aplicativos web mais acessíveis. Fornece exemplos práticos de como implementar recursos de acessibilidade.
Nobody leaves this place without coding an accessible projetc
- 7. Acessibilidade na Web: A quem se destina?
- 8. Cegos - daltônicos - baixa visão
- 11. Estatísticas Pessoas com deficiências no Brasil 24% 45.623.910 pessoas Fonte: Censo 2010
- 12. Estatísticas No mundo, esse número é aproximadamente 650 milhões pessoas Fonte: ONU
- 15. Você não tem controle sobre o seu usuário
- 16. Acessibilidade deve fazer parte da rotina
- 19. Web Content Accessibility Guidelines http://www.w3.org/TR/WCAG/ WCAG
- 20. Princípio 1: Perceptível Princípio 2: Operável Princípio 3: Compreensível Princípio 4: Robusto Princípios do WCAG
- 21. 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
- 22. 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
- 23. 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
- 24. ARIA e HTML5 Implementação por leitores de tela: Landmark roles são suportadas em • JAWS 10 • NVDA 2010.1+ • VoiceOver no iPhone IOS4.
- 26. Agora começa a aventura
- 27. ALT
- 28. <img src=“babisitting.jpg” alt=“Foto com a capa do filme em VHS Uma noite de aventuras”>
- 29. <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">
- 30. Exemplos
- 33. CABEÇALHOS
- 35. FOCUS
- 37. Exemplos
- 38. FORM
- 39. <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>
- 40. <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>
- 41. <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>
- 42. CAPTCHA
- 43. Exemplos
- 44. SLIDER
- 46. Exemplos
- 47. Não dá para usar o input type=“range”?
- 48. SIM!
- 51. Exemplos
- 52. CONTRASTE
- 57. LANG
- 58. Exemplos
- 59. LANDMARKS
- 62. STATUS DINÂMICO
- 63. <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>
- 65. Exemplos
- 66. 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
- 68. R$ 5.000,00
- 70. 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