Focus vs Source Order

Success Criterion 2.4.3: Focus Order — for both visual and non-visual users, the focus order - which is typically initiated by keyboard tabbing - should proceed logically.

This demo shows how CSS grid can be used as one method to change the visual vs. source order, causing the focus indicator to appear to jump around randomly.

Potential focus order breaking scenarios

Altering placement with:

• absolute, fixed, or sticky positioning
• grid areas
• the order property for grid and flexbox
• masonry layout

Manuel Matuzovic has an excellent and more thorough guide to considerations of CSS Grid layout and altering source order.

Proposal: reading-order-items

Learn about the proposal for a new CSS property to alleviate the order issue: reading-order and current draft (updated name to reading-order-items).

If supported, while the DOM order for this grid-based example may place the items in numeric order for both keyboard access and assistive tech output, the idea is that defining reading-order-items: grid-rows would instead modify keyboard order and announced reading order to match the visual order.

In LTR reading order, this would be left to right and top to bottom, resulting in the read and focusable order of: Item 4, Item 2, Item 3, Item 1.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 30%);
  grid-template-areas: "i4 i4 i2"
                       "i3 i1 i1";  
  reading-order-items: grid-rows;

  > * {
    grid-area: var(--grid-area);
  }
}