Skip to main content

Underlined Text

Play Underlined Text Video

Video Transcript

Pay attention to this message! You know it’s important because it’s underlined. We often underline text to create a sense of urgency or importance. However, is the information important, a link, or nothing at all?

Underlined text on a page looks like a link so users may try to select it with no success. Underlined text is also not semantic meaning it really doesn’t tell the user anything. If they are listening to the page with a screen reader, there is no difference between plain text and underlined text. Since it looks like a link and doesn’t mean anything, underlining text often has the opposite effect of what you’re trying to accomplish.

Bottom line: Underlined text is not an effective way to emphasize important information.

So what can you do instead?

Headings are an effective way to outline your content, provide navigation points, draw attention to your page, and emphasize important details.

Consider this example

Example 1 with underlined text
Boise State values inclusiveness and full access to educational opportunities and benefits. For this reason the University incorporates standards for accessibility into information technologies used throughout the campus community, including the Boise State WordPress sites.

Since the underlined text isn’t semantic, it’s not read out any differently and the words inclusiveness, full access, and standards for accessibility look like they are links.

Compare this to another example

Example 2 with headings
Boise State Values Inclusiveness (heading) Boise State values inclusiveness and full access to educational opportunities and benefits.
Accessibility Standards (heading) For this reason the University incorporates standards for accessibility into information technologies used throughout the campus community, including the Boise State WordPress sites.

Instead of underlined text, the two sections contain headings that have semantic meaning and are announced as they are read. Headings look different from the other text so our eyes are drawn to them. They also sound different when read aloud so users know they are headings.

Here are two steps to put this concept into practice.

Step 1: Decide what’s important!

Review your information and decide what is the most important, or main sections of your content. This is the information you want to stand out to your readers and could be an action they need to take, a deadline, event information, a safety warning, or a process.

Step 2: Add a strong heading to the beginning of your important section

Once you know what’s important, add a strong heading to the beginning of your section to draw attention to the main point. For example submit request form, applications due Friday, conference details, important safety notice, or application process.

There you have it! Two steps to making your important information stand out by knowing what is important and adding it to your section heading. Now go make the web a better place, one heading at a time.

To learn even more about web accessibility visit us at Boise State Webguide, email OITAccessibility@boisestate.edu, or call us at (208) 426-5628.

checklist icon

Structure your content in a logical way

As you are organizing your content, remember to provide the information in a logical manner. Some types of organization to consider are alphabetical, chronological, order of importance, or steps in a process.

tag icon

Add appropriate style tags

You don’t want your text to just look like a heading. You need to tag it to be a heading.

On the web, you can add HTML tags with the visual editor. In documents, you can add tags using the styles menu.

structure icon

List headings in semantic order

Your content always with a heading 1 as your main page title, and continue with heading 2.  On the web, this is your page title. Once you reach heading level 3, you can go up or down a number. Never skip a heading level or use headings for decoration. 

Go even further

Additional Resources for Accessible Headings