WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Flexbox layout ordering and tabbing order

for

From: Alastair Campbell
Date: Oct 13, 2015 2:25AM

Jonathan Avila wrote:

> "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'm not entirely clear on that (partly why I posted), but the IBM proposal
to standardise that way was fairly recent.


> "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. "


Two things I would point to for a change:

1. Understanding that people using a keyboard (or equivalent) and looking
at the screen need a consistent and understandable order of links.
Especially for switch access.

2. The power of flexbox and grids, where you can switch around the whole
visual order. In the test case I linked to there is a three column
nav/main/aside layout. Two lines of CSS would re-order that visually in
any combination you like. With CSS grids the connection between source
order and visual order is pretty much separated.



> 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?
>

You could argue that the order of items (at a macro level) is presentation,
so shouldn't that be represented in the focus/speech order?

But I think the first thing is to define goals. I'd like to aim for:

1. A keyboard tabbing order that makes sense when looking at the page.
2. A consistent interface between different scenarios, so visual-reading,
keyboard-tabbing and screenreader order are all the same.
3. Authors/developers not having to specify multiple routes, as the less
common (Accessibility) scenarios will be forgotten.

Does that make sense to people?

-Alastair