New CSS with accessibility in mind

A presentation at axe-con in March 2022 in by Rachel Andrew

Slide 1

!”#$%&&$#’()$*++”,,’-‘.’(/$ ‘0$1’02 Rachel Andrew : https://noti.st/rachelandrew

Slide 2

!”#$%&”#%’#”()%%’+#%,”-#./0#1223

Slide 3

1/’4%‘“0#56”0%”-7#-68+0%97#)4-)49”# $4:”0-7#’”;#)/$/0#.6’)%/’-#<

Slide 4

%&&$34’2 Separation of content and presentation for the first time

Slide 5

<table> <tr> <td colspan=”3”>My header</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>

Slide 6

Slide 7

5)”$678./$34*’.9$.*/8:( https://alistapart.com/article/holygrail/

Slide 8

Slide 9

Slide 10

!”#)/6$9’=#+”#*//#.40#4;4:#.0/,# >”#9/)6,”’#-/60)”#/09”0

Slide 11

!841*.$;.8# The design and content had to flow together

Slide 12

body { display: grid; grid-template-columns: 240px 1fr 150px; grid-template-areas: “hd hd hd” “lt bd rt” “ft ft ft”; } #left { grid-area: lt;} #header { grid-area: hd; } #footer { grid-area: ft; } #right { grid-area: rt; } #center { grid-area: bd; }

Slide 13

Slide 14

5)”$(“+)0’+.$.’1’((‘80$ )*,$<80” Just because you can doesn’t mean you should.

Slide 15

ul { display: grid; gap: 20px; grid-template-columns: repeat(6, minmax(0,1fr)); grid-template-areas: “a a b b b b” “c c d d e e” “f f g g h h”; } .card1 .card2 .card3 .card4 .card5 .card6 .card7 .card8 { { { { { { { { grid-area: grid-area: grid-area: grid-area: grid-area: grid-area: grid-area: grid-area: c; f; d; h; e; a; g; b; } } } } } } } }

Slide 16

https://cdpn.io/xxRJBGz

Slide 17

ul { display: grid; gap: 20px; grid-template-columns: repeat(7, minmax(0,1fr)); grid-auto-flow: dense; }

Slide 18

https://cdpn.io/NWbLRQE

Slide 19

nav ul { display: flex; gap: .2em; flex-direction: row-reverse; }

Slide 20

https://cdpn.io/zYoLbOp

Slide 21

=>8’2’0<$,8:4+”?.*/8:($ 2’,+800”+( How can web developers avoid this problem?

Slide 22

@80A($;84<”($*-8:($()”$ 28+:1”0( Can you load your document without CSS and it still make sense?

Slide 23

!/0?#;%*>#’/0,4$#.$/;@

Slide 24

A#;”$$B/09”0”9#9/)6,”’#,4?”-# )0”4%’+#.4$$84)?-#,6)>#”4-%”0@

Slide 25

C”-*#*48#/09”0

Slide 26

Slide 27

D”-%-#>”#“,E4*%/’#/#.$4**”’#:/60# -/60)”#/#,4?”#”&”0:*>%’+#4#)>%$9#/.# *>”#+0%9#)/’*4%‘“0@

Slide 28

,:-<4’2 84$2’,B.*/C+80(“0(, Do you want to keep the boxes and inherit the grid tracks, or lose the boxes for presentational purposes?

Slide 29

,:-<4’2 Allowing child grid to inherit track sizing from a parent.

Slide 30

Slide 31

.cards { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); } .cards li { display: grid; grid-template-rows: auto 1fr auto; } @supports (grid-template-rows: subgrid) { .cards { grid-auto-rows: auto 1fr auto; } .cards li { grid-row: auto / span 3; grid-template-rows: subgrid; gap: 0; } }

Slide 32

https://cdpn.io/VwmEMap

Slide 33

2’,B.*/C$+80(“0(,D Remove boxes from visual layout

Slide 34

<div class=”flex”> <div class=”item”><a href=”/”>Flex item 1</a></div> <div class=”item”><a href=”/”>Flex item 2</a></div> <ul> <li><a href=”/”>One</a></li> <li><a href=”/about”>Two</a></li> <li><a href=”/history”>Three</a></li> </ul> </div>

Slide 35

Slide 36

.flex ul { display: contents; }

Slide 37

https://cdpn.io/oNYapVb

Slide 38

E*40’0<F A bug in display: contents implementation caused elements to be removed from the accessibility tree.

Slide 39

G’H”2F In Chrome 89 and Firefox 62

Slide 40

Slide 41

%)481”$IJ$;:..$ *++”,,’-‘.’(/$(4”” https://developer.chrome.com/blog/full-accessibility-tree/

Slide 42

1>”)?#>4#)>4’+%’+#9%-E$4:#:E”# >4-#’/#)>4’+”9#>/;#>%’+-#0”E/0# /#4))”—%8%$%:#*”)>’/$/+:@

Slide 43

@80A($;’H$,8:4+”$B48-.”1,$ #’()$<4’2$84$;.”H-8H For example: using order to rearrange items.

Slide 44

Slide 45

ul { display: flex; gap: .2em; } li:nth-child(4) { order: -1; }

Slide 46

https://cdpn.io/ExNprGw

Slide 47

K+80(*’0”4 Container Queries

Slide 48

.sidebar { container-type: inline-size; } @container (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }

Slide 49

1>”)?#>4#>”#,40?6E#/.#0”6-48$”# )/,E/’”’-#,4?”-#-“’-“#%’#”4)># $/)4*%/’@

Slide 50

<div class=”media”> <h2 class=”media-heading”>Level 2 heading</h2> </div> <aside> <div class=”media”> <h3 class=”media-heading”>Level 3 heading</h2> </div> </aside>

Slide 51

C;8+:,L>’,’-.” Detect if someone is navigating using the keyboard.

Slide 52

:focus-visible { outline: 4px dashed darkorange; }

Slide 53

5*M”$+*4”F Users who are using a mouse and also keyboard navigating might find the appearance and disappearance of the ring confusing.

Slide 54

+8.84L+80(4*,(NO Choose the color with the highest contrast from a list.

Slide 55

.box { padding: 1em; background-color: var(—background); color: color-contrast(var(—background) vs #000, #fff); width: 200px; }

Slide 56

https://cdpn.io/XWzapXJ

Slide 57

B4”;”4,L+8.84L,+)”1” Matching the user choice of dark or light theme.

Slide 58

!”#$%&$#’#$#()#%*#+,-%’#-./$#” § § § § § § prefers-reduced-motion prefers-reduced-transparency prefers-contrast prefers-color-scheme forced-colors prefers-reduced-data

Slide 59

@media (prefers-color-scheme: light) { /* css for light theme */ }

Slide 60

=$24M$()”1”$’,0A($.#/,$ 184”$++”,,’-.”P Give users a way to toggle to a theme other than the one used by their operating system.

Slide 61

https://web.dev/building-a-theme-switch-component/

Slide 62

+8.84L,+)”1” Can this component be rendered in this color scheme?

Slide 63

.widget { color-scheme: light; }

Slide 64

;84+”2L+8.84, A media feature to detect a forced colors mode such as Windows High Contrast.

Slide 65

@media (forced-colors: active) { /* customization for forced colors mode */ }

Slide 66

Q”$,:4”$(8$(“,($#”..$#)”0$ :,’0<$$0”#$;”(:4” Even a feature that is designed to enhance accessibility might bring with it some new problem for certain groups of people.

Slide 67

R*’,”$0”#$*SS/$’,,:”,$#’()$ -48#,”4, If you find a bug that is creating an accessibility issue don’t assume someone else will have already logged it.

Slide 68

5)*0M$/8:F https://noti.st/rachelandrew