Skip to content

Commit

Permalink
Expand/clarify understanding for 1.4.4 Resize Text, harmonise 1.4.8 V…
Browse files Browse the repository at this point in the history 
…isual Presentation (#2270)

Relates to #2169 and questions about
whether a site that break using "text-only" resizing fails, even if
zooming works

---------

Co-authored-by: Mike Gower <[email protected]>
Co-authored-by: Alastair Campbell <[email protected]>
Co-authored-by: Kenneth G. Franqueiro <[email protected]>
  • Loading branch information
@patrickhlauke @mbgower
@alastc @kfranqueiro
4 people authored Aug 7, 2024
1 parent 86d3081 commit 67ef3f3
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 246 deletions.
157 changes: 28 additions & 129 deletions understanding/20/resize-text.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,30 +20,35 @@ <h2>In brief</h2>

<section id="intent">
<h2>Intent of Resize Text</h2>



<p>The intent of this Success Criterion is to ensure that visually rendered text, including
text-based controls (text characters that have been displayed so that they can be
seen [vs. text characters that are still in data form such as ASCII]) can be scaled
successfully so that it can be read directly by people with mild visual disabilities,
without requiring the use of assistive technology such as a screen magnifier. Users
may benefit from scaling all content on the Web page, but text is most critical.
controls and labels using text, can be made larger so that it can be read more easily by
people with milder visual impairments, without requiring the use of assistive technology
(such as a screen magnifier). Users may benefit from scaling all content on the Web page,
but text is most critical.
</p>

<p>The scaling of content is primarily a user agent responsibility. User agents that
satisfy
<a href="https://www.w3.org/TR/WAI-USERAGENT/guidelines.html#tech-configure-text-scale">UAAG 1.0 Checkpoint 4.1</a> allow users to configure text scale. The author's responsibility is to create Web
content that does not prevent the user agent from scaling the content effectively.
<a href="https://www.w3.org/TR/WAI-USERAGENT/guidelines.html#tech-configure-text-scale">UAAG 1.0 Checkpoint 4.1</a>
allow users to configure text scale through a number of mechanisms - including zoom (of the entire page's content),
magnification, text-only resizing, and allowing the user to configure a size for rendered text.
The author's responsibility is to create Web content that does not prevent the user agent from scaling the content effectively.
Authors may satisfy this Success Criterion by verifying that content does not interfere
with user agent support for resizing text, including text-based controls, or by providing
direct support for resizing text or changing the layout. An example of direct support
might be via server-side script that can be used to assign different style sheets.
</p>

<p>Content satisfies the Success Criterion if it can be scaled up to 200% using at least one text scaling
mechanism supported by user agents.</p>


<p>If the author is using a technology whose user agents do not provide zoom support,
the author is responsible for providing this type of functionality directly or for
providing content that works with the type of functionality available in the user agent.
If the user agent doesn't provide zoom functionality but does let the user change the
<p>If the author is using a technology whose user agents do not provide support for specific text scaling mechanisms,
the author is responsible for providing this type of functionality directly, or providing
content that works with the type of functionality provided by the user agent. For instance, if the
user agent doesn't provide full-page zoom functionality, but does let the the user change the

text size, the author is responsible for ensuring that the content remains usable
when the text is resized.
</p>
Expand All @@ -62,7 +67,7 @@ <h2>Intent of Resize Text</h2>
can be accessed, is provided to the user in some way besides the fact that it is truncated.
</p>

<p>Content satisfies the Success Criterion if it can be scaled up to 200%, that is, up
<p>Content satisfies the Success Criterion if it can be scaled up to 200% - that is, up
to twice the width and height. Authors may support scaling beyond that limit, however,
as scaling becomes more extreme, adaptive layouts may introduce usability problems.
For example, words may be too wide to fit into the horizontal space available to them,
Expand All @@ -77,7 +82,7 @@ <h2>Intent of Resize Text</h2>
a minimum magnification of 200%. Above 200%, zoom (which resizes text, images, and
layout regions and creates a larger canvas that may require both horizontal and vertical
scrolling) may be more effective than text resizing. Assistive technology dedicated
to zoom support would usually be used in such a situation and may provide better accessibility
to zoom support would usually be used in such a situation, and may provide better accessibility
than attempts by the author to support the user directly.
</p>

Expand All @@ -87,7 +92,6 @@ <h2>Intent of Resize Text</h2>
we suggest using text wherever possible. It is also harder to change foreground and
background contrast and color combinations for images of text, which are necessary
for some users.

</p>

</div>
Expand All @@ -101,254 +105,149 @@ <h2>Intent of Resize Text</h2>
<a href="visual-presentation">1.4.3: Visual Presentation</a>.
</p>


</section>
<section id="benefits">
<h2>Benefits of Resize Text</h2>


<ul>

<li>
This Success Criterion helps people with low vision by letting them increase text
size in content so that they can read it.

</li>

</ul>

</section>

<section id="examples">
<h2>Examples of Resize Text</h2>



<ul>

<li>
A user with vision impairments increases the text size on a Web page in a browser
from 1 em to 1.2 ems. While the user could not read the text at the smaller size,
they can read the larger text. All the information on the page is still displayed when
the larger font is used for the text.

</li>

<li>
A Web page contains a control for changing the scale of the page. Selecting different
settings changes the layout of the page to use the best design for that scale.

</li>

<li>
Users with a zoom function in their user agent change the scale of the content.
All the content scales uniformly, and the user agent provides scroll bars, if necessary.

A user changes the scale of the content with the browser's full-page zoom function.
All the content scales uniformly, and the browser provides scroll bars, if necessary.
</li>

</ul>

</section>

<section id="resources">
<h2>Resources for Resize Text</h2>



<ul>

<li>

<a href="https://www.w3.org/TR/CSS2/box.html">CSS 2 Box Model</a>

</li>

<li>

<a href="https://www.w3.org/TR/CSS2/visuren.html">CSS 2 Visual formatting Model</a>

</li>

<li>

<a href="https://www.w3.org/TR/CSS2/visudet.html">CSS 2 Visual formatting Model Details</a>

</li>

<li>

<a href="http://www.456bereastreet.com/archive/200504/about_fluid_and_fixed_width_layouts/">About fluid and fixed width layouts</a>

</li>

<li>

<a href="http://cookiecrook.com/AIR/2003/train/accessiblecss.php">Accessible CSS</a>

</li>

</ul>

</section>

<section id="techniques">
<h2>Techniques for Resize Text</h2>



<section id="sufficient">
<h3>Sufficient Techniques for Resize Text</h3>


<ul>

<h3>Sufficient Techniques for Resize text</h3>
<ol>
<li>

<a href="../Techniques/general/G142" class="general">Using a technology that has commonly-available user agents that support zoom</a>

</li>

<li>

<p>
Ensuring that text containers resize when the text resizes
<strong>AND</strong> using measurements that are relative to other measurements in the content by using
one or more of the following techniques:
</p>

<ul>

<li>

<a href="../Techniques/css/C28" class="css">Specifying the size of text containers using em units</a>

</li>

<li>

<p>Techniques for relative measurements</p>

<ul>

<li>

<a href="../Techniques/css/C12" class="css">Using percent for font sizes</a>

</li>

<li>

<a href="../Techniques/css/C13" class="css">Using named font sizes</a>

</li>

<li>

<a href="../Techniques/css/C14" class="css">Using em units for font sizes</a>

</li>

</ul>

</li>

<li>

<p>Techniques for text container resizing</p>

<ul>

<li>

<a href="../Techniques/client-side-script/SCR34" class="script">Calculating size and position in a way that scales with text size (Scripting)</a>

</li>

<li>

<a href="../Techniques/general/G146" class="general">Using liquid layout</a>

</li>

</ul>

</li>

</ul>

</li>

<li>

<a href="../Techniques/general/G178" class="general">Providing controls on the Web page that incrementally change the size of the text

</a>

</li>

<li>

<a href="../Techniques/general/G179" class="general">Ensuring that there is no loss of content or functionality when the text resizes and
text containers do not resize
</a>

</li>

</ul>

</section>

<section id="advisory">
<h3>Additional Techniques (Advisory) for Resize Text</h3>


<ul>

<li>

<a href="../Techniques/css/C17" class="css">Scaling form elements which contain text</a>

</li>


<li>

<a href="../Techniques/css/C20" class="css">C20: Using ems to set column width so that lines can average 80 characters or less</a>

</li>

<li>

<a href="../Techniques/css/C22" class="css">Using CSS to control visual presentation of text</a>

</li>

</ul>

</section>

<section id="failure">
<h3>Failures for Resize Text</h3>


<ul>

<li>

<a href="../Techniques/failures/F69" class="failure">Failure of 1.4.3 and 1.4.6 when resizing visually rendered text up to 200 per cent
causes the text to be clipped, truncated or obscured
</a>

</li>

<li>

<a href="../Techniques/failures/F80" class="failure">Failure of Success Criterion 1.4.4 and Success Criterion 1.4.7 when text-based form
controls do not resize when visually rendered text is resized up to 200%
</a>

</li>
<li><a href="../../techniques/failures/F94">F94</a></li>

<li><a href="../../techniques/failures/F94">F94</a></li>
</ul>

</section>

</section>
Expand Down
Loading

0 comments on commit 67ef3f3

Please sign in to comment.