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:

<a href="" tabindex="3">First Link</a>
<a href="" tabindex="1">Second Link</a>
<a href="" tabindex="2">Third Link</a>

...should and does take tab focus as 2nd, 3rd, 1st (and the focus indication
would "hop" from each link to each link in that order) and is read by a
screen reader as "link: Second Link, link: Third Link, link: First Link"
when the user is tabbing through the focusable content on the page - never
mind that this sounds "weird" - it is appropriate behavior. (It is also why
a11y folk STRONGLY caution against the use of tabindex, reserving it only
for the most critical of interventions).

HOWEVER, tab-order does not always affect speech order. If those 3 links
above where laid out in a paragraph, and the non-sighted or
low-vis/dyslexic[sic] user just let it read aloud, it would follow the
normal text-flow: but if they tabbed through the links the visual focus
would be jumping around from link to link.

So the answer to your question, as is often the case in accessibility is: it
depends. Sometimes they are the "same", other times they are "different" -
it depends on how the non-sighted/low-vision/keyboard-only user is
interacting with the marked up code - linear reading, or tabbing though
tab-focusable content.

For the non-sighted user, this is likely not *too* intrusive, as they would
hear "link, link, link" - rarely numbered as in my example: however there
will be a comprehension disconnect between the full text flow and the tabbed
links. (Sadly non-sighted users have become quite adept in deciphering this
mess, given the years of poor author practice they've endured over the
years.)

For the low-vision user however you will have an extremely "jerky" visual
interaction, as the zoomed focus races from one tab-able element to the
other - and in fact this is the user most negatively affected here, as for
the fully sighted keyboard-only user (non-mouse user - perhaps an amputee?),
there will be some visual disconnect with the tabbing experience (similar to
tabindex) that *might* have some cognitive impact, however it will likely be
minimal most of the time - it depends (again) on the larger design.


Relevant WCAG Guidelines:

1.3 Create content that can be presented in different ways (for example
simpler layout) without losing information or structure.

	* 1.3.1 Info and Relationships: Information, structure, and
relationships conveyed through presentation can be programmatically
determined or are available in text. (Level A)

	* 1.3.2 Meaningful Sequence: When the sequence in which content is
presented affects its meaning, a correct reading sequence can be
programmatically determined. (Level A)

	* 1.3.3 Sensory Characteristics: Instructions provided for
understanding and operating content do not rely solely on sensory
characteristics of components such as shape, size, visual location,
orientation, or sound. (Level A)

Source: http://www.w3.org/TR/WCAG/#content-structure-separation 

(Off the top of my head, a key/clue is in 1.3.2, where the programmatic
sequencing could likely be set via CSS as well, but it does nothing for the
visual experience of the low-vis user...)


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

My opinion:
I am increasingly coming to think that the browsers are going to have to
start offering users more accessibility options in their user-settings, to
account for all of this additional impact on the UI/UX. For example, in this
case I think the real answer is that the end user (who should always be in
control of their experience) should be able to set a switch in their
user-settings that specifically over-rides pages using flexbox styling. Will
it have a negative impact on the visual output of the page? Yes (but
remember that this is a user-choice decision, and if it is a choice between
beautiful versus usable, usable wins EVERY time).


> 
> 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. :)

My opinion:
Based on the use-case of the ZoomText user (and to some extent the sighted
keyboard-only user), and embracing the 'spirit' of the "P" in POUR (which
stands for Perceivable) tab-order SHOULD* follow a logical visual order
unless there is an extremely compelling reason why it not do so (then use
tabindex).

(*RFC 2119 SHOULD)

JF

Received on Thursday, 21 June 2012 01:19:21 UTC