Page structure and spatial organization accessibility design patterns
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
You Might Also Like
Related Skills
fix
Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.
facebook
frontend-testing
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.
langgeniusfrontend-code-review
Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.
langgenius
code-reviewer
Use this skill to review code. It supports both local changes (staged or working tree) and remote Pull Requests (by ID or URL). It focuses on correctness, maintainability, and adherence to project standards.
google-gemini
session-logs
Search and analyze your own session logs (older/parent conversations) using jq.
moltbot