Como pensar em acessibilidade com CSS?

Transcript

1. Carla Vieira @carlaprvieira

2. Sistemas de Informação - USP Leste Business Intelligence @carlaprvieira @carlaprv

   @carlaprv
3. None
4. None
5. None
6. None

7. http://www.w3c.br/pub/Agenda/PalestraCampusPartyWCAGReinaldo/apres-CP2010-v06.pdf http://www.maujor.com/w3c/tec_css_acess.html http://www.acessibilidade.gov.pt/w3/TR/WCAG20/

8. None
9. None

10. Fornecer formas de ajudar os usuários a navegar, localizar conteúdos

    e determinar o local onde estão. Fornecer alternativas em texto para qualquer conteúdo não textual Maximizar a compatibilidade com atuais e futuros agentes de usuário, incluindo tecnologias assistivas.

11. Fornecer alternativas de texto para conteúdo não-textual (imagens, vídeos etc).

12. None

13. https://codepen.io/carlaprv/pen/VBVwJM

14. Utilize CSS para incluir imagens decorativas e ícones

15. None

16. Faça todas as funcionalidades acessíveis por teclado.

17. None

18. Um dos itens indispensáveis em um site é o formulário

    de contato, já pensou deixar ele acessível para todos na web?

19. https://codepen.io/carlaprv/pen/wxQPbE

20. https://codepen.io/carlaprv/pen/wxQPbE

21. https://codepen.io/carlaprv/pen/wxQPbE

22. Criar conteúdo que pode ser apresentado de diferentes maneiras (por

    exemplo um layout simplificado) sem perder informação ou estrutura.

23. https://codepen.io/carlaprv/pen/GBzrdj

24. Alguns usuários apresentam dificuldade em ler texto pequenos e utilizam

    do zoom para facilitar a leitura.
25. None

26. Oferecer contraste mínimo entre plano de fundo e primeiro plano

27. Tabelas: http://emag.governoeletronico.g ov.br/#s7

28. Implemente uma versão de alto contraste no seu site

29. Maximizar a compatibilidade entre os atuais e futuros agentes de

    usuário, incluindo tecnologias assistivas.
30. None

31. https://caniuse.com/#search=css

32. None

33. https://developers.google.com/web/updates/2018/01/devtools

34. Plugin de Chrome oferecido pelo Google com várias funções de

    verificação de acessibilidade em sites.

35. https://lowvision.support/

36. http://colorfilter.wickline.org/

37. https://contrast-ratio.com/

38. None

39. @carlaprvieira @carlaprv @carlaprv