Allow for the ability to easily adjust white space around objects and
text, including boxes, paragraph headings, and content, to a degree that suits the
user and does not disrupt the overall integrity of a web page.
Current:
1.4.8 Visual Presentation: For the visual presentation of blocks of text, a mechanism is
available to achieve the following (Level AAA):
1.
Foreground and background colors can be selected by the user.
2.
Width is no more than 80 characters or glyphs (40 if CJK).
3.
Text is not justified (aligned to both the left and the right
margins).
4.
Line spacing (leading) is at least space-and-a-half within
paragraphs; and paragraph spacing is at least 1.5 times larger than the line
spacing.
5.
Text can be resized, without assistive technology, up to 200 percent
in a way that does not require a user to scroll horizontally to read a line
of text on a full-screen window.
Proposed:
1.4.8 Visual Presentation: For the visual presentation of blocks of text and objects, a mechanism is
available to achieve the following (Level AA):
1.
Foreground and background colors can be
selected by the user.
2.
Width is no more than 80 characters or glyphs for Latin and Semitic based languages; or 40 for Chinese, Japanese,
and Korean; or can be selected
by the user.
3. Text is not fully justified (aligned to both the left and the right margins), or justification can be set by the user.
4.
Line spacing (leading) is at least space-and-a-half within
paragraphs; and paragraph spacing is at least 1.5 times larger than the line
spacing.
5.
Text can be resized, without assistive technology, up to 200 percent
in a way that does not require the user to scroll horizontally to read a line of
text on a full-screen window.
6.
Increased line and border spacing can be added around blocks of
text and objects, such that they can be increased up to 200% without loss of content or functionality.
Include https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html
Suggestion for Priority Level (AA)
AA
As this can be enabled via personalization, it is widely applicable.
Guideline 1.4 Distinguishable: Make it easier
for users to see and hear content, including separating foreground from
background.
Or under the personalization
guideline
White space, also described as negative space, reduces clutter and
provides definition to content so that the viewer is given a clear overview of
a web page. It is used by designers to enhance text and the position of objects
on a page.
Use of white space aids navigation through a page and improves readability. It can enhance tracking, where there is a considerable amount of text, and guides the user to important elements on a page. For those with cognitive impairments, it has been shown to ease reading difficulties and enable better comprehension of content.
The capability to adjust the amount of white space around
objects and text supports the ability to identify important elements in the
content of a web page.
Also see our Background research document.
“Accommodating-ASD-In-STEM.pdf”. Nathan W . Moon, PhD Robert L. T odd, M S David L. Morton, PhD Emily Ivey, M S.
See http://www.bdadyslexia.org.uk/about-dyslexia/further-information/dyslexia-style-guide.html
Resources are for information purposes only. No endorsement is intended or implied.
Each bulleted item in the success criteria is objective and can be verified.
More information:
CSS/Properties/white-space https://www.w3.org/community/webed/wiki/CSS/Properties/white-space
The CSS layout model - boxes, borders,
margins, padding.
https://www.w3.org/community/webed/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding
Internationalization and white space https://www.w3.org/International/tests/html-css/white-space/results-white-space
"Careful control of whitespace is among
a designer’s most important tools – and in the opinion of this author, the
single most important. However, the degree of control over whitespace that
brings high production values to a site design is absent from default browser
stylesheets, which means that stylists typically make frequent use of the
margin, border, padding, and other CSS layout properties explained in this
article." https://www.w3.org/community/webed/wiki/The_CSS_layout_model_-_boxes_borders_margins_padding
Issue papers