Text Styles

This page focuses on options for text styling and how they affect people using screen readers.

A screen reader is a text-to-speech technology that reads the text on a web page aloud and provides keyboard options for page navigation. Screen readers are designed to recognize key HTML elements, such as headings, links, lists, tables, image alt text, math code, and most punctuation, which is why formatting those elements correctly is so important—those elements are what enable screen reader users to make sense of a page.

Many screen readers ignore CSS styles and most HTML tags related to visual styling by default, though with the right settings enabled they can recognize text formatting like bold and italics. CSS and HTML for visual styling are also very helpful for sighted people, so it is good practice to use visual styling well, following good web and editorial practices.

Text Spacing

Assistive technology is also unaffected by spacing and line breaks created by tags like <br> and <p> . However, spacing can sometimes create issues for people with learning disorders like dyslexia. Uneven spacing between words caused by justifying text or even consistently setting two spaces between sentences can create what is known as a river effect. This is when letters and words appear to be spread out and floating in white space, making it difficult for some readers to determine where one sentence ends and another begins. The easiest way to avoid this is by not justifying the text in documents and by using single spaces between words and sentences in documents and on webpages.

Built-In Text Style Options

In general, text styles are not announced by screen readers. Figure 1 shows where the built-in text style options can be found in the Simple Editor in Evolution. Table 1 addresses the built-in text styles and how a screen reader reads them.

Figure 1. Built-In Text Style Options
Style Example Purpose HTML code Use case/comments Read by a screen reader?
Table 1. Built-In Text Style Options
Bold text emphasis <strong> For new terms and for identifying a word or phrase that is link text on another part of the page or on a different page (e.g., "For the solution, select View Answer"). No
Italics text emphasis <em> For book titles, the names of publications (e.g., The Washington Post, New England Journal of Medicine), and emphasizing a particular word or phrase. No
Strikethrough text indicate deletion <s> Not recommended for use in most cases. No
Subscript textx math content and scientific notation <sub> A screen reader reads this as "text x" (for a screen reader to read this correctly, you need MathML). No
Superscript textx footnotes, math content, and scientific notation <sup> A screen reader reads this as "text x" (you can use symbol code for a squared number; otherwise, you need MathML). No
Block quote Text is indented on both sides indicate a long quote <blockquote> Visual styling for quoted material.

Yes: "Block quote text block quote end"

 

Text Style Options in the Styles Menu

The Styles menu provides a number of custom styles to choose from. These are context sensitive, so you will get different options for styling tables, images, and so on. Figure 2 shows where the Styles menu can be found and some of the options available. Tables 2–4 refer to styles for text: semantic markup, CSS styles, and styles for use with screen readers.

Figure 2. Text Style Options in the Styles Menu

Semantic Markup

The purpose and value of semantic markup is explained in WCLD 101. Table 2 simply illustrates that these styles are for visual design only and are not recognized by screen readers.

 

Style Example Purpose HTML code

 

Use case/comments

 Read by a screen reader?
Table 2. In-Line Style Options (Semantic Markup) in the Styles Menu
Inserted text text Adds an underline to indicate an insertion <ins> For use by editors. No
Underlined text text To underline text <u> Used in accounting, but should not be used to emphasize text because underlined text on the web indicates a link. Underlining text that is not a link may mislead or confuse readers. No
Deleted text text Adds a strikethrough and changes color to red to indicate a deletion <del> Used when a course is being edited. No
In-line quotation "text" Adds quotation marks to indicate an inline quotation <q>

 

 It is better to use the quotation marks on the keyboard or in the Special Characters menu (found by selecting the Insert Special Characters Ω button) because those are read by screen readers. No
Keyword phrase text To indicate a keyword <kbd> In our context, keywords are identified using bold text. No
Computer code text Applies a monospaced serif font to indicate computer code <code> Often used for documentation. No

In-Line CSS Styles

CSS styles and their use in Evolution are covered in WCLD 101. The purpose of Table 3 is to show you how screen readers interpret this content.

Style Example Purpose HTML code Use case/comments Read by a screen reader?
Table 3. In-Line Style Options (CSS) in the Styles Menu
Hanging indent

text text text text text text

 Indents all lines of a paragraph after the first line <p class="hangingindent"> Used primarily to format reference lists. No
Double underline text To add a double underline <u class="double-underline"> Used in financial documents where a double underline is standard formatting. No
Math 2 + 2 = 4 To give math content a different font <span class="eqstyle"/> Matches in-line math styles to MathML markup styles. MathML is preferred for math content. Math content may or may not read correctly with a screen reader, depending on the type of math content.
Markers and highlights text Used in editing <span style="background-color: Yellow;"> There are several color options used for various editorial purposes. No
Mobile only   Text appears only on smaller screens <span class="mobile-only"> For content that is useful only to those on mobile devices. Yes, but only when it appears visually.

 

Text Style Options for Use With Screen Readers

There are two styles specifically for use with screen readers as shown in Table 4. One allows you to provide content that is read by a screen reader but is not visible. Conversely, there might be visible text you want a screen reader to ignore. Please talk to an accessibility consultant if you are not sure about the use of these styles.

Style Example Purpose HTML code Use case/comments Read by a screen reader?
Table 4. Text Style Options for Screen Readers
Screen reader–only DIV
text
 For text that can be read by a screen reader but is not visible on the page. <div class="offScreen"> The style can be used with a table caption if you want to hide that visually. Yes
aria-hidden="true" text Text is visible but not read by a screen reader. <span aria-hidden="true"> This style can be used to hide the image caption for a decorative image or when you want the screen reader to skip certain text on the page and read a screen-reader friendly version of content instead.

 

 No

 

Updated May, 2023