You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>The purpose of this technique is to provide a mechanism on the Web page to incrementally increase the size of text. Many people with low vision do not use magnifying software, and they may not be familiar with their browser's text size adjustments. This may be particularly true of older people who are learning about computers later in life and who may be experiencing age related vision loss. It may also be true of some people with cognitive disabilities who require increased font size.</p>
5
5
<p>This technique provides a mechanism that some users will find easier to use. The mechanism may include links or buttons that will switch the visual presentation to a different style sheet or use scripts to change the text size dynamically.</p>
6
-
<p>To implement this technique, an author provides controls that allow the user to incrementally increase or decrease the text size of all of the text on the page to a size that is at least 200% of the default text size.</p>
6
+
<p>To implement this technique, an author provides controls that allow the user to incrementally increase or decrease the text size of all of the text on the page to a size up to 200% of the default text size.</p>
7
7
<p>This can be achieved by providing links, buttons or linked images and the controls themselves should be as easy to find (e.g. prominently positioned within the page, presented in a larger text size, high contrast, etc.) as possible.</p>
8
8
<p>This technique can also be used in circumstances where scalable fonts cannot be used, such as legacy code situations.</p>
9
9
<divclass="note">
10
-
<p>This technique can be used in combination with a style switching technique to present a page that is a
11
-
<a>conforming alternate version</a>
12
-
for non-conforming content. Refer to
13
-
<ahref="../css/C29">C29: Using a style switcher to provide a conforming alternate version</a>
<p>This technique can be used in combination with a style switching technique to present a page that is a <a>conforming alternate version</a> for non-conforming content. Refer to <ahref="../css/C29">C29: Using a style switcher to provide a conforming alternate version</a> and <ahref="../../Understanding/conformance#conforming-alt-versions">Understanding Conforming Alternate Versions</a> for more information.</p>
17
11
</div>
18
12
</section><sectionid="examples"><h2>Examples</h2>
19
13
<ul>
20
-
<li>A newspaper article has two buttons near the top of the page. The "increase text size" button has a big letter "T" with an upward arrow and the "decrease text size" button has a small letter "T" with a down arrow. There is
21
-
<codeclass="language-html">alt</code>
22
-
text on each button.</li>
14
+
<li>A newspaper article has two buttons near the top of the page. The "increase text size" button has a big letter "T" with an upward arrow and the "decrease text size" button has a small letter "T" with a down arrow. There is <codeclass="language-html">alt</code> text on each button.</li>
23
15
<li>A site has a number of style sheets with different text size. The user can choose any of the style sheets if their browser provides this functionality. Each page also includes the links "Increase text size" and "Decrease text size" that will change the style sheet currently applied to the appropriate alternate style sheet.</li>
24
16
<li>A site includes the text "Change text size:" followed by text links "Up" and "Down" on every Web page. The links trigger a Javascript that alters the value of the text-size property accordingly.</li>
25
17
<li>A site includes a link on every page that reads "Change text size." The resulting page includes a series of links that includes options representing the available sizes. The links read, "Smallest font size," "Small font size," "Default font size," "Large font size," etc. Instructions preceding the list direct users to choose a link to change to the desired font size.</li>
Copy file name to clipboardExpand all lines: understanding/21/reflow.html
+27-27Lines changed: 27 additions & 27 deletions
Original file line number
Diff line number
Diff line change
@@ -14,7 +14,7 @@ <h2>In brief</h2>
14
14
<dl>
15
15
<dt>Goal</dt><dd>Content can be enlarged without increasing line length.</dd>
16
16
<dt>What to do</dt><dd>Make lines of text reflow within the viewport.</dd>
17
-
<dt>Why it's important</dt><dd>People who need bigger text find it difficult if they must scroll to read long lines.</dd>
17
+
<dt>Why it's important</dt><dd>People who need bigger text find it difficult if they must scroll to read long lines.</dd>
18
18
</dl>
19
19
20
20
</section>
@@ -23,51 +23,51 @@ <h2>Intent of this Success Criterion</h2>
23
23
<p>The intent of this Success Criterion is to support people with low vision who need to enlarge text and read it in a single column. When the browser zoom is used to scale content to 400%, it reflows - i.e., it is presented in one column so that scrolling in more than one direction is not necessary.</p>
24
24
<p>For people with low vision, both enlarging and reflowing text are critical to reading. Enlarging text enables the perception of characters. Reflowing text enables users to track from the end of one line to the beginning of the next line.</p>
25
25
<p>Avoiding the need to scroll in the direction of reading in order to reveal lines that are cut off by the viewport is important, because such scrolling significantly increases the effort required to read. It is also important that content is not hidden off-screen. For example, zooming into a vertically scrolling page should not cause content to be hidden to one side.</p>
26
-
<section>
26
+
<section>
27
27
<h3>How reflow works</h3>
28
-
<p>User agents for technologies such as HTML/CSS, PDF, and ePub have methods for reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.</p>
28
+
<p>User agents for technologies such as HTML/CSS, PDF, and ePub have methods for reflowing content to fit the width of the window (viewport). When appropriately authored, page content can reflow (wrap) to stay within the window's boundaries (viewport) when users zoom in to enlarge the size of content. Spatial relationships of content may change when users zoom, but all information and functionality should continue to be available.</p>
29
29
<p>Supporting the reflow of content is also known as 'Responsive Web Design'. It is enabled by CSS media queries which reformat the web content for different viewport widths (at particular break points) in order to provide optimised layouts for mobile devices such as tablets or smartphones. Importantly, these breakpoints are not only triggered by narrower viewports, but also when users employ the browser zoom function to zoom into the page.</p>
30
30
<p>In a desktop browser at 100% (default) scale, typical web pages that support reflow display content in two, three or more columns. Zooming in will at some point trigger a change of layout, so content will now be displayed in fewer columns. At a higher magnification scale of 200% or more, content will usually be rendered in a single column. Parts of content that were in the marginal columns, like a navigation menu or supplementary content, will now typically appear on top of or below the main content.</p>
31
-
</section>
32
-
<section>
31
+
</section>
32
+
<section>
33
33
<h3>Viewing distance and display resolution</h3>
34
-
<p>The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve. This value lines up with the reported viewport width of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%. It should be noted that 400% applies to the dimension, not the area. It means four times the default width and four times the default height.</p>
34
+
<p>The value of 320 CSS pixels was chosen as a reasonable minimum size that authors can achieve. This value lines up with the reported viewport width of small displays of common mobile devices. The width of 320 CSS pixels exactly corresponds to a desktop browser window set to a width of 1280px and zoomed in to 400%. It should be noted that 400% applies to the dimension, not the area. It means four times the default width and four times the default height.</p>
35
35
<figureid="figure-CSS-pixel-letter-4x"><imgsrc="img/css-pixel-by-device.png" width="462" height="198" alt="Diagram showing the size of character needed by viewing distance to make the same image on the retina with small screen devices close, large screen devices further away."/>
36
36
<figcaption>A letter of the same CSS pixel size on different displays with different resolutions</figcaption>
37
37
</figure>
38
38
<p>When we read, the size of the print is not as important as the image it projects on the retina of our eye. Phones are designed for close viewing while desktops are designed for viewing farther away. As a consequence 16px print on a phone is physically smaller than 16px print on a desktop. This is not a problem because both print sizes cast the same image on our retina if they are viewed at their intended distance.</p>
39
-
</section>
40
-
<section>
39
+
</section>
40
+
<section>
41
41
<h3>Visibility and availability of content</h3>
42
42
<p>How much of the content is visible may change at different scales. For example, navigation menus that are fully visible in the desktop layout are often collapsed into fewer items, or even into a single menu button (the 'hamburger' icon pattern) so they take up less screen space.</p>
43
43
<p>The Success Criterion is met as long as all content and functionality are still fully available - either directly, or revealed via accessible controls, or accessible via direct links.</p>
44
-
</section>
45
-
<section>
44
+
</section>
45
+
<section>
46
46
47
47
<h3>Content exceptions for reflow</h3>
48
48
<p>Content which requires two-dimensional layout for usage or meaning cannot reflow without loss of meaning, and is therefore excepted from the need to be presented without two-dimensional scrolling. For example, graphics and video are by their nature two-dimensional. Cutting up an image and stacking the blocks would render the content unusable. However, it <em>is</em> possible to have these elements stay within the bounds of viewport even as other content zooms to 400% (see advisory techniques).</p>
49
49
<p>Data tables have a two-dimensional relationship between the headings and data cells. This relationship is essential to convey the content. This Success Criterion therefore exempts data tables from needing to display without scrolling in the direction of text (e.g., horizontally in a vertically scrolling page). However, cells within data tables are not excepted unless the cell contains types of content that also requires two-dimensional layout for usage or meaning.</p>
50
50
<p>Interfaces which provide toolbars to edit content need to show both the content and the toolbar in the viewport. Depending on the number of toolbar buttons, the toolbar may need to scroll in the direction of text.</p>
51
-
</section>
52
-
<section>
51
+
</section>
52
+
<section>
53
53
<h3>Responsive web design and other ways to meet this Success Criterion</h3>
54
54
<p>Using the responsive web design approach is the most effective method of achieving the goal of allowing people to zoom in to 400%. Each variation (CSS break point) of the page at the same URL should conform (compare <ahref="https://www.w3.org/TR/WCAG21/#h-note-27">Conformance for WCAG 2.1</a>).</p>
55
55
<p>For organisations which are using legacy systems or are not able to update their layout methods for some reason, an alternative conforming version could be a mobile site which has a fixed 320px wide layout. The user should be able to find that version from the default website.</p>
56
-
</section>
57
-
<section>
58
-
<h3>Avoiding scrolling in horizontally and vertically written languages</h3>
56
+
</section>
57
+
<section>
58
+
<h3>Avoiding scrolling in horizontally and vertically written languages</h3>
59
59
<p>The success Criterion applies to both horizontally and vertically written languages. Zooming the page for horizontally written languages where pages scroll vertically by default (e.g. English) should not require horizontal scrolling. Zooming the page for vertically written languages which scroll horizontally by default should not require vertical scrolling.</p>
60
-
</section>
60
+
</section>
61
61
<section>
62
-
<h3>The relation of Reflow to the Success Criterion 1.4.4 Resize Text</h3>
63
-
<p>The focus of the Reflow Success Criterion is to enable users to zoom in without having to scroll in two directions. <ahref="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>
62
+
<h3>The relation of Reflow to the Success Criterion 1.4.4 Resize Text</h3>
63
+
<p>The focus of the Reflow Success Criterion is to enable users to zoom in without having to scroll in two directions. <ahref="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 up to 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>
64
64
<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. After zooming by 400% the page reflows to fit within the 320 CSS pixel viewport, the author may decide to set the page's text size to 10px. The text is now half the original size in CSS pixels, but as it has been enlarged to 400%, it is still displayed at twice the size compared to the default browser setting at 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>
65
65
</section>
66
-
<section>
66
+
<section>
67
67
<h3>Browsers on mobile operating systems</h3>
68
68
<p>Most browsers on mobile operating systems do not combine reflow and zoom in the same way as on desktop browsers. These mobile browsers normally support reflow when changing the orientation of the device -- content will be adjusted to the new viewport width. However, these mobile browsers can only magnify content to achieve 1.4.4. Resize Text in manners which do not constrain reflow to a single dimension, for example by using a pinch gesture to scale up content or a double tap on a particular column to make it fill the viewport width. This means that zoomed content in most mobile browsers involves two-dimensional scrolling regardless of what an author does.</p>
69
69
<p>Mobile user agents <em>can</em> offer reflow when users zoom into content, as evidenced by the Dolphin browser for Android. The lack of magnified reflow support in browsers on mobile operating systems can therefore be regarded as a user agent support issue.</p>
0 commit comments