Como pensar em acessibilidade com CSS?

Palestra apresentada no Front In Vale (http://frontinvale.com.br/) em 2018.

Transcript

1. Carla Vieira @carlaprvieira
2. Sistemas de Informação - USP Leste Business Intelligence @carlaprvieira @carlaprv @carlaprv
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/
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).
13. https://codepen.io/carlaprv/pen/VBVwJM
14. Utilize CSS para incluir imagens decorativas e ícones
16. Faça todas as funcionalidades acessíveis por teclado.
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.
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.
31. https://caniuse.com/#search=css
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/
39. @carlaprvieira @carlaprv @carlaprv