flexbox review

For the most part, I'm happy with flexbox.  It will be much easier to work with than absolute positioning and floats.


1.       Flexbox will likely have fewer order problems than absolute positioning for 2 reasons:

a.       It relies on the elements being near each other in the DOM, in a common container, so there will be less chance of elements getting adding to the DOM in an illogical order and positioned will-nilly.

b.      It is much easier to code, so there should be fewer errors in ordering.

2.       They've added a section about order and accessibility, which addresses screen reader behavior, and brings it into alignment with WCAG 1.3.2 Meaningful Sequence.

3.       The reordering and accessibility section mentions tabindex and nav-index, which are related to WCAG 2.4.3 Focus Order.  However, I don't think it's quite strong enough on the importance of focus order for visual keyboard users.  I think this can be addressed with some minor edits.  I would add "authors who change the order using order, flex-direction=row-reverse, flex-direction=column-reverse, or flex-flow (and ??) must|should adjust the focus order with either nav-index or tabindex."



Another option that wouldn't introduce a normative requirement would be to create a WCAG failure for this and link to it.  [aside: I remember a WCAG failure for absolute positioning, but I don't see it now.]  I would like to see such a WCAG failure regardless of any changes in this spec, and a couple of techniques on how to use it accessibly.  I have some samples that avoid order and *-reverse.  We would also need one each using nav-index and tabindex.  We may find that tabindex is a bad idea, since it's markup and flexbox is css.


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


4.       I didn't see anything else that concerned me.