WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Keyboard focus order for re-ordered elements

for

From: Alastair Campbell
Date: Jun 15, 2017 3:35AM

I got a couple of comments on the blog post about keyboard focus order [1],
I'd like to see if people agree/disagree with some conclusions.

Detlev asked:
"would it be preferable to serve a different content order based on the
viewport width at load time?"

You could, but it's an extra thing to think about (that people won't). The
point of CSS grids (and flexbox) is to declaratively specify your layout,
rather than make it a JavaScript reliant programming problem.

Patrick H. Lauke said:
"there may well be situations where an author who knows what they're doing
is explicitly relying on logical order being different from visual order."

Can anyone think of an example that doesn't then hinder the visual focus
order already? This has been an issue before flexbox and grid, I'm just
anticipating that the use of those will make it more common.

And also:
"is it safe to assume authors will always get it wrong?"

Thinking about it, I would say yes.

Around half of the examples in Rachel Andrew's Grid by Example re-order the
source (compared to a row-by-row order):
https://gridbyexample.com/examples/

That is not a criticism of the examples, that is what grid is supposed to
do!

So authors will get it 'wrong' by design. Therefore we need the user-agents
to recover this situation.

As Patrick pointed out, it's the reading order for screenreaders as well,
so I assume it would mean re-ordering the DOM and/or Accessibility Tree to
match the flexbox-order and a row-by-row heuristic for grids.

Cheers,

-Alastair

1] https://alastairc.ac/2017/06/the-responsive-order-conflict/