CSS + Accessibility: Inclusion Through User Choice

CSS + Accessibility: Inclusion Through User Choice

1 Font family (1440) 69 Web hex colors (1986) 1 JavaScript framework (1995)

650,000 Font families (2024) 16,777,216 Web hex colors (2024) 100+ JavaScript frameworks (2024)

Life is the sum of all your choices — Albert Camus

What do we mean by an accessible choice?

User-focused CSS media features!

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

@media (inverted-colors: inverted) { body {background-color: #99cc66;} .without [data-word=”without”] .char:before, .without [data-word=”without”] .char:after { color: #ee1166; } .without {color: #111111;} }

@inverted-colors (inverted) Visual of the code after inverted codepen.io/cariefisher/pen/JjmmRxZ

@media (inverted-colors: inverted) { body { background-color: #663399; filter: invert(100%); } .without [data-word=”without”] .char:before, .without [data-word=”without”] .char:after { color: #11ee99; filter: invert(100%); } .without { color: #eeeeee; filter: invert(100%); } }

@media (inverted-colors: inverted) and (prefers-color-scheme: dark) { body {background: #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_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

16 User choices

256 User choices

Our job is to provide options and let people choose their own adventure

Thanks! @cariefisher