-
Notifications
You must be signed in to change notification settings - Fork 285
/
Copy pathtext-spacing.html
170 lines (164 loc) · 15.2 KB
/
text-spacing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="UTF-8"/>
<title>Understanding Text Spacing</title>
<link rel="stylesheet" type="text/css" href="../../css/sources.css" class="remove"/>
</head>
<body>
<h1>Understanding Text Spacing</h1>
<section id="brief">
<h2>In brief</h2>
<dl>
<dt>Goal</dt><dd>Users can adjust text spacing to make it easier to read.</dd>
<dt>Author task</dt><dd>Ensure content adapts to user-defined text settings.</dd>
<dt>Why it's important</dt><dd>Some people need text with different spacing or font characteristics.</dd>
</dl>
</section>
<section id="intent">
<h2>Intent</h2>
<p>The intent of this Success Criterion (SC) is to ensure that when people override author specified text spacing to improve their reading experience, content is still readable and operable. Each of the requirements stipulated in the SC's four bullets helps ensure text styling can be adapted by the user to suit their needs.</p>
<p>The specified metrics set a minimum baseline. The values in between the author's metrics and the metrics specified in this SC should not have loss of content or functionality.</p>
<p>This SC focuses on the adaptability of content to an increase in spacing between lines, words, letters, and paragraphs. Any combination of these may assist a user with effectively reading text. As well, ensuring that content correctly adapts when users override author settings for spacing also significantly increases the likelihood other style preferences can be set by the user. For example, a user may need to change to a wider font family than the author has set in order to effectively read text. </p>
<section>
<h3 id="authorresp">Author Responsibility </h3>
<p>This SC does not dictate that authors must set all their content to the specified metrics, nor does the SC intend to imply that all users will adjust the specified metrics. Rather, it specifies that should a user choose to set any of these metrics they can do so without any loss of content or functionality. The author requirement is both to not interfere with a user's ability to override the author settings, and to ensure that content thus modified does not break content in the manners shown in figures 1 through 3 in Effects of Not Allowing for Spacing Override.</p>
<p>In some human languages and scripts, some of the metrics specified by the SC are inapplicable. For example, languages such as Japanese do not use spacing following paragraphs, meaning that users are unlikely to make any paragraph spacing changes in practice. The exception in this SC allows authors to ignore text style properties which are inapplicable to the combination of language and script being used.</p>
<p>It is beneficial for users if authors use any locally available guidance for improving readability in the local language or writing system. If the user chooses to go beyond the metrics specified, any resulting loss of content or functionality is the user's responsibility.</p>
<p>Further, this SC is not concerned with <em>how</em> users change the line height and spacing metrics. It does not require that content implement its own mechanisms to allow users to do this. It is not a failure of the content if a user agent or platform does not provide a way for users to do this. Content does not fail this SC if the method chosen by the user - for instance, the use of an extension or bookmarklet - fails to correctly set the line height and spacing text properties on the content (provided that the content is not actively and purposely preventing the properties from being added).</p>
<section>
<h4 id="applicability">Applicability</h4>
<p>If the markup-based technologies being used are capable of overriding text to the Success Criterion's metrics, then this SC is applicable. For instance Cascading Style Sheet/HTML technologies are quite able to allow for the specified spacing metrics. Plugin technologies would need to have a built-in ability to modify styles to the specified metrics. Currently, this SC does not apply to PDF as it is not implemented using markup.</p>
<p>Examples of text that are typically not affected by <a>style properties</a> and not expected to adapt are:</p>
<ul>
<li>Video captions embedded directly into the video frames and not provided as an associated caption file</li>
<li><a>Images of text</a></li>
</ul>
<p>For this SC, <a href="https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element">canvas</a> implementations of text are considered to be <a>images of text</a>.</p>
</section>
<section>
<h4 id="ellipses">Use of ellipses</h4>
<p>There may be regions of a page where text containers cannot expand due to design constraints (such as a maximum width for the left navigation or table column headers). A common convention if text exceeds its space is to replace truncated text with an ellipsis. Where ellipses appear as a result of modifying text style properties, the page can still meet the Text Spacing requirements, so long as the content is still available. For example:</p>
<ul>
<li>a mechanism is provided to reveal the truncated text on the page (for instance, the text appears on focus or on activation)</li>
<li>where the ellipsis is part of a section of content which includes a link, the truncated text is revealed on the linked page</li>
</ul>
<p>Where text is not truncated but it is when text is spaced, if there is no mechanism to show the truncated text, it fails this Success Criterion.</p>
</section>
</section>
<section>
<h3 id="userresp">User Responsibility</h3>
<p>The ability to read and derive meaning from the overridden spacing rests with the user. The user may choose to exceed the spacing adjustments in the SC. If the increased spacing causes loss of content or functionality, the user will adjust or return to the author’s original spacing or spacing within the bounds of the SC. Regardless, the user needs the flexibility to adjust spacing within the bounds set in the SC without loss of content or functionality. Such changes may be achieved via user stylesheet, bookmarklet, extension, or application.</p>
</section>
<section>
<h3 id="effects-not-allowing">Effects of Not Allowing for Spacing Override</h3>
<p>The following images show some types of failures when authors do not take into consideration that users may override spacing to the metrics specified in this Success Criterion.</p>
<section>
<h4 id="cutoff">Text Cut Off</h4>
<p>The bottom portion of the words "Your Needs" is cut off in a heading making that text unreadable in Figure 1. It should read "We Provide a Mobile Application Service to Meet Your Needs."</p>
<figure id="figure-text-cut">
<figcaption>Vertical text cut off is a failure.</figcaption>
<img src="img/spacing_cutoff_fail_vertical.png" alt="Heading text truncated vertically." width="420" height="190" />
</figure>
<p>In Figure 2 the last portion of text is cut off in three side-by-side headings. The first heading should read "A cog in the wheel", but it reads "A cog in the whe". Only half of the second "e" is visible and the letter "l" is completely missing. The second heading should read "A penny for your thoughts". But it reads "A penny for your". The third should read "Back to the drawing board." But it reads "Back to the drawi". </p>
<figure id="figure-horiz-text-cut">
<figcaption>Horizontal text cut off is a failure.</figcaption>
<img src="img/spacing_cutoff_fail_horizontal.png" alt="3 side-by-side headings with truncated text." width="509" height="184" />
</figure>
</section>
<section>
<h4 id="overlap">Text Overlap</h4>
<p>In Figure 3 the last three words "Groups and Programs" of the heading "Technologists Seeking Input from Groups and Programs" overlap the following sentence. That sentence should read, "You are invited to share ideas and areas of interest related to the integration of technology from a group or program perspective." However, the words "You are invited to share ideas" are obscured and unreadable.</p>
<figure id="figure-overlapping-text">
<figcaption>Overlapping text is a failure.</figcaption>
<img src="img/spacing_overlap_fail.png" alt="Heading text overlaps part of paragraph text." width="510" height="170" />
</figure>
</section>
</section>
</section>
<section id="benefits">
<h2>Benefits</h2>
<ul>
<li>People with low vision who require increased space between lines, words, and letters are able to read text.</li>
<li>People with dyslexia may increase space between lines, words, and letters to increase reading speed.</li>
<li>Although not required by this SC, white space between blocks of text can help people with cognitive disabilities discern sections and call out boxes.</li>
</ul>
</section>
<section id="examples">
<h2>Examples</h2>
<p>When spacing is being overridden to the SC's metrics:</p>
<ul>
<li>Text fits within the bounds of its containing box without being cut off.</li>
<li>Text fits within the bounds of its containing box without overlapping other boxes.</li>
</ul>
</section>
<section id="resources">
<h2>Resources</h2>
<section>
<h3>Research</h3>
<p>The grounds for this SC are <a href="#resources">based on research</a>. The metrics chosen as measures are based on the <a href="http://journals.sagepub.com/doi/pdf/10.1177/0264619607075995">McLeish</a> study. She ran from .04 to .25 em tests. McLeish found an increasing curve in reading speed of actual materials up to .25, but it started to flatten at .20. Previous studies that reported no improvement started at .5em. Right at the flat point. <a href="https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2017Jun/0047.html">Wayne E. Dick, Ph.D. analyzed the McLeish study</a> and translated from points. Dr. Dick recommended the metrics that the Working Group adopted.</p>
<section>
<h4 id="lang">Languages and Scripts</h4>
<p>Roughly 480 different languages and scripts <a href="https://lists.w3.org/Archives/Public/public-low-vision-a11y-tf/2018Feb/0001.html">have been tested</a>. Maximum spacing adjustments allowed by the SC were set on the following 3 pages:</p>
<ul>
<li><a href="http://www.geonames.de/languages.html">Languages in their own writing systems</a></li>
<li><a href="https://www.omniglot.com/language/names.htm">Online Encyclopedia of writing systems and languages – language names</a></li>
<li><a href="https://www.omniglot.com/language/phrases/index.htm">Universal Declaration of Human Rights (Article 1)</a></li>
</ul>
</section>
<section>
<h4 id="results">Results</h4>
<p id="langimpact">No adverse effects occurred. The following are the specific findings:</p>
<dl>
<dt>Character Spacing</dt>
<dd>Individual characters in words remained intact though they were spaced a bit further apart.</dd>
<dt>Word Spacing</dt>
<dd>Words were spaced further apart. In languages that do not have words (e.g., Japanese) applying word spacing had no effect. This is expected.</dd>
<dt>Line Height</dt>
<dd>Changing line height did not separate diacritics from characters, nor did it adversely impact ascenders or descenders.</dd>
</dl>
<p>As previously discussed, the ability to read text with adjusted spacing is a user responsibility. This is true no matter the language.</p>
<p>The SC's exception addresses cases where a text style property is not used in a language or script. In such cases, authors are only required to ensure relevant properties do not break the layout.</p>
</section>
</section>
<section>
<h3>Other references</h3>
<ul>
<li>Allan, Kirkpatrick, Lawton Henry, Editors. (2017). <a href="https://www.w3.org/TR/low-vision-needs/#spacing">Accessibility Requirements for People with Low Vision (3.4 Spacing for Reading)</a>. World Wide Web Consortium.</li>
<li><a href="https://github.com/openstyles/stylus/graphs/contributors">Stylus Team</a> (2012). <a href="https://github.com/openstyles/stylus/blob/master/README.md">Stylus browser extension</a> (Firefox, Chrome, and Opera) (compatible with Userstyles.org material).</li>
<li>Campbell, Alastair. (2017). <a href="https://github.com/alastc/adaptation-scripts/blob/master/scripts/text-adaptation.js">Text Adaptation Bookmarklet</a>. GitHub.</li>
<li>Chung, Susana T. L. (2012). <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC3429790/">Dependence of Reading Speed on Letter Spacing in Central Vision Loss</a>. Optom Vis Sci.</li>
<li>Chung, Susana T. L. (2002). <a href="http://journals.sagepub.com/doi/pdf/10.1177/0264619607075995">The Effect of Letter Spacing on Reading Speed in Central and Peripheral Vision (PDF)</a>. IOVS ARVO Journals.</li>
<li>Mcleish, Eve. (2007). <a href="http://journals.sagepub.com/doi/pdf/10.1177/0264619607075995">A study of the effect of letter spacing on the reading speed of young readers with low vision (PDF)</a>. The British Journal of Visual Impairment 25.2: 133-43.</li>
<li>Rello, L., & Baeza-Yates, R. A. (2017). <a href="https://link.springer.com/article/10.1007/s10209-015-0438-8"> How to present more readable text for people with dyslexia</a>. Universal Access in the Information Society, 16(1), 29-49.</li>
<li> Sjoblom, A.M., Eaton, E. and Stagg, S.D., (2016). <a href="http://onlinelibrary.wiley.com/doi/10.1111/bjep.12127/full">The effects of letter spacing and coloured overlays on reading speed and accuracy in adult dyslexia</a>. British Journal of Educational Psychology, 86(4), pp. 630-639). </li>
<li>Zorzi, Marco et, al. (2012). <a href="http://www.pnas.org/content/109/28/11455.full">Extra-large letter spacing improves reading in dyslexia</a>. Proceedings of the National Academy of Sciences.</li>
</ul>
</section>
</section>
<section id="techniques">
<h2>Techniques</h2>
<section id="sufficient">
<h3>Sufficient</h3>
<ul>
<li><a href="../../techniques/CSS/C36">Allowing for Spacing Override (Draft)</a></li>
<li><a href="../../techniques/CSS/C35">C35</a></li>
</ul>
</section>
<section id="advisory">
<h3>Advisory</h3>
<ul>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C8" class="css">C8: Using CSS letter-spacing to control spacing within a word</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C21" class="css">C21: Specifying line spacing in CSS</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/css/C28" class="css">C28: Specifying the size of text containers using em units</a></li>
</ul>
</section>
<section id="failure">
<h3>Failure</h3>
<ul>
<li><a href="../../techniques/failures/F104"></a></li>
</ul>
</section>
</section>
</body>
</html>