Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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
67
SESC SOROCABA - Algoritmos de Opressão
Avatar for Carla Vieira carlaprv
0
160
Como algoritmos de inteligência artificial ampliam desigualdades de gênero e raça
Avatar for Carla Vieira carlaprv
1
190
Empatia, ética, algoritmos e o futuro
Avatar for Carla Vieira carlaprv
1
180
Decolonização da Inteligência Artificial
Avatar for Carla Vieira carlaprv
0
270
Big Data e Math Washing
Avatar for Carla Vieira carlaprv
0
650
Construindo sistemas de aprendizado de máquina explicáveis: desafios e aprendizados
Avatar for Carla Vieira carlaprv
0
490
Using Explainable Artificial Intelligence to open black-box models
Avatar for Carla Vieira carlaprv
0
390
Interpretabilidade, Justiça e representatividade
Avatar for Carla Vieira carlaprv
0
490

Other Decks in Technology

See All in Technology
AI駆動開発における設計思想 認知負荷を下げるフロントエンドアーキテクチャ/ 20251211 Teppei Hanai
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
390
[CMU-DB-2025FALL] Apache Fluss - A Streaming Storage for Real-Time Lakehouse
Avatar for Jark Wu jark
0
120
OCI Oracle Database Services新機能アップデート(2025/09-2025/11)
Avatar for oracle4engineer oracle4engineer
PRO
1
200
因果AIへの招待
Avatar for Shohei SHIMIZU sshimizu2006
0
980
SREには開発組織全体で向き合う
Avatar for k-nagase koh_naga
0
320
Edge AI Performance on Zephyr Pico vs. Pico 2
Avatar for misoji engineer iotengineer22
0
160
モダンデータスタック (MDS) の話とデータ分析が起こすビジネス変革
Avatar for suto sutotakeshi
0
500
コンテキスト情報を活用し個社最適化されたAI Agentを実現する4つのポイント
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
0
1.3k
Fashion×AI「似合う」を届けるためのWEARのAI戦略
Avatar for ZOZO Developers zozotech
PRO
2
600
AI 駆動開発勉強会 フロントエンド支部 #1 w/あずもば
Avatar for 1ft-seabass 1ftseabass
PRO
0
370
5分で知るMicrosoft Ignite
Avatar for Taiji HAGINO taiponrock
PRO
0
370
re:Invent2025 3つの Frontier Agents を紹介 / introducing-3-frontier-agents
Avatar for tomoki10 tomoki10
0
140

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.5k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
19k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
1
100
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
23k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
9.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.8k

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