Como pensar em acessibilidade com CSS?

Como pensar em acessibilidade com CSS?

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

B6e0ee98a08a3863043dc3edc5789029?s=128

Carla Vieira

August 11, 2018
Tweet

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