Grid, content re-ordering, and accessibility

A presentation at axe-con 2021 by Rachel Andrew

Grid, content re-ordering and accessibility

Grid, content re-ordering and accessibility

CSS layout has changed

CSS layout has changed

There are new problems alongside our new powers.

There are new problems alongside our new powers.

This talk covers:

This talk covers:

CSS Grid: Separation of content and presentation for the first time

CSS Grid: Separation of content and presentation for the first time

Tables mixed presentational data in with your content

Tables mixed presentational data in with your content

The CSS Zen Garden

The CSS Zen Garden

The “Holy Grail” layout

The “Holy Grail” layout

An example of the Holy Grail using floats

An example of the Holy Grail using floats

Bootstrap grid system

Bootstrap grid system

We couldn’t get too far away from the document source order

We couldn’t get too far away from the document source order

Normal flow

Normal flow

Holy Grail with Grid

Holy Grail with Grid

The grail with full height columns!

The grail with full height columns!

Just because you can doesn’t mean you should

Just because you can doesn’t mean you should

Using grid-template-areas

Using grid-template-areas

Tab order jumping round the layout

Using grid-auto-flow: dense

Using grid-auto-flow: dense

Tab order jumps around the layout

Using flex-direction: row-reverse

Using flex-direction: row-reverse

Tabbing backwards through the navigation

Avoiding source/layout disconnect

Avoiding source/layout disconnect

Don’t forget about the document

Don’t forget about the document

Work with normal flow

Work with normal flow

A well-ordered document makes creating fallbacks much easier.

A well-ordered document makes creating fallbacks much easier.

Resist the temptation to flatten your source

Resist the temptation to flatten your source

subgrid

subgrid

A layout that could be helped with subgrid

A layout that could be helped with subgrid

Using subgrid for rows

Using subgrid for rows

The headings now align

The headings now align

Using display: content

Using display: content

An example layout with direct and indirect children

An example layout with direct and indirect children

I want the indirect children to be part of the flex layout

I want the indirect children to be part of the flex layout

Remove the box from the layout

Remove the box from the layout

The box of the ul is gone

The box of the ul is gone

Warning!

Warning!

Don’t fix source problems with grid or flexbox

Don’t fix source problems with grid or flexbox

Navigation in order

Navigation in order

Using the order property

Using the order property

Tab order is unusual

Start with a solid document

Start with a solid document

Test tab ordering

Test tab ordering

Accessibility Insights

Accessibility Insights

This is what you don't want to see

This is what you don't want to see

Check that changing display type has not changed how things report to accessibility technology.

Check that changing display type has not changed how things report to accessibility technology.

Solving this problem

Solving this problem

Why doesn’t the tab order default to following the layout?

Why doesn’t the tab order default to following the layout?

The web is about good defaults

The web is about good defaults

Initial values of CSS properties stop things vanishing or stacking on top of each other.

Initial values of CSS properties stop things vanishing or stacking on top of each other.

Tab order following the document is a good default.

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.

I believe that we need to find a way to allow developers to indicate a switch to follow visual layout.

Spatial navigation

Spatial navigation

Telling the browser that you are taking control of order.

Telling the browser that you are taking control of order.

Adding an attribute

Adding an attribute

We need to keep having this conversation.

We need to keep having this conversation.

We need to solve this before adding more new layout methods.

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.

We need to solve it before more web layout is created in visual tools.

Join the conversation

Join the conversation

Thank you!

Thank you!

Let’s review the potential accessibility problems that grid layout could cause. These issues essentially center around the concept of disconnecting the source from the visual display.