Skip to content
5 changes: 5 additions & 0 deletions understanding/20/resize-text.html
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,11 @@ <h2>Intent of Resize Text</h2>
</p>

</div>

<div class="note">
<p>As with most other Success Criteria, this criterion applies to each variation of the page that is automatically presented for various screen sizes (e.g. media query variations in a responsive site). In an implementation where text does not consistently increase its size as people zoom in (such as when it is transformed based on a media query to adapt to small-screen usage), it must still be possible to get to 200% enlargement in order to satisfy the criterion.</p>
<p>For example, if at the default browser setting of 100% zoom, text is set at 20px when the window is 1280 CSS pixels wide, at 200% zoom it will visually appear at twice the size. Once the page reaches a width of 320 CSS pixels, at 400% zoom, the author may decide to set the text size to 10px: the text is now half the size in CSS pixels, but enlarged to 400%, meaning it is still displayed at twice the size compared to the default browser setting of 100% zoom. It is not required to achieve 200% text enlargement while remaining inside a specific breakpoint (as zooming may result in the variation for a new breakpoint becoming active), but it should still be possible to get 200% text enlargement in some way compared to the default 100% zoom.</p>
</div>

<p>See also
<a href="visual-presentation">1.4.3: Visual Presentation</a>.
Expand Down
2 changes: 1 addition & 1 deletion understanding/21/reflow.html
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ <h3>Avoiding scrolling in horizontally and vertically written languages</h3>
<section>
<h3>The relation of Reflow to the Success Criterion 1.4.4 Resize Text</h3>
<p>The focus of the Reflow Success Criterion is to enable users to zoom in without having to scroll in two directions. <a href="resize-text" class="sc">Success Criterion 1.4.4 Resize Text</a> also applies, so it should be possible to increase the size of all text to at least 200% while simultaneously meeting the reflow requirement. For most implementations, the text is expected to continue to enlarge as the magnification increases, so that users can magnify text up to (and beyond) 400%. In an implementation where text does not consistently increase its size as people zoom in (such as when it is transformed based on a media query to adapt to small-screen usage), it must still be possible to get to 200% enlargement in order to satisfy the Resize Text criterion.</p>
<p>For example, if at the default browser setting of 100% zoom, text is set at 20px when the window is 1280px wide, the same 20px at 200% zoom would mean a text size of 200%. At 400% zoom, the author may decide to set the text size to 10px: the text would now still be enlarged to 200% compared to the default browser setting of 100% zoom. It is not required to achieve 200% text enlargement at every breakpoint, but it should be possible to get 200% text enlargement in some way.</p>
<p>For example, if at the default browser setting of 100% zoom, text is set at 20px when the window is 1280 CSS pixels wide, at 200% zoom it will visually appear at twice the size. Once the page reaches a width of 320 CSS pixels, at 400% zoom, the author may decide to set the text size to 10px: the text is now half the size in CSS pixels, but enlarged to 400%, meaning it is still displayed at twice the size compared to the default browser setting of 100% zoom. It is not required to achieve 200% text enlargement while remaining inside a specific breakpoint (as zooming may result in the variation for a new breakpoint becoming active), but it should still be possible to get 200% text enlargement in some way compared to the default 100% zoom.</p>
</section>
<section>
<h3>Browsers on mobile operating systems</h3>
Expand Down