Underlined text looks like a link

Why does it matter?

On the web, underlined text means "this is a link". Visitors click it and nothing happens, which is confusing for everyone and especially for people with cognitive impairments. The emphasis is only visual, too: screen readers do not announce an underline, so the word you meant to stress sounds like any other.

Who it affects: People with dyslexia and other reading difficulties, low-vision readers who enlarge text, and anyone reading on a small screen — justified, tiny or all-capital text and underlines that are not links all slow reading down.

What does Lumtera flag?

<u> elements, and elements with an underline set in an inline style (text-decoration or text-decoration-line), that are not links, buttons or abbreviations and are not inside a link. The text must be outside any link to count, and when underlined elements are nested, only the outermost one is reported.

Check ID text-underline-not-link — use it to filter the content report or with wp lumtera issues --rule.

How do I fix it in WordPress?

Remove the underline (select the text and turn off Underline in the toolbar, or reset Typography > Decoration). To stress a word, use bold or italics instead, which are also announced as emphasis. Keep underlines for links, so visitors can tell what they can click.

Example

<p>Orders placed after 2 pm ship <u>the next working day</u>.</p>

<p>Orders placed after 2 pm ship <strong>the next working day</strong>.</p>

How do I check the fix?

1. Update the post. The issue disappears from the Lumtera Accessibility sidebar on the next check, and from the site report on the next scan.
2. Read the passage at 200% zoom on a phone-sized window. Text should be left-aligned, comfortably large, mostly in sentence case, and only links should be underlined.