Skip to content

Commit

Permalink
Merge pull request #2233 from w3c/patrickhlauke-issue2232
Browse files Browse the repository at this point in the history 
Corrections to understanding for 1.4.8 Visual Presentation
  • Loading branch information
@alastc
alastc authored and Michael Cooper committed Mar 8, 2022
1 parent 826762c commit 42e0a19
Showing 1 changed file with 12 additions and 72 deletions.
84 changes: 12 additions & 72 deletions understanding/20/visual-presentation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ <h2>Intent of Visual Presentation</h2>
responsibility is to create Web content that does not prevent the user agent from
scaling the content and that allows the reflow of the content within the current
width of the viewport. See
<a href="resize-text">1.4.2: Resize text</a> for additional discussion of resizing text.
<a href="resize-text">1.4.4: Resize text</a> for additional discussion of resizing text.
</p>

<p>The horizontal scrolling requirement is not intended to apply to small-screen devices
Expand Down Expand Up @@ -138,14 +138,13 @@ <h2>Benefits of Visual Presentation</h2>
<section id="examples">
<h2>Examples of Visual Presentation</h2>


<p>The following images show examples of single-spacing, space-and-a-half and double-spaced
text in a paragraph.
</p>




<figure id="figure-text-cut">
<figcaption>The following images show examples of single-spacing, space-and-a-half and double-spaced text in a paragraph.</figcaption>
<img src="img/single-space.gif" alt="Example of single-spaced text. (no space between each line of text)" />
<img src="img/space-and-a-half.gif" alt="Example of space-and-a-half text. (a space equal to half the height of a line of text line)" />
<img src="img/double-space.gif" alt="Example of double-spaced text. (a space equal to the height of a line of text between each line)" />
</figure>

<p>Examples of glyphs include "A", "→" (an arrow symbol), and "さ" (a Japanese character).</p>

</section>
Expand All @@ -157,64 +156,46 @@ <h2>Resources for Visual Presentation</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>

<a href="https://web.archive.org/web/20050419043926/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>

<li>

<a href="http://maxdesign.com.au/articles/em/">Ideal line length for content</a>

</li>

<li>

<a href="http://juicystudio.com/article/cognitive-impairment.php">Developing sites for users with Cognitive disabilities and learning difficulties</a>

</li>

<li>

<a href="https://www.w3.org/TR/2007/WD-xhtml-rdfa-primer-20071026/">RDFA Primer</a>

</li>

<li>

<a href="http://publications.nr.no/Multifunk-NR-rapport.pdf">MULTIFUNK: Bringing computer-supported reading one step further</a>, Date: April 2002, ISBN: 82-539-0491-6, Author: Gjertrud W. Kamstrup, Eva Mjøvik,
<a href="https://web.archive.org/web/20030407195127/http://publications.nr.no/Multifunk-NR-rapport.pdf">MULTIFUNK: Bringing computer-supported reading one step further</a>, Date: April 2002, ISBN: 82-539-0491-6, Author: Gjertrud W. Kamstrup, Eva Mjøvik,
Anne-Lise Rygvold og Bjørn Gunnar Saltnes

</li>

<li>

<a href="http://eric.ed.gov/?id=EJ601947">Effective Monitor Display Design</a> on the ERIC Web portal

</li>

<li>
Expand Down Expand Up @@ -259,45 +240,31 @@ <h2>Resources for Visual Presentation</h2>
</li>

<li>

<a href="http://paul-m-jones.com/archives/276">Line Length, Volume, and Density</a>

<a href="http://paul-m-jones.com/post/2008/03/09/line-length-volume-and-density/">Line Length, Volume, and Density</a>
</li>

<li>

<a href="http://webarchive.nationalarchives.gov.uk/20130812104657/http://odi.dwp.gov.uk/inclusive-communications/channels/publishing.php">Guidance on accessible publishing</a>

</li>

<li>

<a href="http://usability.com.au/2004/12/an-accessibility-frontier-cognitive-disabilities-and-learning-difficulties-2004/"> An Accessibility Frontier: Cognitive disabilities and learning difficulties</a>

</li>

<li>

<a href="http://leftbrainrightbrain.co.uk/2005/03/08/cognitiveperceptual-difference-and-good-web-design/">Cognitive/Perceptual Difference And Good Web Design</a>

</li>

<li>

<a href="http://uxmovement.com/content/6-surprising-bad-practices-that-hurt-dyslexic-users/">6 Surprising Bad Practices That Hurt Dyslexic Users</a>

</li>

<li>

<a href="http://accessites.org/site/2006/11/designing-for-dyslexics-part-3-of-3">Design for Dyslexics</a>

<a href="https://web.archive.org/web/20070313232158/http://accessites.org/site/2006/11/designing-for-dyslexics-part-3-of-3/">Design for Dyslexics</a>
</li>

<li>

<a href="http://www.dyslexia.com/library/webdesign.htm">Web Design for Dyslexia</a>

</li>

</ul>
Expand All @@ -324,36 +291,30 @@ <h3>Sufficient Techniques for Visual Presentation</h3>
<ol>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C23" class="css">Specifying text and background colors of secondary content such as banners, features
and navigation in CSS while not specifying text and background colors of the main
content
</a> OR
</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C25" class="css">Specifying borders and layout in CSS to delineate areas of a Web page while not specifying
text and text-background colors
</a> OR
</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G156" class="general">Using a technology that has commonly-available user agents that can change the foreground
and background of blocks of text
</a> OR
</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G148" class="general">G148</a> OR
</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G175" class="general">Providing a multi color selection tool on the page for foreground and background colors</a>

</li>

</ol>
Expand All @@ -366,14 +327,11 @@ <h3>Sufficient Techniques for Visual Presentation</h3>
<ol>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G204" class="general">Not interfering with the user agent's reflow of text as the viewing window is narrowed</a> OR
</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C20" class="css">Using ems to set the column width</a>

</li>

</ol>
Expand All @@ -386,19 +344,15 @@ <h3>Sufficient Techniques for Visual Presentation</h3>
<ol>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C19" class="css">Specifying alignment either to the left OR right in CSS</a> OR
</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G172" class="general">Providing a mechanism to remove full justification of text</a> OR
</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G169" class="general">Aligning text on only one side</a>

</li>

</ol>
Expand All @@ -416,9 +370,7 @@ <h3>Sufficient Techniques for Visual Presentation</h3>
</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C21" class="css">C21: Specifying line spacing in CSS</a>

</li>

</ol>
Expand All @@ -440,35 +392,29 @@ <h3>Sufficient Techniques for Visual Presentation</h3>
<p>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G146" class="general">G146: Using liquid layout</a>

<em>AND</em> 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="https://www.w3.org/WAI/WCAG21/Techniques/css/C12" class="css">C12: Using percent for font sizes</a> OR
</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C13" class="css">C13: Using named font sizes</a> OR
</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C14" class="css">C14: Using em units for font sizes</a> OR
</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C24" class="css">Using percentage values in CSS for container sizes</a> OR
</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/client-side-script/SCR34" class="script">Calculating size and position in a way that scales with text size</a> OR
</li>

Expand All @@ -477,11 +423,9 @@ <h3>Sufficient Techniques for Visual Presentation</h3>
</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G206" class="general">Providing options within the content to switch to a layout that does not require the
user to scroll horizontally to read a line of text
</a>

</li>

</ol>
Expand All @@ -503,17 +447,13 @@ <h3>Failures for Visual Presentation</h3>
<ul>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F24" class="failure">F24</a>

</li>

<li>

<a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F88" class="failure">Failure of SC 1.4.8 due to using text that is justified (aligned to both the left
and the right margins)
</a>

</li>

</ul>
Expand Down

0 comments on commit 42e0a19

Please sign in to comment.