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

Como pensar em acessibilidade com CSS?

Avatar for Carla Vieira Carla Vieira
August 11, 2018
Technology
1
110

Como pensar em acessibilidade com CSS?

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

Carla Vieira

August 11, 2018
Tweet

More Decks by Carla Vieira

See All by Carla Vieira
Towards global and human-centered explanations for machine learning models
Avatar for Carla Vieira carlaprv
1
62
SESC SOROCABA - Algoritmos de Opressão
Avatar for Carla Vieira carlaprv
0
150
Como algoritmos de inteligência artificial ampliam desigualdades de gênero e raça
Avatar for Carla Vieira carlaprv
1
180
Empatia, ética, algoritmos e o futuro
Avatar for Carla Vieira carlaprv
1
160
Decolonização da Inteligência Artificial
Avatar for Carla Vieira carlaprv
0
250
Big Data e Math Washing
Avatar for Carla Vieira carlaprv
0
610
Construindo sistemas de aprendizado de máquina explicáveis: desafios e aprendizados
Avatar for Carla Vieira carlaprv
0
470
Using Explainable Artificial Intelligence to open black-box models
Avatar for Carla Vieira carlaprv
0
360
Interpretabilidade, Justiça e representatividade
Avatar for Carla Vieira carlaprv
0
460

Other Decks in Technology

See All in Technology
5min GuardDuty Extended Threat Detection EKS
Avatar for takakuni takakuni
0
180
なぜ私はいま、ここにいるのか？ #もがく中堅デザイナー #プロダクトデザイナー
Avatar for 弁護士ドットコム bengo4com
0
1.3k
作曲家がボカロを使うようにPdMはAIを使え
Avatar for Takuya Ito itotaxi
0
390
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
Avatar for hiro-torii hiro_torii
0
140
Geminiとv0による高速プロトタイピング
Avatar for Shinya Masadome（東京AI祭） shinya337
0
200
AWS Organizations 新機能！マルチパーティ承認の紹介
Avatar for yhana yhana
1
220
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
Avatar for k.muguruma mtpooh
2
440
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
Avatar for matsuihidetoshi matsuihidetoshi
1
310
PHPでWebブラウザのレンダリングエンジンを実装する
Avatar for ディップ株式会社 dip_tech
PRO
0
220
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
Avatar for kubell kubell_hr
1
240
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
Avatar for yut yu_kod
1
100
Zephyr RTOSを使った開発コンペに参加した件
Avatar for misoji engineer iotengineer22
0
130

Featured

See All Featured
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
42
7.4k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
20k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
524
40k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
30
5.8k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
17
950
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
670
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
300
51k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
390

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