Emphasize and mark up text semantically
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 and Tips
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.
Examples/Patterns
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
| Instead of | Use |
|---|---|
<b> |
<strong> |
<i> |
<em> |
<u> |
|
<s> |
|
| 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.