1.4.10 Reflow — supporting desktop zoom up to 400%, where content should reflow into a single column, without:
- Loss of content or functionality
- Requiring scrolling in two dimensions
On a 1280px wide resolution at 400%, the viewport content is equivalent to 320 CSS pixels wide.
Testing the effects of units with zoom: px vs vh
If you are on a desktop, experiment with zooming this window up to 400%. Notice how the measured viewport size changes, and how the two blocks appear relative to each other.
Viewport size:
Modern CSS Element Spacing
This demo shows how the use of min() results in contextually better spacing between elements by allowing both a px and vh value.
The "margin size" value will update as you resize your window or increase/decrease desktop zoom.
Review more about this technique.
CSS for "Element spacing with min()"
.section + .section {
margin-top: min(128px, 15vh);
}
Margin size:
Section 1
Section 2
Section 3
Modern CSS Element Padding
Here we're using clamp() to set an acceptable range for the padding on the "card" with a goal to create contextually appropraite space. And in the context of a high zoom level, keeping space as a distinction of card boundaries while also decreasing it to allow a greater line length and reduce text crowding.
CSS for "Element padding with clamp()"
.card {
padding: clamp(0.75rem, 5%, 2rem);
}
Modern CSS a11y Upgrades
Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae asperiores ipsam rem nisi fuga!
Sit amet