E-mail List Archives
Thread: Flexbox layout ordering and tabbing order
Number of posts in this thread: 16 (In chronological order)
From: Alastair Campbell
Date: Mon, Oct 12 2015 11:06AM
Subject: Flexbox layout ordering and tabbing order
No previous message | Next message →
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
From: Jonathan Avila
Date: Mon, Oct 12 2015 6:55PM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
> 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 ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: Alastair Campbell
Date: Tue, Oct 13 2015 2:25AM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
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
From: Jonathan Avila
Date: Tue, Oct 13 2015 6:38AM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
> 3. Authors/developers not having to specify multiple routes, as the less common (Accessibility) scenarios will be forgotten.
While I generally agree, we need to uncover if there are reasonable cases where the visual order and reading order could differ. I usually see the intented order different in two scenarios
1. When a data table also contains form fields. In some cases with a grid the reading order could be down each column but the user may actually want to read across.
2. When a site contains repeated information such as social media tools, navigation, etc. above an article or page. While skip navigation techniques could be used they may not always be available to all users. Getting past these areas to find the start of real content can be frustrating and time consuming.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: Patrick H. Lauke
Date: Tue, Oct 13 2015 6:54AM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
On 13/10/2015 13:38, Jonathan Avila wrote:
> 2. When a site contains repeated information such as social media tools, navigation, etc. above an article or page. While skip navigation techniques could be used they may not always be available to all users. Getting past these areas to find the start of real content can be frustrating and time consuming.
Conversely, though, what if a sighted keyboard user *wants* to get to
those tools/navigation/etc? They see them right there at the top, but
can't get to them until they tab through the rest of the page/article.
As ever, there is no right solution that'll works for all users or
situations.
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Moore,Michael (Accessibility) (HHSC)
Date: Tue, Oct 13 2015 7:16AM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
Sounds like a browser extension that would support keyboard navigation to landmark regions would be helpful. Voice to text technology would help some users if the alt text is intuitive, otherwise a fall back to something like Dragon's grid navigation improves efficiency.
Curious though, what is the purpose of placing the tools/navigation/etc. at the end of the code order instead of where it appears naturally? That way it is only a few clicks from the top of the page and if there is a skip to main link it is possible to bypass those items as well as the rest of top and possibly side navigation. Is this another case of attempting to "help" screen reader users?
Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
From: Jonathan Avila
Date: Tue, Oct 13 2015 7:52AM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
> what is the purpose of placing the tools/navigation/etc. at the end of the code order instead of where it appears naturally? That way it is only a few clicks from the top of the page and if there is a skip to main link it is possible to bypass those items as well as the rest of top and possibly side navigation. Is this another case of attempting to "help" screen reader users?
The idea is that this share information really should be after the article -- but it would be below the page scroll and less likely used. That is people position things visually to get more attention from visual users -- even if it's not the appropriate place for something in the structure. So why force the screen reader user to wade through content that was only positioned as such to assist a person who could see? This is a non-win situation as different users will want the information positioned differently. As others have pointed out -- there are other scenarios such as speech recognition users who may want the information available sooner in the focus order. What we really need is the flexibility to have user agents collapse or re-order tangential content like this to meet the user's needs.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: Moore,Michael (Accessibility) (HHSC)
Date: Tue, Oct 13 2015 8:02AM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
" The idea is that this share information really should be after the article -- but it would be below the page scroll and less likely used. That is people position things visually to get more attention from visual users -- even if it's not the appropriate place for something in the structure. So why force the screen reader user to wade through content that was only positioned as such to assist a person who could see?"
If the page is coded properly screen reader users have more methods available than most to bypass content at the top of the page. Headings, landmarks, and other specific features allow for a wide range of navigation options for the screen reader user. I do support expanding the functionality of user agents (browsers) to allow more options for sighted keyboard users to take advantage of the same features. Or for the development of better AT for keyboard users. But getting something out of the way for screen reader users should not be a design decision if you are using properly structured landmarks and headings. And really if the idea is to get a user to share a particular article or post, placing the sharing icons at the top of the page is probably the wrong place - put them at the start or end of the article. Placing them at the end makes the most sense. It will help people avoid sharing articles and blog posts that they did not bother to read...<wink/>
Mike Moore
Accessibility Coordinator
Texas Health and Human Services Commission
Civil Rights Office
(512) 438-3431 (Office)
From: Alastair Campbell
Date: Tue, Oct 13 2015 8:07AM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
Jonathan Avila wrote:
> we need to uncover if there are reasonable cases where the visual order
> and reading order could differ.
Definitely, I'm hoping people can provide examples where that might be the
case, even if I argue against them ;-)
1. When a data table also contains form fields. In some cases with a grid
> the reading order could be down each column but the user may actually want
> to read across.
>
I'm not sure that you would use Flexbox or grids within a data table?
(Although I'm not sure why you would use a form in a data table either!) I
don't mean to dismiss the scenario though, is there a public facing example
you could share, just to get an idea of why people would do that?
> 2. When a site contains repeated information such as social media tools,
> navigation, etc. above an article or page. While skip navigation
> techniques could be used they may not always be available to all users.
> Getting past these areas to find the start of real content can be
> frustrating and time consuming.
>
As Patrick said, a keyboard user may want to get to them, and may expect to
go through them anyway so could tab too fast or miss links at the top.
Screen reader users have more controls to make use of and should be able to
get to the main heading or 'main'.
You might pick-up that I'm biasing towards visual-keyboard users. It isn't
a prioritisation of audience, it is simply that (from watching) the effects
are greater for that audience. When you are looking at the screen and the
visible focus wonders around like a drunken post-modern dancer, it is
really hard to hit the right link. Screen reader users have more controls,
and more ability to understand the structure (when present). So long as the
site is consistent and has landmarks/skip links, the order doesn't seem to
matter as much.
What we really need is the flexibility to have user agents collapse or
> re-order tangential content like this to meet the user's needs.
>
Ok, but that is something a user-agent would have to do, it would be
hideously complex to describe to authors what the difference orders might
be.
For the purpose of what to do with CSS layouts, would you want there to be
different orders?
Thanks,
-Alastair
From: Patrick H. Lauke
Date: Tue, Oct 13 2015 8:12AM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
On 13/10/2015 14:52, Jonathan Avila wrote:
> So why force the screen reader user to
> wade through content that was only positioned as such to assist a
> person who could see?
Don't forget people who can see but still use sequential navigation /
TAB/SHIFT+TAB / keyboard. Seeing controls in one place on the screen,
but not being able to set focus to them in the apparent visual order,
will confuse and frustrate them...
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Alastair Campbell
Date: Tue, Oct 13 2015 8:22AM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
Patrick H. Lauke wrote:
Don't forget people who can see but still use sequential navigation /
> TAB/SHIFT+TAB / keyboard. Seeing controls in one place on the screen, but
> not being able to set focus to them in the apparent visual order, will
> confuse and frustrate them...
>
And switch access is the more extreme version of that, where you are
following the focus visually but cannot control the speed or direction. If
you miss it, you have to circle around again.
From: _mallory
Date: Tue, Oct 13 2015 8:46AM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
On Tue, Oct 13, 2015 at 03:07:13PM +0100, Alastair Campbell wrote:
> I'm not sure that you would use Flexbox or grids within a data table?
> (Although I'm not sure why you would use a form in a data table either!)
For form in data table use case: people filling in rosters, where a table
may be partially or completely filled in but must be editable.
(only because I had to build one for available vacation homes once :)
_mallory
From: Alastair Campbell
Date: Tue, Oct 13 2015 9:23AM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
_mallory wrote:
> For form in data table use case: people filling in rosters, where a table
> may be partially or completely filled in but must be editable.
>
Ah, ok. But would you be using flexbox or grid CSS to re-order items within
a table cell?
I have seen & worked on that type of thing, but it was generally a label
and input within a cell, rather than a set of blocks you would layout
within a cell.
-Alastair
From: _mallory
Date: Tue, Oct 13 2015 10:41AM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
On Tue, Oct 13, 2015 at 04:23:20PM +0100, Alastair Campbell wrote:
> _mallory wrote:
>
> > For form in data table use case: people filling in rosters, where a table
> > may be partially or completely filled in but must be editable.
> >
>
> Ah, ok. But would you be using flexbox or grid CSS to re-order items within
> a table cell?
Dunno, the instances I can think of where order may change, I figure I'd be
changing them with Javascript (like if the table is naturally sorted by
price and someone inputs a new price, the table may rearrange) rather than
CSS, esp since they're (smartly) not releasing grid yet to prevent the
disaster-of-specs flexbox was...
So mostly just remembering that a form-in-a-data-table can be a thing, and
so then I suppose someone with that situation may want/need to go further,
even if I can't see where I'd do it.
_mallory
From: Jonathan Avila
Date: Tue, Oct 13 2015 12:58PM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | Next message →
> I'm not sure that you would use Flexbox or grids within a data table?
(Although I'm not sure why you would use a form in a data table either!) I don't mean to dismiss the scenario though, is there a public facing example you could share, just to get an idea of why people would do that?
One example of form in a table is seen in tax forms where there is data in most of the cells but you need to fill in some fields in the table. I imagine one day people might use CSS only tables and then this might be relevant. Another case is where people use table structure but perhaps use CSS to change the way the traditional table looks to make it appear in some other representation like an infographic. No public links -- just trying to consider what scenarios are out there.
Jonathan
--
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703-637-8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: Alastair Campbell
Date: Wed, Oct 14 2015 4:01AM
Subject: Re: Flexbox layout ordering and tabbing order
← Previous message | No next message
So if people use form controls in a data table, it seems unlikely that
within the cells you would do any re-ordering.
However, if people use semantically neutral HTML (e.g. divs) and CSS grids
instead of a data-table structure, would you want the visual-order and
tabbing / reading order to be different?
If the site completely re-orders things using CSS (or JavaScript come to
think of it), they will almost certainly focus their design effort on the
visual structure, i.e. does it look right and read well visually?
Therefore I think the better result from an accessibility point of view
would be to follow the visual order as that is what people are designing
for.
The is fairly easy for flexbox, as it is one-dimensional and has the
concept of a 'flow direction', so there is an obvious linear order.
The more complex scenario is grids, as that is two-dimensional, and can
place blocks anywhere. Are there standard algorithms for working out flow
in a 2D set of blocks?
I think Opera used to have something like that for it's keyboard controls?
(Pre-engine switch to blink.)
-Alastair