Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expand/clarify understanding for 1.4.4 Resize Text, harmonise 1.4.8 Visual Presentation #2270

Merged
merged 13 commits into from
Aug 7, 2024
Merged

Expand/clarify understanding for 1.4.4 Resize Text, harmonise 1.4.8 Visual Presentation #2270

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9c002e5
Expand/clarify understanding for 1.4.4 Resize Text
patrickhlauke Mar 19, 2022
0c4e299
Add rewording suggestion (modified) from Bruce
patrickhlauke Mar 22, 2022
482e2cd
Harmonise wording in 1.4.8
patrickhlauke Mar 22, 2022
f81bf59
Merge branch 'main' into patrickhlauke-understanding-resize-text
patrickhlauke Jul 6, 2022
8ec5c36
Change `his` to `their`
patrickhlauke Jul 6, 2022
88269d2
Merge branch 'patrickhlauke-understanding-resize-text' of https://git…
patrickhlauke Jul 6, 2022
6466f72
Reword to avoid "user uses ... user agent", whitespace/line break cle…
patrickhlauke Jul 5, 2023
5dcdf5f
Merge branch 'main' into patrickhlauke-understanding-resize-text
patrickhlauke Jul 5, 2024
f3945df
Update understanding/20/resize-text.html
mbgower Jul 19, 2024
d5ef40b
Update understanding/20/resize-text.html
mbgower Jul 19, 2024
1655d8c
Update understanding/20/resize-text.html
mbgower Jul 19, 2024
8f214b9
Update understanding/20/resize-text.html
mbgower Jul 19, 2024
8b746eb
Merge branch 'main' into patrickhlauke-understanding-resize-text
kfranqueiro Aug 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 31 additions & 129 deletions understanding/20/resize-text.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,30 +20,38 @@ <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>The author cannot rely on the user agent to satisfy this Success Criterion for HTML
through a specific text scaling mechanism if users do not have access to a user agent with that particular mechanism.
mbgower marked this conversation as resolved.
Show resolved Hide resolved
</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 to provide
mbgower marked this conversation as resolved.
Show resolved Hide resolved
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 +70,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 +85,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 +95,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 +108,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