This mailing list is for technical discussion on Web Style Sheets

fantasai | 21 Jun 2012 00:26

[css3-flexbox] ordering and accessibility concerns

I'm going to walk us through some a11y-related questions. :)

Flexbox allows page content to be reordered.
Two questions arising from this are then:
   A. Should tab-order be affected?
   B. Should speech order be affected?

I'm putting both in the same thread because we have this consistency
question:
   * Should tab-order be consistent with speech order or visual order,
     if they are different?

Flexbox allows content reordering in two ways:
   1. 'flex-direction: row | row-reverse | column | column-reverse ',
      which can effectively reverse the order of items
   2. 'order: <number>', which can arbitrarily reorder flex items

So when you take these in combination, we have four questions, really:
whether order and/or flex-direction affects tab-order and/or speech.

My opinions:

Currently authors can assume that speech, non-CSS UAs, and other
linearized media follow the DOM order. Therefore the best practice is
to put the source in logical order, and to use visual CSS techniques
to perform any reordering that improves the visual layout (since
visual media are 2D and visual elements can be accessed non-linearly
by the viewer). One of the main use cases for visual reordering features
is thus the ability to *not* affect linearized output. Otherwise, you
might as well reorder the content itself.

(Continue reading)

Marat Tanalin | tanalin. com | 21 Jun 2012 01:08

Picon

Re: [css3-flexbox] ordering and accessibility concerns

21.06.2012, 02:26, "fantasai" <fantasai.lists <at> inkedblade.net>:
> One of the main use cases for visual reordering features
> is thus the ability to *not* affect linearized output. Otherwise, you
> might as well reorder the content itself.
>
> Therefore I strongly believe Flexbox's ordering features should *not*
> affect speech output.

I tend to like this option too.

> As for whether tab-order should follow visual or logical order, I
> don't have a strong opinion. Maybe someone else has good arguments
> one way or another. :)

Since flexbox is a CSS feature, whether its corresponding visual order should affect tab order could
probably be controlled explicitly via some CSS property like `tab-order`.

For example, `tab-order` could have following possible values:

    * `tree` (or `normal`) -- used by default and means that tab order follows DOM order;
    * `visual` -- means that tab order should correspond to visual order (regardless of how exactly elements
are reordered -- via flexbox or by using some other CSS feature).

fantasai | 21 Jun 2012 01:52

Re: [css3-flexbox][css3-ui] ordering and accessibility concerns

On 06/20/2012 04:08 PM, Marat Tanalin | tanalin.com wrote:
> 21.06.2012, 02:26, "fantasai"<fantasai.lists <at> inkedblade.net>:
>>
>> As for whether tab-order should follow visual or logical order, I
>> don't have a strong opinion. Maybe someone else has good arguments
>> one way or another. :)
>
> Since flexbox is a CSS feature, whether its corresponding visual order should affect tab order could
probably be controlled explicitly via some CSS property like `tab-order`.
>
> For example, `tab-order` could have following possible values:
>
>      * `tree` (or `normal`) -- used by default and means that tab order follows DOM order;
>      * `visual` -- means that tab order should correspond to visual order (regardless of how exactly elements
are reordered -- via flexbox or by using some other CSS feature).

There's a 'nav-index' property in CSS3 UI. I'm not sure what it's
implementation status is, but maybe it could be extended as you
suggest.

~fantasai

Brad Kemper | 21 Jun 2012 08:48

Picon

Re: [css3-flexbox][css3-ui] ordering and accessibility concerns

On Jun 20, 2012, at 4:52 PM, fantasai <fantasai.lists <at> inkedblade.net> wrote:

> On 06/20/2012 04:08 PM, Marat Tanalin | tanalin.com wrote:
>> 21.06.2012, 02:26, "fantasai"<fantasai.lists <at> inkedblade.net>:
>>> 
>>> As for whether tab-order should follow visual or logical order, I
>>> don't have a strong opinion. Maybe someone else has good arguments
>>> one way or another. :)
>> 
>> Since flexbox is a CSS feature, whether its corresponding visual order should affect tab order could
probably be controlled explicitly via some CSS property like `tab-order`.
>> 
>> For example, `tab-order` could have following possible values:
>> 
>>    * `tree` (or `normal`) -- used by default and means that tab order follows DOM order;
>>    * `visual` -- means that tab order should correspond to visual order (regardless of how exactly elements
are reordered -- via flexbox or by using some other CSS feature).
> 
> There's a 'nav-index' property in CSS3 UI. I'm not sure what it's
> implementation status is, but maybe it could be extended as you
> suggest.

I don't see any reason why it would be OK for 'nav-index' to change the tab order, but 'order' should be
forbidden from doing the same thing. I think the relationship between order's effect on tabbing and
tab-order's effect on tabbing should be similar to the relationship between order's effect on
stacking/painting and z-index's effect on stacking/painting. Or, put another way, 'flex-direction'
and 'order' would change the tab order to match the paint order, and 'nav-index' could be employed to
override that if the author want something different (just as z-index can be used as a hammer to override
the painting order). I think it would be weird for tabbing to jump around, back and forth, instead of
following the visual order. Wanting something different would be the exception, and the time to use 'nav-index'.

(Continue reading)

John Foliot | 21 Jun 2012 03:18

Picon

RE: [css3-flexbox] ordering and accessibility concerns

fantasai wrote:
> 
> I'm going to walk us through some a11y-related questions. :)
> 
> Flexbox allows page content to be <ins>VISUALLY</ins> reordered.
> Two questions arising from this are then:
>    A. Should tab-order be affected?
>    B. Should speech order be affected?
> 
> I'm putting both in the same thread because we have this consistency
> question:
>    * Should tab-order be consistent with speech order or visual order,
>      if they are different?

The issue you are going to run into is this: tab-order and speech order are
often intrinsically linked, especially for low-vision users who may be using
a combination of screen magnifier and screen-reader
(http://www.aisquared.com/zoomtext/) - in a tool such as this, the 'zoom
region' (think a jeweler's loupe) will focus on the 'spoken region' as the
content is processed. Other AT tools such as Read & Write Gold
(http://www.texthelp.com/North-America) place a visual focus on each word
(essentially a "highlighted background") as it reads the words on screen
(extremely useful for dyslexics and foreign language learners). Think follow
the bouncing ball...

So adjusting the tab order, in whatever fashion you do so, will directly
impact and affect reading order WHEN THE USER IS TABBING. To do otherwise
will create a disconnect for some (many?) users.  

For example:

(Continue reading)

fantasai | 22 Jun 2012 00:22

Re: [css3-flexbox] ordering and accessibility concerns

On 06/20/2012 06:18 PM, John Foliot wrote:
>
>> My opinions:
>>
>> Currently authors can assume that speech, non-CSS UAs, and other
>> linearized media follow the DOM order. Therefore the best practice is
>> to put the source in logical order, and to use visual CSS techniques
>> to perform any reordering that improves the visual layout (since
>> visual media are 2D and visual elements can be accessed non-linearly
>> by the viewer). One of the main use cases for visual reordering
>> features
>> is thus the ability to *not* affect linearized output. Otherwise, you
>> might as well reorder the content itself.
>>
>> Therefore I strongly believe Flexbox's ordering features should *not*
>> affect speech output.
>
>
> Except of course when that collides with the low-vision user using a
> combination of zoom and text-to-speech. Under normal (and current)
> implementations, those tools follow the DOM order. If you start to rearrange
> the page's DOM ordered content visually (putting the first DOM node content
> visually after the 3rd) then the tools like ZoomText will be 'flying' all
> over the screen focusing on the DOM order content (regardless of the CSS
> styling), tabbed or not - this is going to be a horrible user-experience.

That assumes that the visual reordering is completely random. But usually
it's not, usually you are using reordering for, e.g. shifting the entire
navigation section to the left or above the main content. So the ZoomText
user following source order will be pulled into the main content area,

(Continue reading)

Tab Atkins Jr. | 26 Jun 2012 00:56

Picon

Re: [css3-flexbox] ordering and accessibility concerns

On Thu, Jun 21, 2012 at 3:22 PM, fantasai <fantasai.lists <at> inkedblade.net> wrote:
> On 06/20/2012 06:18 PM, John Foliot wrote:
>>> Currently authors can assume that speech, non-CSS UAs, and other
>>> linearized media follow the DOM order. Therefore the best practice is
>>> to put the source in logical order, and to use visual CSS techniques
>>> to perform any reordering that improves the visual layout (since
>>> visual media are 2D and visual elements can be accessed non-linearly
>>> by the viewer). One of the main use cases for visual reordering
>>> features
>>> is thus the ability to *not* affect linearized output. Otherwise, you
>>> might as well reorder the content itself.
>>>
>>> Therefore I strongly believe Flexbox's ordering features should *not*
>>> affect speech output.
>>
>>
>>
>> Except of course when that collides with the low-vision user using a
>> combination of zoom and text-to-speech. Under normal (and current)
>> implementations, those tools follow the DOM order. If you start to
>> rearrange
>> the page's DOM ordered content visually (putting the first DOM node
>> content
>> visually after the 3rd) then the tools like ZoomText will be 'flying' all
>> over the screen focusing on the DOM order content (regardless of the CSS
>> styling), tabbed or not - this is going to be a horrible user-experience.
>
>
> That assumes that the visual reordering is completely random. But usually
> it's not, usually you are using reordering for, e.g. shifting the entire

(Continue reading)

fantasai | 26 Jun 2012 01:14

Re: [css3-flexbox] ordering and accessibility concerns

On 06/25/2012 03:56 PM, Tab Atkins Jr. wrote:
>
> Agreed with fantasai here.  Part of the reason for including 'order'
> at all was to allow authors to order their source in the best, most
> logical way, with the important content up front and the lesser
> content later in the document, and then lay it out in whatever way
> makes the most sense.  Whether the navigation section appears on the
> left or right of the main content section shouldn't matter, but in
> today's world it does due to styling limitations, and 'order' lets us
> fix that.
>
> So, I'm *for* order affecting tab-order by default, and *against* it
> affecting speech order by default.

So, you want tab order to:
   - if the sidebar is on the left, enter navigation first, article second
   - if the sidebar is on the right, enter article first, navigation second
?

~fantasai

Tab Atkins Jr. | 26 Jun 2012 01:54

Picon

Re: [css3-flexbox] ordering and accessibility concerns

On Mon, Jun 25, 2012 at 4:14 PM, fantasai <fantasai.lists <at> inkedblade.net> wrote:
> On 06/25/2012 03:56 PM, Tab Atkins Jr. wrote:
>> Agreed with fantasai here.  Part of the reason for including 'order'
>> at all was to allow authors to order their source in the best, most
>> logical way, with the important content up front and the lesser
>> content later in the document, and then lay it out in whatever way
>> makes the most sense.  Whether the navigation section appears on the
>> left or right of the main content section shouldn't matter, but in
>> today's world it does due to styling limitations, and 'order' lets us
>> fix that.
>>
>> So, I'm *for* order affecting tab-order by default, and *against* it
>> affecting speech order by default.
>
>
> So, you want tab order to:
>  - if the sidebar is on the left, enter navigation first, article second
>  - if the sidebar is on the right, enter article first, navigation second
> ?

Gah, good point.  I'm thinking more of the cases where, say, you use
'order' to bring one item to the front.  For example, if I have some
featured comments on my blogpost implemented by tagging them with
class='featured' and ".featured { order: -1; }", I'd like them to be
first when tabbing through all the "reply" buttons.

So basically, the two primary use-cases for 'order' (arbitrary page
layout, and pulling some elements to the front of a container) have
completely different desired default behaviors. :/

(Continue reading)

fantasai | 26 Jun 2012 08:31

Re: [css3-flexbox] ordering and accessibility concerns

On 06/25/2012 04:54 PM, Tab Atkins Jr. wrote:
> I'm thinking more of the cases where, say, you use
> 'order' to bring one item to the front.  For example, if I have some
> featured comments on my blogpost implemented by tagging them with
> class='featured' and ".featured { order: -1; }", I'd like them to be
> first when tabbing through all the "reply" buttons.
>
> So basically, the two primary use-cases for 'order' (arbitrary page
> layout, and pulling some elements to the front of a container) have
> completely different desired default behaviors. :/

So, thinking about your use case, how would you want your content
to appear in
   - a speech browser
   - a UA that doesn't support CSS (or has it turned off)
? Because if you want things reordered there, too, then you just want
to reorder the content in the DOM.

~fantasai

fantasai | 2 Jul 2012 20:48

Re: [css3-flexbox] ordering and accessibility concerns

On 06/20/2012 03:26 PM, fantasai wrote:
> I'm going to walk us through some a11y-related questions. :)
>
> Flexbox allows page content to be reordered.
> Two questions arising from this are then:
> A. Should tab-order be affected?
> B. Should speech order be affected?
>
> I'm putting both in the same thread because we have this consistency
> question:
> * Should tab-order be consistent with speech order or visual order,
> if they are different?
>
> Flexbox allows content reordering in two ways:
> 1. 'flex-direction: row | row-reverse | column | column-reverse ',
> which can effectively reverse the order of items
> 2. 'order: <number>', which can arbitrarily reorder flex items

Proposal:

   * Neither 'order' nor reversing affects rendering in non-visual media.
     This keeps them consistent with non-CSS UAs, and allows the author
     to perform visual reordering without affecting non-visual displays,
     which will use the source document's linear (and ideally logical)
     order. Best practice for accessibility will continue to be that the
     source order is logical; 'order' and reversing allow the source
     order to remain logical while the author manipulates the visual order.

   * The 'tab-order' is also not affected by either 'order' or reversing.
     However, in the future, the CSSWG may introduce a way to have tab

(Continue reading)

John Foliot | 2 Jul 2012 21:37

Picon

RE: [css3-flexbox] ordering and accessibility concerns

Cc: HTML5 Accessibility Task Force
    PFWG via WAI-Xtech

FYI.  Comments?

fantasai wrote:
> 
> On 06/20/2012 03:26 PM, fantasai wrote:
> > I'm going to walk us through some a11y-related questions. :)
> >
> > Flexbox allows page content to be reordered.
> > Two questions arising from this are then:
> > A. Should tab-order be affected?
> > B. Should speech order be affected?
> >
> > I'm putting both in the same thread because we have this consistency
> > question:
> > * Should tab-order be consistent with speech order or visual order,
> > if they are different?
> >
> > Flexbox allows content reordering in two ways:
> > 1. 'flex-direction: row | row-reverse | column | column-reverse ',
> > which can effectively reverse the order of items
> > 2. 'order: <number>', which can arbitrarily reorder flex items
> 
> Proposal:
> 
>    * Neither 'order' nor reversing affects rendering in non-visual
>      media.
>      This keeps them consistent with non-CSS UAs, and allows the author

(Continue reading)

Return

Return to gmane.comp.web.css.general.

Search Archive

Language

Change language

Options

Current view: Threads only / Showing only 20 lines / Not hiding cited text.
Change to All messages, whole messages, or hide cited text.

Post a message
NNTP Newsgroup
Classic Gmane web interface
XML

XML

RSS Feed
List Information

About Gmane