Improving Accessibility with Container Queries

Learn how container queries aid accessibility by enabling independent component adaptation, meeting WCAG 1.4.10, and gracefully handling reflow.

We'll cover the following

Surprisingly, container queries can help improve accessibility. They enable independent components to better adapt to reflow, which is WCAG success criterion 1.4.10.

Reflow

Reflow is the term for supporting desktop zoom up to 400%. Large areas of content should reflow into a single column, and critical functionality shouldn’t be lost.

There’s a handy rule for checking reflow accessibility. If a screen has a resolution of 1,280 pixels in width, at 400% zoom, the viewport content width should be equal to a width of 320 CSS pixels. Use the width calculator below to calculate the screen width for different resolutions:

Get hands-on with 1200+ tech skills courses.