HTML Source Order vs CSS Display Order

Last month in my post Source Order Matters I wrote about why we need to consider how the source order of the HTML of a page can affect users when the CSS re-orders the content visually. While I used a recipe as an analogue and cited WCAG conformance rules, I failed to provide specific examples. I prepared one for my talk at Accessibility Camp Toronto, but have since expanded on it with more examples.

I want to make sure that we all understand that the source order versus display order discussion is not unique to CSS Flexbox. It is not unique to CSS Grids. Many developers have been dealing with this (correctly and incorrectly) since CSS floats and absolute positioning were introduced (and even earlier with tabled layouts). As such, I have examples of each in this post (no tabled layouts).

Examples

As you test these examples, make sure to use the Tab↹ key so you can understand how a screen reader or non-mouse user will experience the order versus how it appears. These all assume a left-to-right, top-to-bottom reading order.

CSS Flexbox

See the Pen Source Order by Adrian Roselli (@aardrian) on CodePen.

You can visit the full version of this CodePen directly if the embed isn’t working (or you just don’t want to be trapped on this page’s tab order).

There are other examples of how Flexbox ordering can change the expected (whether by user or developer) flow of focusable elements on a page. Alastair Campbell provides one showing a generalized page layout. Jules Ernst has one that also documents how browsers and screen readers behave. Right now Firefox is the outlier, as the following animated images demonstrate.

CSS Flexbox tab order in Chrome 45.
Animation of Chrome 45 tabbing through flex items.
CSS Flexbox tab order in Firefox 41.
Animation of Firefox 41 tabbing through flex items.

Firefox may have changed its Flexbox tabbing sequence as of the Nightly build of 44 (scheduled for release late January 2016). Considering the bug to apply Flexbox order to the accessibility tree was just closed in favor of the bug stating order should not affect tabbing order, the current Firefox (version 41) behavior will likely change.

CSS Grid

See the Pen CSS Grid Source Order by Adrian Roselli (@aardrian) on CodePen.

See full version of this CSS Grid example at Codepen. Only Internet Explorer 10+ or Edge support Grid, though prefixed. You can enable in Chrome through the “experimental Web Platform features” flag in chrome://flags. You can enable in Firefox through the layout.css.grid.enabled flag. Get more current information at Can I Use.

Rachel Andrew does a deeper dive into CSS Grid and covers some of the source/visual order issues in her post Modern CSS Layout, power and responsibility.

These animated images show how the tabbing sequence looks in Internet Explorer 11 and Firefox 41 (where Grid doesn’t work even with the flags enabled).

CSS Grid tab order in Internet Explorer 11.
Animation of Internet Explorer 11 tabbing through CSS Grid items.
CSS Grid tab order in Firefox 41 with the flag enabled.
Animation of Firefox 41 tabbing through CSS Grid items. The flag has been enabled, but as you can see support is pretty poor.

CSS Floats

See the Pen CSS Float Source Order by Adrian Roselli (@aardrian) on CodePen.

See the full version at CodePen.

CSS Absolute Position

See the Pen CSS Absolute Position Source Order by Adrian Roselli (@aardrian) on CodePen.

See the full version at CodePen.

Conclusions

The questions about HTML source order versus CSS order are on the mind of both developers and standards bodies, which is a good sign that people are interested in making this work in a way that makes sense for everyone.

I have two suggestions which I will continue to follow until this is all sorted out…

  1. If you are using CSS Flexbox, don’t use order, as that can be a can of worms.
  2. Whether or not you have access to a screen reader, you can at least test your page with the keyboard by tabbing through. If the tab order doesn’t match the expectation based on the content, and if browsers all handle it differently, then you should reconsider your approach.

Update: February 21, 2016

I’ve been remiss in linking Léonie Watson’s great post about the problems with keyboard navigation within flexbox, so I’ll finally do that now: Flexbox & the keyboard navigation disconnect.

9 Comments

Reply

[…] just written a post, HTML Source Order vs CSS Display Order, which shows how different CSS layout methods can affect visual display. You can consider them […]

Reply

Nice writeup!

I’m not sure which is better.

Benefits for both:

• Source order equals tab order makes the most sense developer wise.
• CSS order equals tab order makes sense visually.

I sort of lean toward CSS order as I think users benefit from that situation. Although this statement needs more research! This would also only work if AT followed the CSS order (which I don’t think they do).

In response to Michiel. Reply

Per Jules Ernst’s post, Firefox 41 follows Flexbox’s order declaration, but NVDA 2015.2 did not (even when paired with Firefox). I think Firefox is ultimately going to follow the other browsers and honor source order. I cannot speak to JAWS, VoiceOver, etc. I am happy to have people leave notes of what they find.

Regardless, your point about making sense visually is accurate. Expectations can be set by visual layout, creating an even bigger problem for a sighted keyboard user. That becomes even more apparent with Grid using the example I pulled right from the spec.

So, yeah…

aroselli; . Permalink
Reply

[…] HTML Source Order vs CSS Display Order | Adrian Roselli […]

Reply

[…] HTML source order versus CSS display order, by Adrian Roselli […]

Reply

[…] HTML Source Order vs CSS Display Order by Adrian Roselli […]

Reply

[…] HTML Source Order vs CSS Display Order by Adrian Roselli […]

A Few Different CSS Methods for Changing Display Order | Pixeltide; . Permalink
Reply

It’s 2017, and there still isn’t a way to use order with tabbable items across browsers (i.e. Firefox still hasn’t fixed this issue). So frustrating.

In response to Zoltan Hawryluk. Reply

The issue still open against Firefox has a lot of discussion worth considering. It turns out this is not an easy issue to address and word is that at least one other browser is considering using the approach Firefox uses.

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>