Did an “Underlined Text” warning appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read on below for an explanation of this warning, how it impacts your website’s accessibility, and how to fix it.
About the Underlined Text Warning
What is underlined text?
Underlined text is text on a web page, whether a heading or part of the body text, that has an underline attribute (either a <u> HTML tag or CSS text-decoration: underline;).
What does the Underlined Text warning mean?
This warning occurs when the underlined text element has been found on one or more of the pages on your website.
How does Accessibility Checker test for underlined text?
While auditing your page or post content, Accessibility Checker will review all of the text on the page, looking for any text that is contained in a <u> tag. If the underlined text attribute (<u>) is found, a warning will be flagged.
Impact on Accessibility
Why is it important to avoid underlined text?
Often, underlined text has been placed on the page because the writer is trying to show emphasis or importance, however, this can be confusing to users because, the default styling for links in all browsers is that they are underlined. Thus, in an online environment, underlined text is generally used to indicate linked text.
Adding underlines to text that is not a link (because you want to emphasize it, for example) can confuse visitors to your website who expect anything with an underline to be a link. They may attempt to click on the text or may think that your website is broken. Reserving underlines for links rather than emphasis will help to ensure that your website behaves predictably for all users. This is useful for people of all abilities but is especially helpful for older or less web-savvy users, and people with cognitive disabilities.
Additionally, there have been studies done on how underlines impact readability both for average people and also for those with reading disabilities like dyslexia. Underlines, unless styled in a certain way, disrupt letters that extend below the baseline (letters such as p, q, y, and g) which can make it harder for people to read your text, especially if long phrases or sentences are underlined.
Relevant WCAG 2.1 Success Criteria
3.2 Predictable
Make Web pages appear and operate in predictable ways.
How to Resolve an Underlined Text Warning
What to do (in short)
To fix underlined text, you will need to remove the <u> element from the text or CSS styles that are making it underlined. Try using other stylization, such as italics, colored text, or bolding to emphasize or differentiate between words or phrases.
How to find underlined text on your WordPress posts or pages
First, install the free Accessibility Checker WordPress plugin.
For any pages or posts that have an underlined text warning in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the warning to see a list of paragraph elements that caused the warning to be flagged.
Emphasizing text for visual users
Emphasizing content for visual users is usually pretty easy. There are a number of visual methods to choose from including bolded text, italicizing text, using text in a different color, and highlighted text. However, it’s important to remember that screen readers ignore many of these methods, making them useless for blind users. Not even the <em> or <strong> elements will be read appropriately by screen readers for emphasis or strong emphasis. Users with low vision or color blindness may not be able to see some of the text colors or background highlight colors. Users with low vision may also have trouble with italic text.
Non-visual methods for emphasizing content
- Write the word “Important” (or similar) before the content. This is by far the easiest solution, and it helps to emphasize the content for all users.
- Put the word “Important” in the alt text of an image. This accomplishes the same result as the first suggestion and gives you the opportunity to use some SEO-friendly images on the page.
- Include the importance in the
<title>, if appropriate. The<title>is the first thing that screen readers read, so it is a convenient place to put important content… but only do this if it is truly important. - Put the content in a heading, if appropriate. Screen readers tell the user there is a heading, and what level the heading is. But don’t abuse this technique. Use headings only if the text in the headings helps to create a logical outline of the page.
