responsive-review

Responsive Accessibility Review

Test whether an interface maintains accessibility across the full range of screen sizes, zoom levels, and orientations that real users encounter.

Process

Step 1: Viewport Testing

Test the interface at these viewport widths:

• 320px (small mobile)
• 375px (standard mobile)
• 768px (tablet)
• 1024px (small desktop / tablet landscape)
• 1280px (standard desktop)
• 1440px+ (large desktop)

At each viewport, using responsive-accessibility, document:

• Content that overflows or is hidden
• Interactive elements that are unreachable
• Touch targets below 44×44px on touch viewports
• Navigation that doesn't adapt
• Functionality that disappears entirely

Step 2: Zoom Testing

At 1280px viewport, test at:

• 100% (baseline)
• 150% (common for low vision users)
• 200% (WCAG requirement)

Document:

• Horizontal scrolling that appears
• Text that overflows containers
• Overlapping elements
• Sticky headers that consume excessive space
• Modals or tooltips that go off-screen

Step 3: Typography Scaling

Using flexible-typography, test with system font size at maximum. Document:

• Text that doesn't scale
• Containers that clip or truncate text
• Layout that breaks when text grows
• Fixed-height elements that don't expand

Step 4: Orientation Testing

Test in both portrait and landscape. Document:

• Content that only works in one orientation
• Orientation lock that prevents rotation
• Layout that breaks or wastes space in one orientation

Step 5: Density Check

Using information-density, at each viewport verify:

• Is the default density appropriate for the device?
• Can users adjust density?
• Does compact density maintain minimum touch targets?
• Does spacious density work without excessive scrolling?

Output

Deliver a responsive accessibility report:

1. Viewport matrix — pass/fail at each viewport width for core tasks
2. Zoom results — issues at 150% and 200%
3. Typography results — text scaling failures
4. Orientation results — portrait/landscape issues
5. Fix list — prioritised by severity, grouped by:
   • Fixes that affect all viewports
   • Fixes specific to mobile
   • Fixes specific to zoom