Layout

Layout defines how content is structured and organized across the interface.
For accessibility, layout ensures that content order, structure, and behavior remain clear across devices and zoom levels.

Relevant WCAG Criteria

1.3.1 – Info and Relationships (A)

Structure and relationships must be available in the semantic structure of the content, not only visually.

✅ Do

                                                        
                                                        
                                                            <h2>Account settings</h2>
                                                        <p>Update your profile and password.</p>
                                                        <h3>Password</h3>
                                                        <label for="current-password">Current password</label>
                                                        <input id="current-password" type="password" />
                                                        
                                                            

❌ Don’t

                                                        
                                                        
                                                            <div class="title">Account settings</div>
                                                        <div class="text">Update your profile and password.</div>
                                                        <div class="subtitle">Password</div>
                                                        <div class="label">Current password</div>
                                                        <div class="input"></div>
                                                        
                                                            

1.3.2 – Meaningful Sequence (A)

Content must follow a logical reading order.

2.4.3 – Focus Order (A)

Keyboard navigation must follow a logical order.

1.4.10 – Reflow (AA)

Content must work at 320px width and up to 400% zoom without horizontal scrolling (where possible).

How to Use Layout Accessibly

Maintain logical structure

• Layout must reflect the true structure of the content
• Visual positioning must not change meaning

Preserve reading order

• Content should follow a logical top-to-bottom, left-to-right flow
• Avoid layouts that reorder content visually without matching DOM (Document Object Model) order

Support keyboard navigation

• Interactive elements should follow a predictable focus order
• Avoid layouts that create confusing navigation paths

Design for reflow

• Layouts must adapt to smaller screens and zoom
• Avoid fixed-width or rigid layouts that break at smaller sizes

Common Issues

• Visual order does not match reading order
• Broken or confusing keyboard navigation
• Layouts requiring horizontal scrolling at high zoom
• Content overlapping or disappearing on smaller screens
• Relying only on visual layout to communicate structure

Quick Checklist

✅ Structure is not communicated by layout alone

✅ Reading order is logical and consistent

✅ Focus order follows the intended flow

✅ Layout works at small screen sizes and high zoom

✅ Content does not require horizontal scrolling