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 7:21AM

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


> What do you mean by "re-order the source"?

Sorry, bad phrasing, the source does stay the same.

I meant that they re-order the layout visually, either by default in the
layout shown, or when re-sized.

My point is that (especially in responsive designs) we are in a no-win
situation.

It is impossible to create a usable layout that maintains the source code
order visually.

It isn't that bad for screenreader users, you probably don't realise,
unless you also look at the screen to the extent you can.

However, it's a much bigger issue for switch and other keyboard-style users
who effectively tab through the page. Adrian Roselli did a little example
animation:
http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html


When I read Richard Schwerdtfeger's comments I thought he was right, but
we'd be able to provide guidance:
https://lists.w3.org/Archives/Public/public-apa/2016Jan/0025.html

Now I think that it is impossible to do a good job on websites without a
change in user-agents.

So that is nothing new? If developers are at all aware of the importance of
> source code order and focus order, they will realise that changing the
> visual position of grid elements will lead to unexpected content AND focus
> order (e.g. jump down

to a navigation that comes first in source code but is put at the bottom in
> a responsive view).
>

The difference now is the flexbox and grids make that trivially easy, most
aren't aware of that importance, and even for those that are you are stuck
between good usability and accessibility, and accessibility will loose.


I am not sure what you are getting at - are you making the point that some
> of those grid designs (like others) would violate 1.3.2 and 2.4.3 and
> should be avoided (or the behavour should repaired by some means (changing
> source code order, sniffing techniques, or even via currently badly
> supported things like aria-flowto)?
>

With flexbox it is a linear, 1 dimensional mechanism so the solution is
easy: use the behaviour firefox used to have, and re-order the
accessibility tree to the flexbox ordering (I think that is what it did).

For grids it is harder, I am saying we need browsers to use a heuristic
(like Opera used to have) that uses a row-by-row column-by-column order.

Now would be the time to do it, before people invest in hacks to try and
get around these issues.

Cheers,

-Alastair