The Hidden Impact of CSS Order in Web Development

Have you ever found yourself on a homepage where you try to use tab to navigate and it's just jumping around all over the place? Then you might have stumbled onto something that often happens when web developers rely heavily on the CSS order property to design and display their page without considering the logical structure of their page.

In this blog post, we'll explore the impact of the CSS orderproperty on navigation and accessibility in web development. Using a shopping list app built with React and TypeScript, we'll illustrate the problems that can arise when the visual order of elements does not match their logical order. We'll also provide guidance on how to use the order property correctly to improve accessibility. So let's dive in and discover the hidden impact of CSS order in web development.

The Problem with CSS Order Property

The CSS order property is used to change the order in which flex or grid items are displayed on a web page. By default, flex and grid items are displayed in the order they appear in the HTML. However, using the order property, developers can change the visual order of these items, allowing them to be repositioned on the page.

Something that is often missed is that this changes the visual order of the elements but leaves the logical order (the html) unchanged. When you use a keyboard to navigate or a screen reader they rely on the logical order of elements to know what comes next. If the order property is used to change the visual order without changing the logical order, it can cause confusion for users.

For example, in our shopping list app, we might want to display items that have been purchased at the bottom of the list. If we use the order property to visually reorder the list, it may cause confusion for users who rely on the order of items in the HTML.

In the shopping list app you can change the way items are ordered. Feel free to play around with it! Pay attention to the numbers on the left of the item. They show the items actual html order of the items.

Using flex and css order

Using Javascript to re-order the items prior to render

So what do we do?

To fix this issue in our example app we could use JavaScript to reorder elements in the HTML before rendering the page. This ensures that the logical order of elements is maintained, while allowing for a unique visual layout.

There are of course scenarios where the order property shines and can be truly helpful while still maintaining a a page that is easy to navigate for all users. You might have design requirements that mean you have to visually place an element out of it's logical order.

To illustrate this imagine that you have a web shop with this simplified product component that follows the visual order you want to achieve:

HTML

<article>
    <p class="product__stock">Availibility: 10</p>
    <img class="product__image" 
        src="product-image.jpg" 
        alt="product image description" 
        >
    <h2 class="product__title">Product Title</h2>
    <p class="product__desc">Product Description</p>
</article>

Now imagine a screen reader is relaying the content to you and ask yourself if the order still makes sense? Here it make perfect sense to use order to reorder the elements visually while maintaining a logical order for navigation and accessibility. Then the code might look like something like this instead:

HTML

<article class="product">
    <h2 class="product__title">Product Title</h2>
    <img class="product__image" 
        src="product-image.jpg" 
        alt="product image description" 
        >
    <p class="product__desc">Product Description</p>
    <p class="product__stock">Availibility: 10</p>
</article>

CSS

.product {
      display: flex;
      flex-direction: column;
    }
.product__image {
        order: -1;
    }
.product__stock {
        order: -2;
    }

What you end up with is a page that looks the way you want but is still easy to follow and navigate for any user that might come your way.

Conclusion

In this blog post, we've discussed the importance of accessibility in web development and how CSS properties can affect it. We've seen how the order property can cause accessibility issues for users who rely on assistive technology and explored possible solutions.

It's crucial for developers to prioritise accessibility in their applications and follow best practices, such as using semantic HTML, maintaining a logical order to their html, providing alternative text for images, ensuring color contrast, and following guidelines (links provided in the next section). By doing so, we can create web applications that are accessible to everyone.

Web development has evolved rapidly in recent years, giving developers the tools to create dynamic and powerful web applications. However, with this power comes responsibility, particularly in terms of ensuring that web applications are accessible to everyone, regardless of their abilities.

Other Resources for accessibility guidelines and testing tools

Developers who want to learn more about accessibility guidelines and best practices can find valuable resources here

• Web Content Accessibility Guidelines (WCAG)
• The Accessibility Developer Guide
• Accessible Rich Internet Applications (ARIA).

To ensure web accessibility, developers should use accessibility testing tools like

• WAVE
• axe
• Lighthouse.

These tools identify common issues such as missing alt text or improperly formatted headings. Manual testing by individuals with disabilities can also provide valuable insights.

By using these resources, developers can address accessibility issues early and create more inclusive and accessible web applications for all users.

Cover Photo by Leah Kelley from Pexels

Comments

[Muhammad Ahsan Ayaz]

That is a good read @ic3dragon ! Thanks for sharing the specific use case for what to be aware about when using the orders.
What stack did you use to create the app? I'm assuming React.

[Catherine Östlund]

Thank you @codewithahsan ! That's correct, it's built using React, Typescript and some Preact signals to handle state.