Action 1510: Review Flexbox

https://www.w3.org/WAI/PF/Group/track/actions/1510
http://www.w3.org/TR/css3-flexbox/#order-accessibility

I reviewed the flexbox spec a year or two ago, and again just now.
They have added a section related to reading order and accessibility, which addresses logical vs. visual order, and should be sufficient for meeting WCAG 1.3.1
<blockquote>
5.4.1 Reordering and Accessibility

The order<http://www.w3.org/TR/css3-flexbox/#propdef-order> property does not affect ordering in non-visual media (such as speech<http://www.w3.org/TR/css3-speech/>). Likewise, order<http://www.w3.org/TR/css3-flexbox/#propdef-order> does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. nav-index<http://www.w3.org/TR/css3-ui/#nav-index0> [CSS3UI]<http://www.w3.org/TR/css3-flexbox/#biblio-css3ui> or tabindex<http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#adef-tabindex> [HTML40]<http://www.w3.org/TR/css3-flexbox/#biblio-html40>). Authors must use order<http://www.w3.org/TR/css3-flexbox/#propdef-order> only for visual, not logical, reordering of content; style sheets that use order<http://www.w3.org/TR/css3-flexbox/#propdef-order> to perform logical reordering are non-conforming.

This is so that non-visual media and non-CSS UAs, which typically present content linearly, can rely on a logical source order, while order<http://www.w3.org/TR/css3-flexbox/#propdef-order> is used to tailor the visual order. (Since visual perception is two-dimensional and non-linear, the desired visual order is not always logical.)
</blockquote>

However, I think there is significant risk for web authors to fall afoul of WCAG 2.4.3 Focus Order using this technology.  At a minimum, we'll need some WCAG techniques and failures dealing with ways that flexbox can impact the ability of "focusable components (to) receive focus in an order that preserves meaning and operability", for both sighted keyboard users and screen-reader users, at the same time in the same content.  Some combination with nav order may solve this problem.

This problem is not specific to flexbox, and comes up with float and absolute positioning as well.

Received on Wednesday, 8 October 2014 00:22:59 UTC