Flexbox & the keyboard navigation disconnect
4th of February 2016
- Code things
CSS Flexbox can create a disconnect between the DOM order and visual presentation of content, causing keyboard navigation to break. For this reason, the CSS Flexible Box Layout module warns against resequencing content logic, but asking authors not to use flexbox in this way seems illogical in itself.
TLDR: The only viable way (in my opinion) for the flexbox disconnect to be resolved, is in the browser (as with the Firefox “bug”) and the accessibility tree.
The problem
When content is presented in sequence, we expect to read it and navigate through it in a logical order. In the West this is typically top to bottom/left to right. In the following example, the expected order is “1”, “2”, “3”.
Code language
HTML
Copy to clipboard
<div>
<a href=“/“>One</a>
<a href=“/“>Two</a>
<a href=“/“>Three</a>
</div>
With flexbox it is possible to display content in a different visual order, without changing the DOM order. Items inside a flex container can be visually sequenced using the CSS order property. In the following example, the visual [...]