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