Como pensar em acessibilidade com CSS?

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

Transcript

1. Carla Vieira
   @carlaprvieira
   

   View Slide

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

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

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/
   

   View Slide

8. View Slide

9. View Slide

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.
    

    View Slide

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

    View Slide

12. View Slide

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

    View Slide

14. Utilize CSS para incluir imagens decorativas e ícones
    

    View Slide

15. View Slide

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

    View Slide

17. View Slide

18. Um dos itens indispensáveis em um site é o formulário de
    contato, já pensou deixar ele acessível para todos na web?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. Criar conteúdo que pode ser apresentado de diferentes maneiras
    (por exemplo um layout simplificado) sem perder informação ou
    estrutura.
    

    View Slide

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

    View Slide

24. Alguns usuários apresentam dificuldade em ler texto
    pequenos e utilizam do zoom para facilitar a leitura.
    

    View Slide

25. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. Maximizar a compatibilidade entre os atuais e futuros
    agentes de usuário, incluindo tecnologias assistivas.
    

    View Slide

30. View Slide

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

    View Slide

32. View Slide

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

    View Slide

34. Plugin de Chrome oferecido
    pelo Google com várias
    funções de verificação de
    acessibilidade em sites.
    

    View Slide

35. https://lowvision.support/
    

    View Slide

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

    View Slide

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

    View Slide

38. View Slide

39. @carlaprvieira
    @carlaprv
    @carlaprv
    

    View Slide