Reflow test case

Hi everyone,

On the call there was a question about whether a reflow SC is saying more than 1.3.2 meaningful sequence.

I think there is a difference, mostly because there can be more than 1 "programmatic sequence", and we want the non-layout sequence, rather than the source order.

In HTML there is the DOM order, and the visual/CSS order, which can be different.

Using CSS Flexbox or Grids, the order things appear visually can be quite different from the source. That applies even to 1 column layouts.

As a simple test case I put this together:
https://alastairc.ac/tests/layouts/order-issues.html

Both the navigation and the step-panels use flex-order to re-order the elements.

Two things to consider:
1. The source order is different from the visual order, if you squeeze the window down or zoom, the CSS is not applied and you get the source order.

2. The tab order is different in Firefox from other browsers, it follows the visual order. (This has been considered a good thing for screenreader users [1]) 

I included a link on the page to a lineariser bookmarklet, which makes the page 1 column whilst maintaining the order from the CSS.

This is just a test case, but with grid CSS coming along at a fairly rapid rate, the power available through CSS to apply a completely different ordering to content will be absolute. People will do things like optimise for search engines, or generally not care about the source order.

In many cases the source order and visual order will be the same, but when there is more than one order 1.3.2 doesn't say what should happen. The proposed SC should make it explicit that there should be an linearisable order from a visual point of view, not just programmatically determinable.

Cheers,

-Alastair

1] http://tink.uk/flexbox-the-keyboard-navigation-disconnect/

Received on Sunday, 23 October 2016 23:27:56 UTC