RE: flexbox review

Edited version:

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.

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.

WCAG Failure 1 [1] deals with 1.3.2, and we could add to that.  I think we need to add another WCAG failure for 2.4.3 that deals with changing the tab order with CSS. This would be similar to Failure 44. [2]

<blockqutote>
5.4.1 Reordering and Accessibility
The order property does not affect ordering in non-visual media (such as speech). Likewise, order does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. nav-index [CSS3UI] or tabindex [HTML40]). Authors must use order only for visual, not logical, reordering of content; style sheets that use 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 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.

[1] http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/F1 
[2] http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/F44 

-----Original Message-----
From: Janina Sajka [mailto:janina@rednote.net] 
Sent: Tuesday, May 6, 2014 5:04 AM
To: public-pfwg@w3.org
Subject: Re: flexbox review

Thanks, Cynthia, for this review.

There having been no comments, I'm assuming PF does not disagree with the analysis? We'll take up the question of turning this evaluation into a PF response to CSS on this week's telecon.

Janina

Cynthia Shelly writes:
> 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.
> 

-- 

Janina Sajka,	Phone:	+1.443.300.2200
			sip:janina@asterisk.rednote.net
		Email:	janina@rednote.net

Linux Foundation Fellow
Executive Chair, Accessibility Workgroup:	http://a11y.org

The World Wide Web Consortium (W3C), Web Accessibility Initiative (WAI)
Chair,	Protocols & Formats	http://www.w3.org/wai/pf
	Indie UI			http://www.w3.org/WAI/IndieUI/

Received on Wednesday, 7 May 2014 23:09:02 UTC