A presentation at axe-con by Rachel Andrew
!”#$%&&$#’()$*++”,,’-‘.’(/$ ‘0$1’02 Rachel Andrew : https://noti.st/rachelandrew
!”#$%&”#%’#”()%%’+#%,”-#./0#1223
1/’4%‘“0#56”0%”-7#-68+0%97#)4-)49”# $4:”0-7#’”;#)/$/0#.6’)%/’-#<
%&&$34’2 Separation of content and presentation for the first time
5)”$678./$34*’.9$.*/8:( https://alistapart.com/article/holygrail/
!”#)/6$9’=#+”#*//#.40#4;4:#.0/,# >”#9/)6,”’#-/60)”#/09”0
!841*.$;.8# The design and content had to flow together
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; }
5)”$(“+)0’+.$.’1’((‘80$ )*,$<80” Just because you can doesn’t mean you should.
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; } } } } } } } }
https://cdpn.io/xxRJBGz
ul { display: grid; gap: 20px; grid-template-columns: repeat(7, minmax(0,1fr)); grid-auto-flow: dense; }
https://cdpn.io/NWbLRQE
nav ul { display: flex; gap: .2em; flex-direction: row-reverse; }
https://cdpn.io/zYoLbOp
=>8’2’0<$,8:4+”?.*/8:($ 2’,+800”+( How can web developers avoid this problem?
@80A($;84<”($*-8:($()”$ 28+:1”0( Can you load your document without CSS and it still make sense?
!/0?#;%*>#’/0,4$#.$/;@
A#;”$$B/09”0”9#9/)6,”’#,4?”-# )0”4%’+#.4$$84)?-#,6)>#”4-%”0@
C”-*#*48#/09”0
D”-%-#>”#“,E4*%/’#/#.$4**”’#:/60# -/60)”#/#,4?”#”&”0:*>%’+#4#)>%$9#/.# *>”#+0%9#)/’*4%‘“0@
,:-<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?
,:-<4’2 Allowing child grid to inherit track sizing from a parent.
.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; } }
https://cdpn.io/VwmEMap
2’,B.*/C$+80(“0(,D Remove boxes from visual layout
.flex ul { display: contents; }
https://cdpn.io/oNYapVb
E*40’0<F A bug in display: contents implementation caused elements to be removed from the accessibility tree.
G’H”2F In Chrome 89 and Firefox 62
%)481”$IJ$;:..$ *++”,,’-‘.’(/$(4”” https://developer.chrome.com/blog/full-accessibility-tree/
1>”)?#>4#)>4’+%’+#9%-E$4:#:E”# >4-#’/#)>4’+”9#>/;#>%’+-#0”E/0# /#4))”—%8%$%:#*”)>’/$/+:@
@80A($;’H$,8:4+”$B48-.”1,$ #’()$<4’2$84$;.”H-8H For example: using order to rearrange items.
ul { display: flex; gap: .2em; } li:nth-child(4) { order: -1; }
https://cdpn.io/ExNprGw
K+80(*’0”4 Container Queries
.sidebar { container-type: inline-size; } @container (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }
1>”)?#>4#>”#,40?6E#/.#0”6-48$”# )/,E/’”’-#,4?”-#-“’-“#%’#”4)># $/)4*%/’@
C;8+:,L>’,’-.” Detect if someone is navigating using the keyboard.
:focus-visible { outline: 4px dashed darkorange; }
5*M”$+*4”F Users who are using a mouse and also keyboard navigating might find the appearance and disappearance of the ring confusing.
+8.84L+80(4*,(NO Choose the color with the highest contrast from a list.
.box { padding: 1em; background-color: var(—background); color: color-contrast(var(—background) vs #000, #fff); width: 200px; }
https://cdpn.io/XWzapXJ
B4”;”4,L+8.84L,+)”1” Matching the user choice of dark or light theme.
!”#$%&$#’#$#()#%*#+,-%’#-./$#” § § § § § § prefers-reduced-motion prefers-reduced-transparency prefers-contrast prefers-color-scheme forced-colors prefers-reduced-data
@media (prefers-color-scheme: light) { /* css for light theme */ }
=$24M$()”1”$’,0A($.#/,$ 184”$++”,,’-.”P Give users a way to toggle to a theme other than the one used by their operating system.
https://web.dev/building-a-theme-switch-component/
+8.84L,+)”1” Can this component be rendered in this color scheme?
.widget { color-scheme: light; }
;84+”2L+8.84, A media feature to detect a forced colors mode such as Windows High Contrast.
@media (forced-colors: active) { /* customization for forced colors mode */ }
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.
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.
5)*0M$/8:F https://noti.st/rachelandrew
In this talk, you’ll discover what’s coming to the web platform, and find out what you might need to consider in terms of accessibility as you begin to adopt the latest in CSS. And, as pushing the boundaries sometimes means exposing new issues, learn how and where to share your feedback if you encounter problems.
The following code examples from the presentation can be tried out live.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
