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
工具人的一生: 開發很多 AI 工具讓我 慵懶過一生
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
230
CIでのgolangci-lintの実行を約90%削減した話
Avatar for KazukiHayase kazukihayase
0
310
AIエージェントの継続的改善のためオブザーバビリティ
Avatar for PharmaX（旧YOJO Technologies）開発チーム pharma_x_tech
6
1.3k
CSS、JSをHTMLテンプレートにまとめるフロントエンド戦略
Avatar for Saito Ayumu d120145
0
110
上長や社内ステークホルダーに対する解像度を上げて、より良い補完関係を築く方法 / How-to-increase-resolution-and-build-better-complementary-relationships-with-your-bosses-and-internal-stakeholders
Avatar for MADOX madoxten
13
7.8k
What's new in OpenShift 4.19
Avatar for Red Hat Livestreaming redhatlivestreaming
1
290
Autonomous Database サービス・アップデート (FY25)
Avatar for oracle4engineer oracle4engineer
PRO
2
780
比起獨自升級 我更喜歡 DevOps 文化 <3
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
240
SFTPコンテナからファイルをダウンロードする
Avatar for ディップ株式会社 dip
0
410
マルチテナント+マルチプロダクト SaaS への AI Agent の組み込み方
Avatar for KNOWLEDGE WORK / 株式会社ナレッジワーク kworkdev
PRO
2
370
DB 醬，嗨！哪泥嘎斯基？
Avatar for LINE Developers Taiwan line_developers_tw
PRO
0
250
新規プロダクト開発、AIでどう変わった？ #デザインエンジニアMeetup
Avatar for 弁護士ドットコム bengo4com
0
480

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
43
2.4k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
51k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
29
2.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.8k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
188
11k

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