Back to course

Lesson 80: Accessibility Considerations in Flexbox and Grid

CSS Mastery: From Zero to Hero in 100 Lessons

80. Accessibility Considerations in Flexbox and Grid

Both Flexbox and Grid allow developers to visually reorder content using order (Flexbox) or explicit placement (Grid) that differs from the HTML source code order. This has critical accessibility implications.

The Rule of Source Order

  • Assistive technologies (like screen readers) read the content in the order it appears in the HTML source code, regardless of how CSS visually arranges it.
  • Visually reordered content can confuse users who rely on screen readers or keyboard navigation (which follows the source code/DOM order).

Best Practices

  1. Prioritize Logical HTML: Always structure your HTML in the most logical reading order first.

  2. Use order Sparingly: Only use the order property (order: -1, order: 1, etc.) or grid placement properties to make minor, necessary visual adjustments (e.g., moving a subtle icon) or when the resulting reading order is still logical.

    • Bad Example: Changing the order of form fields so the visual order (A, B, C) doesn't match the tab order (C, B, A).
    • Good Example: Moving a sidebar below the main content on mobile screens, where reading the main content first is still logical.

  3. Test Keyboard Navigation: Always test your complex layouts by using the Tab key to ensure the focus indicator moves in a logical, sequential order consistent with the visual design.