Clean Presentation: Supports Meaning

For a variety of reasons, some people will not see web content as the developer or designer intended. People with visual impairment that affect visual acuity may need to increase text size, or use a screen magnifier to view only a small part of the page at one time. People with color vision deficiency may not perceive or distinguish colors in the way that the designer does. People with reading difficulties, including people with dyslexia, may need to change the appearance of text and background in order to make it possible for them to read it. And, of course, some people will be unable to see content at all, and therefore will miss any content or functionality that assumes the ability to visually scan a page.

This means that the design and development of web content should not rely on vision or color perception, although it can and should take advantage of visual presentation to improve usability and user experience.

When developers focus on clean presentation:

  • Users can adapt the display of the page to meet their needs.
  • Users can understand how to work the website without needing vision and color perception.
  • Colors that are used in the interface support legibility.

Avoid Reliance on Color

In addition to its role in aesthetic appeal, color is a valuable way to present information—for example, coding categories of information or highlighting information to take advantage of cultural stereotypes (such as red for “stop”). However, some people with vision impairments can’t perceive color at all, while others are unable to distinguish specific color pairs. Information provided only through color will be unavailable to these users.

When using visual characteristics, make sure the information is available to people who can’t see color:

  • Provide another cue. Use color as a way to convey information to people who can perceive color, but then also provide the information in another way for people who can’t see color—in text, for example.
  • Provide meaningful labels. Give controls such as links and menus meaningful labels and titles so that people can understand what they do without needing instructions.

 

Testing

  • Print out your page in black and white. Do its information and instructions make sense when color isn’t available?
  • Read your page to someone who isn’t looking at the screen. Can they make sense of everything they hear?
  • Check your page for references to visual appearance, size, position, or orientation, and then update the content so that people who can’t see can still understand what you mean.

Support Flexibility and Adaptation

With modern, responsive design approaches that accommodate different screen sizes, including mobile, the concept of supporting display flexibility is much more widespread and the benefits more obvious. Flexibility is also important for accessibility reasons to support people who need to make changes to the way text is presented to make it more readable.

However, some designs are sufficiently rigid that changes applied through, for example, custom style sheets or text resizing through the browser have no effect; in other cases, changes may lead to text becoming unreadable or obscured by other content.

  • Avoid using images of text. Depending on the format and resolution of images, resizing an image of text may lead to loss of readability. Text in an image can’t be changed in appearance. In some cases, such as logos, images of text are unavoidable. But wherever possible, use text provided in HTML and styled in CSS over images of text.
  • Allow text to be resized without losing content or meaning and without unnecessarily requiring horizontal scrolling. Some people with reading difficulties will prefer to enlarge text only (as opposed to zooming the page layout).  People with cognitive or reading disabilities may read better when there is more space between letters, words, lines, or paragraphs. Use relative units when specifying text size and container size so that text can be enlarged using the browser’s native text-resizing functionality. Users need to be able to adjust these values by leveraging custom style sheets, extensions, bookmarklets, or browser settings. The page must also reflow properly when these settings do change so that all content is still visible. The recommendation in WCAG is to accommodate text resizing of 200% of browser’s default text size without any loss of text or overlapping with other content. WCAG also recommends that enlarged text word-wraps and reflows into a single, narrow column of text, so that there is no need for users to scroll horizontally back and forth across long lines of text.
  • Support user-defined style sheets. Make sure that CSS styling can be overridden, if necessary, by user stylesheets that control the appearance of content such as headings, paragraph text, hyperlinks, and lists. A prerequisite for this is to ensure that the pages’ content structure is represented accurately in the underlying HTML.
  • Allow content to display in orientation preferred by user. People who have their devices mounted in a specific orientation need applications to always work in that orientation. Users who can rotate their device may prefer one orientation to another and should have that choice. Build applications that respond to the orientation of the device. Only force a specific orientation when it is necessary for a particular feature; i.e., banking applications that need landscape orientation to take a clear picture of a check in its natural alignment.

 

Testing

  • Use native browser functionality (or a browser extension) to increase the browser’s text size to 150%. Is all text on the page still readable without the need for users to scroll horizontally?
  • Apply a user-defined style sheet that changes the appearance of heading, paragraph, and link text, including additional space between letters, words, lines or paragraphs. Are the changes in the user-defined style sheet applied as you had expected? Does the text still reflow as expected?
  • Check for images of text. Does the visual appearance of the text require them to be an image rather than HTML and CSS?
  • Check content display. Does the content respond to the orientation of the device?

More Information

Related Techniques

✎ Technique: Orientation

Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential (i.e., bank check). 

✎ Technique: Text spacing

People with a variety of print disabilities (including low vision, dyslexia, other cognitive disabilities) can benefit from being able to increase the spacing between lines, words, and/or letters on their own device.

✎ Technique: Readable paragraph text

Paragraphs of text are a fundamental core of web content. It's important to display them in a fashion that is optimally readable to the majority of your audience.

✎ Technique: Text and images of text

When text is presented as an image of text, that limits peoples' ability to change the appearance of that text. So wherever possible, use text along with CSS to apply styling.

✎ Technique: Using color to convey information

Color is a powerful visual means of presenting or distinguishing information, but when you use color to identify or distinguish information, make sure that this information is still available to people who can't perceive color.

✎ Technique: Required fields

A clear indication that specific form fields are required can save users time and avoid potential errors relating to missing data when a form is submitted.

✎ Technique: Enable text resizing

There are a number of ways to zoom web-page content in to enlarge text without needing to provide explicit controls to do so. To avoid diminishing this variety of user control, you have to be careful how you code font sizes.