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.

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

Updates test steps in F94 #3739

Merged
merged 9 commits into from
Jul 10, 2024
10 changes: 4 additions & 6 deletions techniques/failures/F94.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,20 @@ <h2>Description</h2>
<p>The objective of this technique is to document the failure of text to re-scale when <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length">viewport units</a> are used on text. As these units are relative to the viewport, it means they cannot be resized by zooming or adjusting text-size.</p>
<p>There are various methods to increase and decrease the size of text and other content, but viewport units applied to text (generally via <code>font-size</code> in CSS) prevent most available methods. Attempts to use browser controls to zoom or adjust text-size will not work. Only methods that completely override the CSS will work, and those could cause other issues such as layouts collapsing or text overlapping.</p>
<p>Some uses of viewport units may not prevent text-size adjustments, but if they are used as the primary method for defining text-size, they are likely to cause a failure of <a href="../../Understanding/resize-text">Success Criterion 1.4.4</a>.</p>

<p class="note">If media queries were used to adjust the size of text or unit of measure at different screen sizes, it may not be a failure of <a href="../../Understanding/resize-text">Resize Text</a>. On-page controls provided by the author are also a way of passing the resize text success criteria.</p>
<p class="note">If media queries were used to adjust the size of text or unit of measure at different screen sizes, it may not be a failure of <a href="../../Understanding/resize-text">Resize Text</a>. On-page controls provided by the author are also a way of passing the resize text success criteria.</p>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Failure example 1</h3>
<p>The following CSS and HTML snippet uses VW units to size the text.</p>
<pre xml:space="preserve"><code class="language-css">/* CSS */
<pre xml:space="preserve"><code class="language-css">/* CSS */
.callout {
font-size:1vw;
}</code>

<code class="language-html">&lt;p class="callout"&gt;Text that scales by viewport units&lt;/p&gt;</code></pre>
<p class="working-example">Example <a href="../../working-examples/failure-viewport-units/">page with an example of text sized in <code class="language-css">vh</code> units</a>.</p>
<p class="working-example">Example <a href="../../working-examples/failure-viewport-units/">page with an example of text sized in <code class="language-css">vh</code> units</a>.</p>
</section>
</section>
<section id="tests">
Expand All @@ -44,11 +43,10 @@ <h3>Procedure</h3>
<p>In a desktop browser with a resizable window:</p>
mbgower marked this conversation as resolved.
Show resolved Hide resolved
<ol>
<li>Set zoom level to 100%.</li>
mbgower marked this conversation as resolved.
Show resolved Hide resolved
<li>Set window size to 1280 pixels wide.</li>
<li>Visit the page to be tested.</li>
<li>Use any of the following methods to resize text when available:
<ul>
<li>the zoom feature of the browser</li>
<li>the zoom feature of the browser,</li>
<li>the text-sizing feature of the browser,</li>
<li>on-page controls for resizing text.</li>
</ul>
Expand Down