Understanding the Foundation: HTML as Content, CSS as Presentation
The fundamental principle of accessible web design rests on a clear separation between content and presentation. HTML serves as the content layer where we create semantic, well-structured documents. CSS serves as the presentation layer where we apply styles to create the desired visual layout. This separation is not merely an architectural preference--it is essential for accessibility.
CSS Grid Layout enables sophisticated two-dimensional layouts, but it is designed to enhance presentation without altering the underlying semantic structure. The CSS Grid specification explicitly acknowledges this principle in its accessibility section, stating that grid layout gives authors great powers of rearrangement over the document, but these powers should not be used as a substitute for correct ordering of the document source.
Visual reordering through CSS Grid properties such as grid-column, grid-row, grid-template-areas, and order affects only the visual presentation. These CSS-driven changes do not modify how content is ordered in non-visual media, including screen readers, text-to-speech user agents, and sequential keyboard navigation.
To understand how Grid differs from other layout methods, see our guide on relationship between Flexbox and other layout methods for context on when each approach is most appropriate.
Essential principles for creating accessible CSS Grid layouts
Source Order Preservation
Screen readers and keyboard navigation follow HTML source order, not visual grid placement. Always maintain logical content structure in your markup.
Visual vs Logical Reordering
CSS Grid allows visual rearrangement without changing source order. This visual-only reordering does not affect assistive technology behavior.
Tab Navigation Order
Keyboard users navigate through interactive elements in source order. Grid placement that creates visual jumps can confuse users when tabbing.
Markup Flattening
Using display: contents can strip semantic meaning from HTML structures. Prefer subgrid to maintain accessibility while achieving complex layouts.
Visual vs Logical Reordering: The Critical Distinction
How CSS Grid Allows Visual Rearrangement
CSS Grid provides multiple mechanisms for visually rearranging content without modifying the HTML source order:
The order property allows you to change the visual order of grid items by assigning them to ordinal groups. Items with lower order values appear first, while items with higher order values appear later in the visual arrangement. However, the order property does not change the underlying document order.
Grid line-based placement using grid-column and grid-row properties enables precise positioning of items within the grid. A grid item can be visually positioned anywhere on the grid, regardless of its position in the source. For detailed techniques on line-based placement, see our guide on grid layout using line-based placement.
Named areas with grid-template-areas provide a visual approach to grid placement where you can visualize your grid structure in CSS and assign any element to any named area.
What Does NOT Change: Source Order Remains Authoritative
The CSS Grid specification includes a clear directive: the order property and grid placement properties do not affect ordering in non-visual media. This means:
- Screen readers announce content in HTML source order, not visual order
- Tab navigation follows source order, creating potential disconnects with visual layouts
- Text-to-speech output reads content in source sequence
- Search engines primarily rely on source order for content understanding
The specification explicitly warns: "Authors must use order and the grid-placement properties only for visual, not logical, reordering of content."
1/* Visual reordering - affects only visual presentation */2.wrapper {3 display: grid;4 grid-template-columns: repeat(3, 1fr);5 grid-auto-rows: 100px;6}7 8.box1 {9 grid-column: 1;10 grid-row: 2; /* Visually positioned at row 2 */11}12 13/* Screen readers still announce box1 first */14/* Tab navigation still reaches box1 first */15 16/* DO NOT use order for logical content sequencing */17/* Bad practice - creates accessibility disconnect */18.element {19 order: -1; /* Changes visual order only */20}Tab Order and Keyboard Navigation: The Practical Impact
The Disconnect Between Visual and Keyboard Navigation
When you use CSS Grid to visually rearrange content, you create a potential disconnect between the visual experience and the keyboard navigation experience. This disconnect is one of the most significant accessibility concerns with improper grid usage.
Consider a common e-commerce layout where product cards are visually rearranged to feature certain products prominently. If Product A appears first visually but last in the source, keyboard users will tab through other products before reaching Product A. They may wonder why the highlighted product they see is not responding to their tab key.
This issue extends beyond inconvenience. For users with motor disabilities who rely on keyboard navigation, navigating through unexpected tab sequences can make the site effectively unusable.
Testing Keyboard Navigation
Regular keyboard navigation testing is essential for identifying tab order issues in grid layouts:
- Navigate through your page using only the Tab key
- Verify that the sequence feels logical and expected
- If you find yourself jumping unexpectedly from one page area to another, your grid layout may have accessibility issues
Best Practice: If you must visually rearrange content, adjust the source order to match. Never rely on CSS Grid placement to create a logical content flow.
To learn more about Grid-specific techniques, explore our comprehensive guide on what's in Grid Layout.
Markup Flattening: The Display Contents Danger
Understanding How Grid Affects Markup Structure
For an element to become a grid item, it must be a direct child of the grid container. This requirement has significant implications for markup structure and accessibility.
When a list element such as <ul> becomes a grid item, that <ul> itself becomes the grid item--the child <li> elements do not become grid items. This can cause accessibility issues because semantic list structures may be lost or obscured.
Display Contents: A Powerful but Dangerous Tool
The display: contents value causes the element's box to disappear, and its child elements appear as if they have risen up a level. This allows nested elements to participate directly in the grid.
Warning: When an element's box is removed with display: contents, its semantic role may be lost. Lists may lose list semantics, regions may lose landmark roles, and element relationships may be severed. Research shows that many accessibility trees do not correctly represent the flattened structure.
The Subgrid Solution
The subgrid value of grid-template-columns and grid-template-rows provides an elegant solution. Subgrid allows grid items to inherit the grid definition from their parent, passing structure down through multiple DOM levels.
With subgrid, you can maintain semantic HTML structure while achieving sophisticated layout effects. Subgrid is now well-supported across modern browsers and should be preferred over display: contents.
1/* Parent grid container */2.grid-container {3 display: grid;4 grid-template-columns: repeat(4, 1fr);5 gap: 1rem;6}7 8/* Child uses subgrid to inherit column definitions */9.card {10 display: grid;11 grid-template-columns: subgrid; /* Inherits from parent */12 grid-column: span 2; /* Spans two parent columns */13}14 15/* Card content aligns with parent grid columns */16.card-title {17 grid-column: 1 / -1;18}19 20.card-content {21 grid-column: 1 / 3; /* First half of card */22}23 24.card-action {25 grid-column: 3 / -1; /* Second half of card */26}Best Practices for Accessible Grid Layouts
Start with Semantic Source Order
The foundation of accessible grid layouts is semantic source order. Before applying CSS Grid properties, ensure your HTML source follows a logical content flow. This source order should make sense when read sequentially, as this is the order assistive technologies will use.
Mobile-First Approach: Responsive layouts typically start with a single-column arrangement where source order and visual order naturally align. Build up to complex grids for larger viewports while maintaining logical content flow.
Use Grid for Enhancement, Not Replacement
CSS Grid should enhance the presentation of well-structured content, not replace logical content organization. When you find yourself using grid placement to move an element to a dramatically different visual position, consider whether the source order should be adjusted instead.
Test with Multiple Input Methods
Accessibility testing should include multiple input methods:
- Keyboard Navigation: Tab through all interactive elements and verify logical sequence
- Screen Reader Testing: Listen for announcements in logical sequence
- Zoom and Reflow Testing: Verify accessibility at different viewport sizes
- Reduced Motion Preferences: Respect prefers-reduced-motion for animations
Maintain Landmarks and Regions
Grid layouts should preserve landmark regions that assistive technology users rely on. Ensure grid containers do not inadvertently remove or obscure landmark roles.
Common Pitfalls and How to Avoid Them
Pitfall 1: Using Order for Content Sequencing
Problem: Using the order property to create a content sequence that differs from source order creates accessibility problems.
Solution: Adjust the source order to match your intended content sequence. Reserve order for visual tweaks that do not affect content understanding.
Pitfall 2: Over-Positioning with Grid Lines
Problem: Excessive use of precise grid line positioning can create layouts where visually adjacent elements are far apart in the source.
Solution: Use grid line positioning judiciously. Allow items to flow naturally within grid columns and rows for most content.
Pitfall 3: Ignoring Mobile Experience
Problem: A complex grid that makes sense on desktop may become confusing when collapsed to a single column.
Solution: Start with mobile layouts where source order naturally aligns with content priority. Build complexity for larger viewports.
Pitfall 4: Removing Semantics with Display Contents
Problem: Using display: contents without understanding its accessibility implications can strip semantic meaning.
Solution: Prefer subgrid over display: contents when possible. Test thoroughly if using display: contents.