When to Use
Apply when organizing content, creating page structures, or arranging visual elements spatially.
Rules
- Use semantic HTML structure for content hierarchy
- Ensure logical reading and navigation order
- Provide clear visual groupings of related content
- Maintain consistent layout patterns across similar pages
- Ensure content reflows appropriately on different screen sizes
- Provide clear landmarks and section headings
- Avoid layout that depends solely on sensory characteristics
- Ensure touch targets meet minimum size requirements (44px by 44px)
- Provide visible focus indicators that are clearly distinguishable
- Ensure focus order follows logical reading sequence
- Avoid focus traps that prevent keyboard navigation
- Provide skip links for repeated navigation sections
Avoid
- Layout that becomes unusable when zoomed or reflowed
- Content that relies only on shape, size, or position for meaning
- Inconsistent navigation patterns between pages
- Overlapping or obscured interactive elements