Emphasize and mark up text semantically

Applicable Role(s): Content Creator

Overview

Text that needs emphasis or special formatting should be done in the semantic way, especially if the formatting contains meaning. This includes bolding, italicizing, and insertions or deletions.

Best Practices

Don't rely solely on text formatting to convey meaning

Formatting like bold or italic does not get semantically conveyed, so some users may not pick up that there is additional meaning.

Avoid using underline for emphasis

Underlines are typically reserved for identifying links within text. It can be confusing to think something is clickable when it's really not. Use bolding or italics instead for visual emphasis.

Formatting code blocks

Code blocks should be styled different than regular text.

Pattern Examples

Basic semantic fonts

Bolded text, using <strong> tag

Italicized text using <em> tag

Example code using <code> tag

First line in block using <pre> tag
Second line in block using <pre> tag
Third line in block using <pre> tag

This text shows it's deleted by <del>

This text is here, but this part is now inserted using <ins>

HTML style and semantic tags
Instead of Use
<b> <strong>
<i> <em>
<u>

<em> or <strong> instead — don't
underline for emphasis

<s>

<del>

N/A <ins> to indicate insertion,
along with text-based notice
N/A <code> for inline code
N/A <pre> for blocks of code
<font>

Any other tag

Note:  while tags like <b> or <i> are valid tags and have visual styles, the key is to use semantic markup if the markup conveys more importance or weight.

Example: Change in content

Inaccessible Pattern

Walk In Hours: 8AM to 5PM

Visually someone can tell that the office hours are no longer valid, but because strikethroughs are not semantically conveyed, someone using assistive technology might still think walk-in hours are still available.

Accessible Pattern

Closed Until Further Notice

We are working remotely at this time. 

To contact us:

...

This announcement works because it draws the user to the information, but doesn't rely solely on visual indicators to describe changes. The fact that the office is working remotely is semantically conveyed through text.