Accessible emphasis: using italics instead of underlines

Italics instead of underlines on the web in for your publications

On the web, underlined text is used almost exclusively for links. Book or other publication titles that are normally underlined in print materials are instead done in italics.

Chicago Manual of Style, 16th Edition (2010) says (8.166) that when quoted in text or listed in a bib­li­og­ra­phy, titles of books, jour­nals, plays, and other free­stand­ing works are ital­i­cized and cap­i­tal­ized head­line style. 

So... turn off the underline and use italics instead and you'll be more accessible!

How a screenreader will read emphasis

For some reason, the makers of screen readers have decided not to announce some elements that users could benefit from, including:

Name	Description
<strong>	strong emphasis
<em>	emphasis
<q>	inline quotation
<pre>	preformatted text
<code>	computer code
<address>	contact info for the creators of a document
<time>	date and/or time

Since the elements above aren't read by screen readers you need a mix of visual and contextual indicators. Avoid using color alone to indicate required fields or the presence of errors.

Bad Example

This is the alert that needs to be understood.

Good Example

Using the word "Important" is a pretty good idea since asterisks aren't read consistently across screen readers. In the following example the Font Awesome <i> element includes aria-hidden="true".

 Important: This is the alert that needs to be understood.