CSS Order Property for Accessibility

There are plenty of ways to order your elements visually specially with grid widely available.

What if you have a data-driven layout like a grid of items that opens up a dropdown when clicked? You might organize your HTML like this to make it work.

<div class="grid">
  <div class="item" aria-haspopup="true" aria-expanded="false">...</div>
  <div class="item active" aria-haspopup="true" aria-expanded="true">...</div>
  <div class="item" ...>...</div>
  <div class="dropdown" aria-hidden="false">
    Some info about item 2
  </div>
  <div class="item" ...>...</div>
  <div class="item" ...>...</div>
  <div class="item" ...>...</div>
</div>

When an accessible user tabs through or scans through using a screen reader like Talkback or VoiceOver, it will go to the 3rd item before getting to the popup that became visible after a user action. An accessible user might get confused as to why they're hearing information about the 3rd item when they just opened up the 2nd item.

So how could we make this better for an accessible user? Luckily, we can use the CSS property order to reorder our HTML structure to make it more accessible.

Our new HTML structure would be:

<div class="grid">
  <div class="item" aria-haspopup="true" aria-expanded="false">...</div>
  <div class="item active" aria-haspopup="true" aria-expanded="true">...</div>
  <div class="dropdown" aria-hidden="false">
    Some info about item 2
  </div>
  <div class="item" ...>...</div>
  <div class="item" ...>...</div>
  <div class="item" ...>...</div>
  <div class="item" ...>...</div>
</div>

You can see that we moved .dropdown to be underneath the 2nd item. Now, when an accessible user tabs or scans through the grid, it will now go to the open popup first before going to the 3rd item.

We can then use the order CSS property to organize our items visually without losing the accessibleness of our HTML structure.

<div class="grid">
  <div class="item" style="order: 1" ...>...</div>
  <div class="item active" style="order: 2" ...>...</div>
  <div class="dropdown" style="order: 4" ...>
    Some info about item 2
  </div>
  <div class="item" style="order: 3" ...>...</div>
  <div class="item" style="order: 5" ...>...</div>
  <div class="item" style="order: 6" ...>...</div>
  <div class="item" style="order: 7" ...>...</div>
</div>

Using order could be really useful when it comes to making your website more accessible. This example might not be a use case for your project but it certainly shows the power order has when it comes to accessibility.

What accessibility use cases do you think that would require the help of order?

Test tabbing through the example below.