skills.rest
tsuji-tomonori
tsuji-tomonoriCOMMUNITY
Explore all skills by this author →
GitHub

a11y-reflow-zoom

Audit web layouts for WCAG 2.2 zoom, reflow, and hover/focus compliance.

1|Updated Feb 11, 2026
Search Tags:#accessibility#responsive design#wcag#ui audit#zoom#reflow
One-click install
npx skills add https://github.com/tsuji-tomonori/diopside-v3 --skill a11y-reflow-zoom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a11y-reflow-zoom
Source: https://github.com/tsuji-tomonori/diopside-v3/tree/main/.opencode/skills/a11y-reflow-zoom
Command: npx skills add https://github.com/tsuji-tomonori/diopside-v3 --skill a11y-reflow-zoom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that user interfaces remain functional and visually intact when users zoom in, change screen orientation, or when content reflows to fit smaller screens, preventing common accessibility barriers.

Core Features & Use Cases

  • Zoom & Reflow Compliance: Verifies that UIs do not break or become unusable at 200% zoom or on 320px width screens.
  • Layout Integrity: Addresses issues like horizontal scrolling, content overlap, and missing information in constrained layouts.
  • Hover/Focus UI Handling: Ensures that UI elements appearing on hover or focus are dismissible, hoverable, and persistent, and accessible via keyboard.
  • Use Case: When redesigning a dashboard with many cards and fixed headers, use this Skill to audit and ensure that all interactive elements and content remain accessible and usable on mobile devices and for users with low vision.

Quick Start

Audit the current screen's layout for compliance with WCAG 1.4.10 reflow and 1.4.13 hover/focus requirements.

Frequently Asked Questions about a11y-reflow-zoom

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check if my web application meets WCAG reflow requirements at 200% zoom?▼

To check WCAG reflow compliance, you audit your UI at 200% zoom and 320px width to verify layouts do not break, prevent horizontal scrolling for primary content, and ensure all information remains accessible.

What is the best way to prevent horizontal scrolling when content reflows on mobile devices?▼

Preventing horizontal scrolling during reflow involves auditing responsive layouts, verifying primary content fits within a 320px width constraint, and ensuring fixed headers or grids do not force overflow.

How do I ensure hover and focus UI elements are accessible and dismissible?▼

To ensure hover and focus UI elements are accessible, verify they are dismissible, hoverable, persistent, and fully operable via keyboard, aligning with WCAG 1.4.13 hover/focus requirements.

Can I audit complex dashboard layouts with fixed headers for accessibility compliance?▼

Yes, you can audit complex dashboard layouts with fixed headers by verifying that cards and interactive elements remain accessible, visually intact, and functional during screen orientation changes and up to 200% zoom.

Why does my web layout break or lose information when zoomed in on smaller screens?▼

Your layout breaks during zoom when responsive design lacks proper reflow constraints, causing information overlap, missing content, or horizontal scrolling instead of wrapping content correctly within constrained widths.

Do I need specific components or dependencies to test UI reflow and zoom compliance?▼

No specific dependencies or components are required to test UI reflow and zoom compliance; the skill evaluates your existing web application layouts directly against WCAG 2.2 success criteria without external installations.

Related Skills

Explore More Design & Creative Skills→
aymenhamoudiiaymenhamoudii

accessibility

Audit and remediate web accessibility issues for WCAG 2.2 compliance.

Community
Intermediate
gcomartinsgcomartins

responsive-web-design

Implement mobile-first responsive design with fluid typography and responsive breakpoints.

Community
Intermediate
BasedHardwareBasedHardware
13.1k

browser-automation

Automate browser tasks for testing, design-to-code, accessibility auditing, and visual debugging.

Official
Intermediate
armanzeroeightarmanzeroeight
29

accessibility-checker

Validate web content against WCAG accessibility standards and identify common issues.

Community
Intermediate