skip to content W3C SVG

12. Don't provide info only through text formatting

Don’t provide info only through text formatting

When text formatting (e.g. italic, underline, bold, font size) is used to provide information that goes beyond emphasis, also provide the information through an additional method.

Rationale

Media content will be transformed into:

  • Spoken words
  • Braille
  • Large text
  • Custom color schemes
  • Custom layouts

Text formatting can be lost in the transformation.

Even when the information about text formatting is not entirely lost, it can become less noticeable or time-consuming to access. For example, when screen readers recognize a particular type of text-formatting, they handle it in one of two ways:

  1. Provide the information only if the screen reader user requests information on the formatting of the particular word
  2. Read it differently (e.g. louder, slower, different pitch) than surrounding text

The former (1) makes finding particular words that have special formatting very time-consuming.

The latter (2) is rare in screen readers today, even for semantic formatting such as HTML’s <strong> and <em> tags.

Features that convey which text is emphasized are the responsibility of the assistive technology (e.g. screen reader, custom style sheet). Content developers cannot effectively add text that indicates which text is emphasized. This would make the experience worse for all users, including screen reader users. When formatting provides emphasis, content developers should simply use formatting that allows assistive technologies to provide the information as appropriate for their users (see Pearson Guideline 1).

However, if we extend the purpose of text formatting, using it to provide more information than simple emphasis, it is our responsibility to also provide the information through another method. For example, a paragraph of text might be followed by the instructions, “Explain the significance of the three bold words in the paragraph.” In this case, we need to list the three words and, if the paragraph is very long, provide links back to the words in paragraph. This way, students who are using screen readers or custom formatting will be able to find the three words.

Techniques

Discussing/Identifying Particular Words and Phrases

If text formatting is used to identify particular words or phrases (beyond just emphasizing the words or phrases) provide another way to find the words or phrases, such as:

  • Quoting the text or the word. For example, “Select the best definition for the word ‘like’ as it is used in the paragraph.”
  • Providing a link to the text or the word.

Providing Data

If text formatting is used to provide data, also provide the data in another way, such as:

  • Including the information as text. For example, if required lessons are in bold and optional lessons are in regular text, you could mark each required lesson with the word “required”, or you could make each optional lesson with the word “optional”. Another option is to mark one type of lesson with an * and then define the meaning of the * somewhere obvious on the page.
  • Using reading order to make it easy to see relationships. For example, if the size of the name of a town is used to show the relative size of the area’s population, include the population as text and also make sure the reading order (See Pearson Guideline 4) is lowest to highest or highest to lowest. This way, just as a sighted user might skim the names and read largest to smallest based on text size, a blind screen reader user can do the same rather than having to read each town name and remember the numbers.

Marking up Text

If text formatting is used to illustrate the state of particular text, also provide this information in another way, such as:

  • Use hidden text for screen reader users, so that some short phrase appears before and after the text. For example, if text has been highlighted by the instructor, hidden text can be added: “begin instructor highlight” and “end instructor highlight”. See code clips for how to do this with CSS.
  • Provide an additional view of the information. For example, if various differences in text are used to show three different revisions of a paragraph, many users will benefit from the ability to also read each version side-by-side in a table, divided into rows so as to highlight the changes.

Testing

Testing technique Description
Review Skim the page looking for any cases where text formatting is relied on for more than emphasis. An example of this issue would be if a quiz question asked: “What is the significance of the italic text in the following paragraph?” If there is not a second way to locate the text in this type of situation, that is an error.

Related Guidelines

508 Web § 1194.22 (d)

Documents shall be organized so they are readable without requiring an associated style sheet.

WCAG 2.0 – Level A - 1.3.1 Info and Relationships:

Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)