Re: [css-flexbox]

On Mon, Aug 31, 2015 at 4:00 PM, fantasai <fantasai.lists@inkedblade.net> wrote:
> On 08/26/2015 01:51 AM, Bo J Campbell wrote:
>> When Flexbox is used to display the new button order, the tab will
>> jump in a non-linear fashion. WCAG does not specifically judge this
>> as a violation, yet tabbing across buttons with the focus jumping
>> back and forth is a very bad experience for any user, especially
>> those with cognitive disabilities and/or using a keboard. One may
>> suggest coding alternatives to any example, but a Flexbox attribute
>> solves the issues for usability as well as accessibility no matter
>> how creative a developer gets with it.
>
> While it's true that the reordering in this case is not a WCAG
> violation and the resulting tabbing behavior is a bad experience,
> I don't think the solution here is to make the tab order match
> the visual order through some special property. The solution is
> to reorder the DOM instead of using the 'order' property.
>
> Here's why: suppose we add this new property, tab-order, and the
> author uses 'order' and 'tab-order' together. This fixes the
> ordering sequence for visual users. But if someone is navigating
> the page with speech, then the tabbing order and the speech order
> are out of sync. Or if they are navigating the page with speech
> and visual presentation together, the visual presentation and
> the speech presentation are out of sync.
>
> The 'order' property, like any CSS rearrangement technique, must
> be used only when the visual order needs to be out-of-sync with
> other modes of presentation, be they tabbing or speech or something
> else. In all other cases, the author must reorder the DOM. Anything
> else is a layering violation, and the result is various kinds of
> breakage, as we can see from your example.

Note as well, again, that there is nothing special about the 'order'
property here.  Using one of the *-reverse keywords in flex-flow do
the same thing (or using one of the normal keywords, but in an
opposite-dir container).  Or you can use float:right to build a
horizontal UI.  Or you can use Grid in its normal operation; there's
absolutely no correlation between DOM order and where a grid item is
placed.

~TJ

Received on Wednesday, 2 September 2015 22:03:49 UTC