Grid, content re-ordering and accessibility
CSS layout has changed
There are new problems alongside our new powers.
This talk covers:
CSS Grid: Separation of content and presentation for the first time
Tables mixed presentational data in with your content
The CSS Zen Garden
The “Holy Grail” layout
An example of the Holy Grail using floats
Bootstrap grid system
We couldn’t get too far away from the document source order
Normal flow
Holy Grail with Grid
The grail with full height columns!
Just because you can doesn’t mean you should
Using grid-template-areas
Using grid-auto-flow: dense
Using flex-direction: row-reverse
Avoiding source/layout disconnect
Don’t forget about the document
Work with normal flow
A well-ordered document makes creating fallbacks much easier.
Resist the temptation to flatten your source
subgrid
A layout that could be helped with subgrid
Using subgrid for rows
The headings now align
Using display: content
An example layout with direct and indirect children
I want the indirect children to be part of the flex layout
Remove the box from the layout
The box of the ul is gone
Warning!
Don’t fix source problems with grid or flexbox
Navigation in order
Using the order property
Start with a solid document
Test tab ordering
Accessibility Insights
This is what you don't want to see
Check that changing display type has not changed how things report to accessibility technology.
Solving this problem
Why doesn’t the tab order default to following the layout?
The web is about good defaults
Initial values of CSS properties stop things vanishing or stacking on top of each other.
Tab order following the document is a good default.
I believe that we need to find a way to allow developers to indicate a switch to follow visual layout.
Spatial navigation
Telling the browser that you are taking control of order.
Adding an attribute
We need to keep having this conversation.
We need to solve this before adding more new layout methods.
We need to solve it before more web layout is created in visual tools.
Join the conversation
Thank you!