WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Flexbox layout ordering and tabbing order

for

From: Jonathan Avila
Date: Oct 12, 2015 6:55PM

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

It was my understanding from reading the documents that the visual order changes should not affect the focus order and the Firefox behavior was a bug.

I would agree with you that this does warrant a broader discussion and consideration of both approaches. Historically CSS was used for presentation only -- but as I'm seeing that ship which I thought was the community was on has sailed away and things seems to be shifting away from that approach. So perhaps we need to reconsider the role/relationship of CSS in general. If CSS is no longer just for presentation then we have a stronger argument to say the CSS order should become focus order -- but then what if we want the order to be different? How could the author specify not to use the CSS order for focus order?

Jonathan

--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
<EMAIL REMOVED>

703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Alastair Campbell
Sent: Monday, October 12, 2015 1:07 PM
To: WebAIM Discussion List
Subject: [WebAIM] Flexbox layout ordering and tabbing order

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