WebAIM - Web Accessibility In Mind

E-mail List Archives

Flexbox layout ordering and tabbing order

for

From: Alastair Campbell
Date: Oct 12, 2015 11:06AM

Hi everyone,

I was wondering (triggered by an article [1]) where the browsers &
discussions got to regarding flexbox's impact on tabbing and/or reading
order?

To outline the issue: Flexbox in CSS allows you to re-order content, e.g.
columns have one order in the source, and they could go left to right,
right to left, or in a custom-defined order.

The question is then: if the visual reading layout is changed, should the
tabbing and/or speech output be re-ordered?

I found a discussion document on it, which is very useful:
https://wiki.csswg.org/spec/css3-flexbox/accessibility

And a proposal on www-style from someone at IBM [2].

However, I can't tell the status, i.e. which way are browsers going?
Currently it seems to be both directions!

A quick test [3] shows that FIrefox uses the CSS/visual order, but IE11,
Chrome and Safari go with the source code order.

Historically I used to like separation of source and visual layout to help
provide the most efficient interface for screenreaders, but then
visual-keyboard access (tabbing & speech input) can be weird.
Now I'm lean towards the Firefox approach as if you are changing the
reading order visually, it helps to keep the visual-keyboard access and
screenreader access in lock-step.

Does anyone know where it's going?

Obviously this is even more complex with CSS grids, but I thought I'd start
with flexbox!

-Alastair

1]
https://rachelandrew.co.uk/archives/2015/07/28/modern-css-layout-power-and-responsibility/
2] https://lists.w3.org/Archives/Public/www-style/2014Dec/0235.html
3] https://alastairc.ac/testing/layout-flexbox-ordering.html