Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Accessibility tips & tricks for CSS developers
Search
Marco Solazzi
March 25, 2016
Programming
1
520
Accessibility tips & tricks for CSS developers
Marco Solazzi
March 25, 2016
Tweet
Share
More Decks by Marco Solazzi
See All by Marco Solazzi
Automation Strategies for Baseline Accessibility - Merpay Tech Talk 2021
dwightjack
0
410
Inclusive UI development tips & tricks
dwightjack
0
200
CSS Workflow for Grown-ups
dwightjack
1
530
Introducing AngularJS - Frontenders Verona
dwightjack
0
710
Other Decks in Programming
See All in Programming
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
240
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
470
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
670
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
450
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
320
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
120
slogパッケージの深掘り
integral0515
0
120
AI Ramen Fight
yusukebe
0
110
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
2
490
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
970
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Rails Girls Zürich Keynote
gr2m
95
14k
Designing for humans not robots
tammielis
253
25k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
109
19k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Building an army of robots
kneath
306
45k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Visualization
eitanlees
146
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
Accessibility tips & tricks for CSS developers Marco Solazzi -
@dwightjack CSS Day 2016 - cssday.it
About me - Senior Front-end @ AQuest - Co-founder Frontenders
Verona
HTML semantics Progressive enhancement Mobile first Responsive UX
“ … enabling as many people as possible to use
Web sites, even when those people's abilities are limited in some way. ” Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility
“ … enabling as many people as possible to use
Web sites, even when those people's abilities are limited in some way. ” Accessibility - https://developer.mozilla.org/en-US/docs/Web/Accessibility
If you follow best practices you’re already providing some accessibility
- vision impairments - limited fine motor control - cognitive
disabilities - hearing impairments - older people (ourselves tomorrow) For whom?
Because we have to. Goverments are enforcing accessibility by legislation.
Why? - US: List of Web Accessibility-Related Litigation and Settlements (http://bit.ly/1n1JkQl) - IT: Legge Stanca (https://it.wikipedia.org/wiki/Legge_Stanca)
Because we should. Why?
“I’m going to do the website that way. If people
can’t use it they can go f**k themselves!” Everyday rant... - random world class designer / developer
“I’m going to put stairs here. If people can’t climb
them they can go f**k themselves!” What if... - random world class architect
Websites are like shops, restaurants and theatres: if you leave
me out you don’t deserve my money.
- unreadable beauty - table syndrome - outline dilemma -
out of sight... How?
Unreadable beauty
- blindness - low vision - color blindness Unreadable beauty
Unreadable beauty award-winning flash site, mid 2000
Unreadable beauty award-winning flash site, mid 2000
Unreadable beauty award-winning HTML site, mid 2010
Unreadable beauty award-winning HTML site, mid 2010
1. set html font-size to 100% 2. use rem fonts
and em media queries 3. high-contrast optional theme Unreadable beauty
1. set html font-size to 100% 2. use rem fonts
and em media queries 3. high-contrast optional theme Bonus: Use currentColor for flexible theming Unreadable beauty
Unreadable beauty
Unreadable beauty
Table syndrome
Every tag has its place in the world document.
Every tag has its place in the world document. …
even <ruby> - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby
<table>s are evil! Let’s use <div>s … and display: table
Table syndrome
<table>s are evil! Let’s use <div>s … and display: table
Problems: 1. not semantic 2. unannounced by screen-readers Table syndrome
<button>s are ugly! Let’s use <span>s and <a>s with JS
Table syndrome
<button>s are ugly! Let’s use <span>s and <a>s with JS
Problems: 1. missing focus 2. different/missing keyboard interactions Table syndrome
Table syndrome
Table syndrome
Outline dilemma
“ … provides visual feedback for links that have "focus"
when navigating a web document using the TAB key (or equivalent). ” Outline dilemma - http://www.outlinenone.com
“ … provides visual feedback for links that have "focus"
when navigating a web document using the TAB key (or equivalent). ” - http://www.outlinenone.com Outline dilemma
default outlines are ugly! - http://meyerweb.com/eric/tools/css/reset/reset200802.css Outline dilemma
default outlines are ugly! - http://meyerweb.com/eric/tools/css/reset/reset200802.css Outline dilemma
Outline dilemma
Outline dilemma
Outline dilemma
If you really can’t stand outline, remove it just for
mouse / touch interactions. Outline dilemma - https://github.com/lindsayevans/outline.js - https://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an- accessible-manner/
Out of sight
How many ways to hide something? 1. opacity: 0 2.
visibility: hidden 3. display: none Out of sight
How many ways to hide something? 1. opacity: 0 2.
visibility: hidden 3. display: none ← accessibility friendly Out of sight
Options for element transitions: 1. display: none onComplete 2. tabindex=”-1”
for every link / button Out of sight
Don’t speak bonus:
Don’t speak
Don’t speak Warning: totally unreliable!
Don’t speak Always prefer SVGs (even for icons)
I want more! Resources - http://a11yproject.com/ - https://www.paciellogroup.com/ - http://webaim.org/
- http://a11yweekly.com/ People - https://twitter.com/LeonieWatson - https://twitter.com/stevefaulkner
Thanks