wcag-audit-perceivable-layout-deep
Page structure and spatial organization accessibility design patterns
Install
npx skillscat add jkense/agent-skills-wcag/wcag-audit-perceivable-layout-deep Install via the SkillsCat registry.
We need to produce a 2-3 sentence plain-text summary, objective, factual, no marketing, no superlatives, no calls to action. At most 60 words. Summarize skill: Page structure and spatial organization accessibility design patterns. It helps ensure accessible layout, logical reading order, proper focus, etc. Use when organizing content, creating page structures, arranging visual elements spatially. Problem solved: inaccessible layouts, poor navigation, non-reflowable content, etc. Provide summary 2-3 sentences. Let's craft ~45 words.
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
Categories
Install
npx skillscat add jkense/agent-skills-wcag/wcag-audit-perceivable-layout-deep Install via the SkillsCat registry.