Visual Presentation:
Understanding SC 1.4.8
1.4.8 Visual Presentation: For the visual presentation of blocks of text, a mechanism is available to achieve the following: (Level AAA)
foreground and background colors can be selected by the user
width is no more than 80 characters
text is not aligned on both the left and the right
line spacing is at least space-and-a-half within paragraphs, and paragraph spacing is larger than line spacing
text is 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
Intent of this Success Criterion
The intent of this Success Criterion is to ensure that visually rendered text is presented in such a manner that it can be perceived without its layout interfering with its readability. People with some cognitive, language and learning disabilities and some low vision users cannot perceive the text and/or lose their reading place if the text is presented in a manner that is difficult for them to read.
People with some visual or cognitive disabilities need to be able to select the color of text and the color of the background. They sometimes choose combinations that seem unintuitive to someone without that disability. Sometimes these combinations have very low contrast. Sometimes only very specific color combinations work for them. Control of color or other aspects of text presentation makes a huge difference to their comprehension. For this reason we encourage authors to have as many different color combinations available as possible.
For people with some reading or vision disabilities, long lines of text can become a significant barrier. They have trouble keeping their place and following the flow of text. Having a narrow block of text makes it easier for them to continue on to the next line in a block. Lines should not exceed 80 characters.
People with some cognitive disabilities find it difficult to track text where the lines are close together. Providing extra space between lines and paragraphs allows them to better track the next line and to recognize when they have reached the end of a paragraph. It is best if there are several different options, for instance, space-and-a-half and double spacing for line spacing.
People with certain cognitive disabilities have problems reading text that is both left and right justified. The uneven spacing between words in fully justified text can cause "rivers of white" space to run down the page making reading difficult and in some cases impossible. Text justification can also cause words to be spaced closely together, so that it is difficult for them to locate word boundaries.
The resizing provision ensures that visually rendered text [begin add](text characters that have been displayed so that they can be seen [vs. text characters that are still in data form such as ASCII]) [1978] [end add] can be scaled successfully without requiring that the user scroll left and right to see all of the content. When the content has been authored so that this is possible, the content is said to reflow. This permits people with low vision and people with cognitive disabilities to increase the size of the text without becoming disoriented.
The scaling of content is primarily a user agent responsibility. User agents that satisfy UAAG 1.0 Checkpoint 4.1 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 and that allows the reflow of the content within the current width of the viewport. See Understanding Success Criterion 2.4.4 (Link Purpose (In Context)) for additional discussion of resizing text.
Specific Benefits of Success Criterion 1.4.7:
This Success Criterion helps low vision users by letting them see text without distracting presentational features. It lets them configure text in ways that will be easier for them to see by letting them control the color and size of blocks of text.
This Success Criterion helps people with cognitive, language and learning disabilities perceive text and track their location within blocks of text.
People with some cognitive disabilities can read text better when they select their own foreground and background color combinations.
People with some cognitive disabilities can track their locations more easily when blocks of text are narrow and when they can configure the amount of space between lines and paragraphs.
People with some cognitive disabilities can read text more easily when the spacing between words is regular.
Examples of Success Criterion 1.4.8
None currently documented
Related Resources
Resources are for information purposes only, no endorsement implied.
Techniques and Failures for Success Criterion 1.4.8 - Visual Presentation
Each numbered item in this section represents a technique or combination of techniques that the WCAG Working Group deems sufficient for meeting this Success Criterion. The techniques listed only satisfy the Success Criterion if all of the WCAG 2.0 conformance requirements have been met.
Sufficient Techniques
Techniques to ensure foreground and background colors can be selected by the user
Specifying foreground and background colors in CSS (future link) OR
Providing a color selection tool that allows a pastel background (future link) OR
Providing a multi color selection tool on the page for foreground and background colors (JavaScript, Future Link) OR
Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text (General, future link)
Techniques to ensure width is no more than 80 characters
Not interfering with the user agent's reflow of text as the viewing window is narrowed (General, Future Link) OR
Using ems to set the column width
Techniques to ensure text is not aligned on both the left and the right
Specifying alignment either to the left OR right in CSS (CSS, future link) OR
Providing a feature to remove full justification of text (future link) OR
Aligning text on only one side (according to the text-direction of the language of the content) (General, future link)
Techniques to ensure line spacing is at least space-and-a-half within paragraphs, and paragraph spacing is larger than line spacing
Providing a button on the page to increase line spaces and paragraph spaces. (HTML, CSS, future link) OR
Specifying line spacing of 1.5 in CSS (HTML, CSS, future link)
Techniques to ensure 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
Not interfering with the browser's reflow of text as the viewing window is narrowed (General, Future Link) OR
G146: Using liquid layout AND using measurements that are relative to other measurements in the content by using one or more of the following techniques:
C12: Using percent for font sizes (CSS) OR
C13: Using named font sizes (CSS) OR
C14: Using em units for font sizes (CSS) OR
Using page-percent for container sizes (future link) OR
Calculating size and position in a way that scales with text size (Scripting, future link) OR
Providing options within the content to switch between layouts that use a variety of font sizes (future link)
Additional Techniques (Advisory) for 1.4.7
Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.
Using a hover effect to highlight a paragraph, list items, or table cells (HTML, CSS) (future link)
Presenting text in sans serif font or providing a mechanism to achieve this (CSS) (future link)
Using vertical (bulleted or numbered) lists rather than inline lists (future link)
Using upper and lower case according to the spelling conventions of the text language (future link)
Providing large fonts by default (future link)
Avoiding the use of text in raster images (future link)
Avoiding scaling font sizes smaller than the user-agent default (future link)
Providing sufficient inter-column spacing (future link)
Avoiding centrally aligned text (future link)
Avoiding chunks of italic text (future link)
Avoiding overuse of different styles on individual pages and in sites (future link)
Making links visually distinct (future link)
Providing expandable bullets (future link)
Show/hide bullet points (future link)
Putting an em-space or two spaces after sentences (future link)
Failures for SC 1.4.7
The following are common mistakes that are considered failures of Success Criterion 1.4.7 by the WCAG Working Group.
(No failures currently documented)