Transferir como PDF, PPTX
![● Acessibilidade
○ Lei Brasileira de Inclusão da Pessoa com Deficiência,
sancionada em julho de 2015
○ "Art. 63. É obrigatória a acessibilidade nos sítios da internet
mantidos por empresas com sede ou representação comercial
no País [...] "
Introdução](https://image.slidesharecdn.com/codificandocomempatia2-180427123121/85/Acessibilidade-Web-Codificando-empatia-2-320.jpg)
Carregado porWender Machado
Acessibilidade Web - Codificando empatia
O documento aborda a importância da acessibilidade na web, destacando a legislação brasileira que garante direitos às pessoas com deficiência. Apresenta diretrizes como as WCAG e práticas recomendadas para desenvolvedores, enfatizando a necessidade de considerar semântica, foco e estilo na criação de sites acessíveis. Além disso, ressalta que a acessibilidade é um direito legal e uma responsabilidade de todos os desenvolvedores.
Acessibilidade Web - Codificando empatia
- 1. Acessibilidade Web: Codificando empatia Autor:Wender Pinto Machado Contato: wenderpmachado@gmail.com
- 2. ● Acessibilidade ○ LeiBrasileira de Inclusão da Pessoa com Deficiência, sancionada em julho de 2015 ○ "Art. 63. É obrigatória a acessibilidade nos sítios da internet mantidos por empresas com sede ou representação comercial no País [...] " Introdução
- 3. ● Pessoas comdeficiência: ○ Temporaria ○ Permanente ● Pessoas com baixo desempenho cognitivo ○ Terceira idade ○ Crianças Acessibilidade para quem? 6,2% possuem algum tipo de eficiência = +12Milhões Fonte: IBGE senso 2015
- 4.
- 5. Fluxo do Acesso AcessoNavegação
- 6. Fluxo do Acesso AcessoNavegação
- 7. Fluxo do Acesso ●VoiceOver ● TalkBack ● Jaws ● . . . Acesso Navegação Descrição sonora
- 8. 1. Lendo todaa página Navegação pelo teclado / touch Fonte: brasil.uxdesign.cc
- 9. 2. Lendo oslinks Navegação pelo teclado / touch Fonte: brasil.uxdesign.cc
- 10. Navegação pelo teclado/ touch 3. Lendo os cabeçalhos Fonte: brasil.uxdesign.cc
- 11. ● Diretrizes: ○ Wcag1.0 / Wcag 2.0 - W3C ■ Recomendações de Acessibilidade para Conteúdo Web ○ e-MAG - Governo Federal ■ Modelo de Acessibilidade em Governo Eletrônico Acessibilidade da Internet
- 12. Princípios WCag ● Perceptível ●Operável ● Compreensível ● Robusto Fonte: http://www.d.umn.edu
- 13.
- 14. No desenvolvimento, considerar... ●Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeek Edição: Wender Pinto Machado
- 15. No desenvolvimento, considerar... ●Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeek Edição: Wender Pinto Machado
- 16. Semântica: Tags HTML5 Fonte:HTML Goodies
- 17.
- 18.
- 19. Semântica: formulário ● Temos: ○Role ○ Name/Label ○ Value ○ State Fonte: Google Developers
- 20. Semântica: Árvore deAcessibilidade Fonte: Google Developers
- 21.
- 22. No desenvolvimento, considerar...(cont) ● Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeek Edição: Wender Pinto Machado
- 23.
- 24. Foco: Exemplo 1(cont)
- 25. Foco: Exemplo 1(cont)
- 26. Foco: Exemplo 1(cont)
- 27. Foco: Exemplo 1- Resolução
- 28.
- 29. Foco: Exemplo 2(cont) #dicaDePesquisa ● Keyboard TRAP ● Offscreen content
- 30.
- 31. Foco: Exemplo 3(cont)
- 32. Foco: Exemplo 3(cont)
- 33. Foco: Exemplo 3(cont)
- 34. No desenvolvimento, considerar...(cont) ● Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeekFonte: CodinGeek Edição: Wender Pinto Machado
- 35.
- 36. No desenvolvimento, considerar...(cont) ● Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeekFonte: CodinGeek Edição: Wender Pinto Machado
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. Aria: Plugin AxE(Google Chrome)
- 44.
- 45.
- 46.
- 47. No desenvolvimento, considerar...(cont) ● Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeekFonte: CodinGeek Edição: Wender Pinto Machado
- 48. No desenvolvimento, considerar...(FIM?) ● Semântica ● Foco ● Estilo ● Aria Fonte: CodinGeek Edição: Wender Pinto Machado
- 49. E as pessoascom baixo desempenho cognitivo ?
- 50. Acessibilidade + Usabilidade= ❤ 10 Heurísticas de Nielsen 1. Visibilidade do status do sistema 2. Controle de usuários e liberdade 3. Correspondência entre sistema e mundo real
- 51. Acessibilidade + Usabilidade= ❤ 10 Heurísticas de Nielsen 6. Prevenção de erros 5. Design estético e minimalista4. Consistência e padrões
- 52. Acessibilidade + Usabilidade= ❤ 10 Heurísticas de Nielsen 7. Flexibilidade e eficiência de uso 8. Ajude os usuários a reconhecer, diagnosticar e recuperar erros 9. Reconhecimento ao invés de recordar 10. Ajuda e documentação
- 53. ferramenta: Lighthouse (Auditsdo Google Chrome)
- 54.
- 55. ● Existem padrões,documentações e ferramentas para auxiliar os desenvolvedores ● 12 Milhões NÃO são opcionais ● Todos possuem chances de adquirir alguma deficiência ● É Lei ○ Lei Brasileira de Inclusão (LBI – Lei 13.146/15) Conclusão
- 56.
- 57.
- 58. Bibliografia ● Udacity: WebAcessibility - https://br.udacity.com/course/web-accessibility--ud891 ● Wcag - https://www.w3.org/TR/WCAG20-TECHS/ ● e-MAG - http://emag.governoeletronico.gov.br/ ● Ícones - https://www.flaticon.com/ ○ Feepik ○ Gregor Cresnar ○ Scott de Jonge ● Heurísticas Nielsen - http://blog.caelum.com.br/ ● WebAIM - https://webaim.org/ ○ Wave - http://wave.webaim.org
- 59. Bibliografia ● Dados IBGE- http://www.ebc.com.br/noticias/2015/08/ibge-62-da-populacao-tem-algum-tipo- de-deficiencia ● Total brasileiros 2015 - http://g1.globo.com/economia/noticia/2015/08/brasil-tem-204-milhoes-de-habita ntes-segundo-o-ibge.html
- 60.