Responsive Accessibility

Design Patterns

Fluid Layout

• Use flexible grids that adapt rather than fixed breakpoints that snap
• Set max-width on content containers for readability (45–75 characters per line)
• Let whitespace compress before content reflows
• Avoid fixed-width elements that force horizontal scroll

Content Priority

• Define what's essential at each breakpoint
• On small screens: show core content, provide access to rest
• Don't hide critical functionality behind "desktop only" features
• Navigation should adapt (hamburger menu is fine) but all destinations must remain accessible

Touch and Pointer Adaptation

• At small viewports: increase touch targets to 48px minimum
• At large viewports: pointer-friendly sizes are acceptable (24px minimum)
• Detect pointer type with @media (pointer: coarse) for touch-first sizing
• Spacing between targets should increase on touch devices

Zoom-Safe Patterns

• Sticky headers must not consume excessive vertical space at zoom (a header that takes 30% of the viewport at 200% zoom is a barrier)
• Fixed-position elements must be tested at 200% zoom
• Tooltips and popovers must remain visible and reachable at zoom
• Modal dialogs must be scrollable if content exceeds viewport at zoom

Testing Protocol

1. Test at 100%, 150%, and 200% browser zoom on a 1280px viewport
2. Test at 320px viewport width (mobile equivalent)
3. Test in both portrait and landscape orientation
4. Test with system font size set to largest option
5. At each test point verify: no horizontal scroll, no clipped text, no overlapping elements, all interactions functional

Assessment Checklist

• Content reflows at 200% zoom without horizontal scrolling
• Text remains readable at 200% scaling
• Both orientations are supported
• Touch targets increase at small viewports
• Sticky/fixed elements don't dominate the viewport at zoom
• No functionality is lost at any supported viewport size
• All text uses relative units