[csswg-drafts] [css-flexbox][css-grid] Providing authors with a method of opting into following the visual order, rather than logical order (#7387)

rachelandrew has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-flexbox][css-grid] Providing authors with a method of opting into following the visual order, rather than logical order ==
**A proposal to provide a method in CSS for authors to opt in to following the visual order when in a flex or grid context.**

The [grid](https://drafts.csswg.org/css-grid/#order-accessibility) and [flexbox](https://drafts.csswg.org/css-flexbox-1/#flow-order) specifications detail that reordering caused by these methods is only visual, and note that use of order or grid placement to do logical ordering is non-conforming.

With care from the author in creating a good document, this in general works well for screen reader users. Authors sometimes also use this to improve the experience for screenreader users. For example, by being able to show something visually near the top of the page but, because it would be repetitive for a screen reader user, physically locate it in elsewhere in the document.

## Problems

### Visual/tab order disconnect for keyboard users

In most cases, the document order is the correct logical order for screen reader users who are not able to see the visual display at all. However, if the author has reordered content using grid or flexbox, then the tab order of the document for keyboard users who are referencing the visual display can become disconnected, as it follows the document order.

Some use of grid layout in particular can cause reordering without input from the author. For example using `grid-auto-flow: dense`. In this case a screen reader user is likely well served by the document order, the keyboard navigator may experience unexpected jumps around the component as items appear out of logical order.

Example: https://codepen.io/rachelandrew/pen/NWbLRQE 

Authors also want to be able to reorder content at different breakpoints, to provide the best presentation of the layout for different amounts of screen real estate. In this case again, it is likely that by starting with a sensible document source, a screen reader user will not be affected. A keyboard navigator could experience big jumps around the layout if, for example, an item that logically appears near the top of the source is placed in the footer.

Example: https://codepen.io/rachelandrew/pen/xxRJBGz 

### Impact on screen reader users if the author assumes the visual order is the logical order

Screen reader users can be impacted by the issue **if the author assumes the visual order is the logical order**. For example, someone building a site using a visual design tool that lets them drag elements about and places them using grid layout. In this scenario the author may never see the document order. If that tool does not also modify the source to reflect the visual layout, the screen reader user is going to hear things in a different order than the author intended.

In addition, tools that use the CSS order to infer logical order, will affect screen reader and keyboard navigators alike. Examples:

- [Twitter thread](https://twitter.com/jlengstorf/status/1531506923811483648) (the demo uses order to re-order things by interest, it was pointed out this may have accessibility issues)
- [Using the Grid Shepherd Technique to Order Data with CSS](https://css-tricks.com/using-the-grid-shepherd-technique-to-order-data-with-css/)

Many discussions around this issue have ended on a note that authors should be “doing the right thing” and basing designs around a logically ordered document. As noted, in most cases this will serve screen reader users well. It can actually work against those using the keyboard to navigate however, as what they are looking at can become disconnected from the logical order.

## Proposal

**Provide a method in CSS for authors to opt into following the visual order when in a flex or grid context.**

We already know the "visual order" of elements when in a flex or grid context:

- CSS Display: [order-modified document order](https://drafts.csswg.org/css-display-3/#order-modified-document-order)
- CSS Grid: [grid-modified document order](https://drafts.csswg.org/css-grid/#grid-order)

When in a flex or grid context, authors could add a property, with a value that opts a component into a state where the order-modified, or grid-modified order should be followed. This would enable authors to indicate where this was appropriate, while still allowing order modification to be used without affecting logical order if that was appropriate.

For example:

```
.container {
  display: grid;
  focus-order: visual;
}
```

An opt in would enable use cases such as [this thread](https://twitter.com/jlengstorf/status/1531506923811483648). It would also mean visual design tools that allow people to create layout by drag and drop could add the opt-in as soon as the user started to create a layout that had the potential of reordering. 

We could also consider making the default ordering `visual` in cases such as grid masonry layout, or `auto-flow: dense` where reordering is almost inevitable.

## Alternate approaches and related work

### An HTML attribute

During the breaks in a 2019 CSS WG meeting I discussed this issue with @bkardell and @hober, we have considered using an HTML attribute to indicate that the contents of that element had no logical order, therefore order should be inferred by other means (such as that created by CSS).

I think this could have broader implications than we really need to solve the issues that authors have. It could lead to people always adding this attribute to the body, and therefore treating the document as a bunch of unsorted stuff. It would also require that this worked in block and inline layout too, for example with positioning. While it is possible to reorder with absolute positioning, positioning an element requires some work and thought form an author already, and many of the use cases are better solved with grid today.

In addition, in a responsive design, it may only be at certain breakpoints where this disconnect happens. This would mean that authors could opt in only at the point at which they use a media or container query with the express purpose of doing some reordering.

### CSS Spatial Navigation

The [Spatial Navigation](https://drafts.csswg.org/css-nav-1/) spec proposes a method of navigating a 2d space.

### Open UI: focusgroup

The [focusgroup](https://open-ui.org/components/focusgroup.explainer) primitive aims to facilitate focus navigation using arrow keys.

## Research and further reading

Various people have already written about this problem. These posts also include examples of the issue.

- [Previous issue](https://github.com/w3c/csswg-drafts/issues/5675) (linked to Masonry) with examples and suggestions.
- Rachel Andrew: [Grid, content re-ordering and accessibility](https://rachelandrew.co.uk/archives/2019/06/04/grid-content-re-ordering-and-accessibility/)
- Rachel Andrew (talk and demos): [Grid, content, re-ordering and accessibility](https://noti.st/rachelandrew/Mny9Vg/grid-content-re-ordering-and-accessibility)
- Manuel Matuzovic: [The Dark Side of the Grid: Visual Order](https://www.matuzo.at/blog/the-dark-side-of-the-grid-part-2/#visual-order)
- Adrian Roselli: [Source order matters](https://adrianroselli.com/2015/09/source-order-matters.html)
- Adrian Roselli: [HTML Source Order vs CSS Display Order](https://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html)
- Léonie Watson: [Flexbox and the keyboard navigation disconnect](https://tink.uk/flexbox-the-keyboard-navigation-disconnect/)
- MDN: [CSS grid layout and accessibility](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility)

## Examples from the community

I’ve asked for examples of this and related issues, please add a comment if you have more examples:

- [Scott Jehl](https://twitter.com/scottjehl/status/1531601898528198657?s=20&t=W1nJyxP-cxM4Wt_sYmJKzA)
- [Wanting to reorder to cope with fixed markup](https://twitter.com/Spinal83/status/1531600852611366912?s=20&t=W1nJyxP-cxM4Wt_sYmJKzA)
- [Reordering for different screen sizes](https://twitter.com/VincentTunru/status/1531586369109348352?s=20&t=kJ8MW1fkwd8MYZdlPw1R8g)
- [Deliberate visual reordering different to source](https://twitter.com/aardrian/status/1531610793023787008?s=20&t=kJ8MW1fkwd8MYZdlPw1R8g)
- [Another example of deliberate visual reordering](https://twitter.com/hovhaDovah/status/1531681075562520579?s=20&t=W1nJyxP-cxM4Wt_sYmJKzA)


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7387 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 19 June 2022 08:15:59 UTC