Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Como pensar em acessibilidade com CSS?

Como pensar em acessibilidade com CSS?

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

Carla Vieira

August 11, 2018
Tweet

More Decks by Carla Vieira

Other Decks in Technology

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