A presentation at SmashingConf SF by Carie Fisher
CSS + Accessibility: Inclusion Through User Choice
1 Font family (1440) 69 Web hex colors (1986) 1 JavaScript frameworks/libraries (2023)
650,000 Font families (2023) 16,777,216 Web hex colors (2023) 100+ JavaScript framework (1995)
Life is the sum of all your choices — Albert Camus
What do we mean by an accessible choice?
User-focused CSS media queries!
Color @prefers-color-scheme @forced-colors @inverted-colors
@prefers-color-scheme (default/light) codepen.io/cariefisher/pen/JjmmRxZ
@prefers-color-scheme (dark) codepen.io/cariefisher/pen/JjmmRxZ
@media (prefers-color-scheme: dark) { body {background-color: #282828;} .without [data-word=”without”] .char:before, .without [data-word=”without”] .char:after { color: #ffffff; } }
caniuse.com/mdn-css_at-rules_media_prefers-color-scheme
@forced-colors (active) codepen.io/cariefisher/pen/JjmmRxZ
@media (forced-colors: active) { body {background-color: #fcba03;} .without [data-word=”without”] .char:before, .without [data-word=”without”] .char:after { color: #ac1663; } .without {color: #004a72;} }
caniuse.com/mdn-css_at-rules_media_forced-colors
@inverted-colors (inverted) Visual of the code before inverted codepen.io/cariefisher/pen/JjmmRxZ
@inverted-colors (inverted) Visual of the code after inverted codepen.io/cariefisher/pen/JjmmRxZ
@media (inverted-colors: inverted) { body {background-color: #fcba03;} .without [data-word=”without”] .char:before, .without [data-word=”without”] .char:after { color: #ac1663; } .without {color: #004a72;} }
@media (inverted-colors: inverted) and (prefers-color-scheme: dark) { body {background: #99cc66;} .without [data-word=”without”] .char:before, .without [data-word=”without”] .char:after { color: #ee1166; } .without {color: #111111;} }
caniuse.com/mdn-css_at-rules_media_inverted-colors
Contrast @prefers-contrast @prefers-reduced-transparency
@prefers-contrast (no preference) codepen.io/cariefisher/pen/GRYYmoR
@prefers-contrast (more) codepen.io/cariefisher/pen/GRYYmoR
@media (prefers-contrast: more) { .title2 {color: var(—clr-6);} .aurora2__item:nth-of-type(1), .aurora2__item:nth-of-type(2), .aurora2__item:nth-of-type(3), .aurora2__item:nth-of-type(4) { background-color: var(—clr-6); } }
@prefers-contrast (less) codepen.io/cariefisher/pen/GRYYmoR
@media (prefers-contrast: less) { .title {color: var(—clr-5);} .aurora__item:nth-of-type(1), .aurora__item:nth-of-type(2), .aurora__item:nth-of-type(3), .aurora__item:nth-of-type(4) { background-color: var(—clr-5); } }
@prefers-contrast (custom) codepen.io/cariefisher/pen/GRYYmoR
@media (prefers-contrast: custom) { .aurora2__item:nth-of-type(1) { background-color: var(—clr-1); } .aurora2__item:nth-of-type(2) { background-color: var(—clr-2); } .aurora2__item:nth-of-type(3) { background-color: var(—clr-3); } .aurora2__item:nth-of-type(4) { background-color: var(—clr-4); } }
caniuse.com/mdn-css_at-rules_media_prefers-contrast
@prefers-reduced-transparency (reduce) codepen.io/cariefisher/pen/GRYYmoR
@media (prefers-reduced-transparency: reduce) { .title, .title2 { opacity: 0.7; } }
caniuse.com/mdn-css_at-rules_media_prefers-reduced-transparency
Motion @prefers-reduced-motion @prefers-reduced-data
@prefers-reduced-motion (no preference) codepen.io/cariefisher/pen/zYmmZZZ
@prefers-reduced-motion (reduce) codepen.io/cariefisher/pen/zYmmZZZ
@media @media (prefers-reduced-motion: reduce) { .bg-rainbow {animation: none;} .perfection { .word { .char { animation: slide-down 5s cubic-bezier(0.75, 0, 0.25, 1) both; animation-delay: calc(#{$delay} + (0.5s * var(—word-index))); } } [data-word=”perfection”] { animation: slide-over 4.5s cubic-bezier(0.5, 0, 0.25, 1) both; animation-delay: $delay;
.char { animation: none; visibility: hidden; } .char:before, .char:after { animation: split-in 4.5s cubic-bezier(0.75, 0, 0.25, 1) both alternate; animation-delay: calc( 3s + -0.2s * (var(—char-total) - var(—char-index)) ); } } } }
caniuse.com/mdn-css_at-rules_media_prefers-reduced-motion
@prefers-reduced-data (reduce) codepen.io/cariefisher/pen/zYmmZZZ
@media (prefers-reduced-data: reduce) { .bg-rainbow {animation: none;} .perfection { .word { .char { animation: none; } } [data-word=”perfection”] { animation: none;
.char { animation: none; visibility: hidden; } .char:before, .char:after { animation: none; } } } }
caniuse.com/mdn-css_at-rules_media_prefers-reduced-data
Color Contrast Motion @prefers-color-scheme @forced-colors @inverted-colors @prefers-contrast @prefers-reducedtransparency @prefers-reducedmotion @prefers-reduced-data
0 User choices
256 User choices
Our job is to provide options and let people choose their own adventure
Thanks! @cariefisher
Every day we have a series of choices to make. Get up early to work out or hit the snooze button? Double foam mocha latte or decaf green tea? Tabs or spaces? Our choices — even the small ones — shape our identities and help frame how we see the world.
Today we expect multiple options when choosing products and services, but then settle for subpar user interfaces and digital experiences others choose for us. While we designers and developers might have insights into what a user wants — how can anyone truly know what 7.8+ billion people prefer at any given moment?
Thankfully, we don’t need to guess! In her talk, Carie will go over ways to build more inclusive user options by combining the ever-increasing power of CSS media queries with human-focused insights of digital accessibility.
The following resources were mentioned during the presentation or are useful additional information.
for free. You
can too.