Can I Get Your Attention?

How you emphasize text is important within your web content.

On a typical web page, what do you notice first? Probably the title of the page if it has one. Next, your eyes might be drawn to any images on the page. Finally, if you are still interested in the page, you might begin to look at the text, perhaps even reading the first paragraph or two to see if it is meaningful to you. Actually, most news sites know this and put the most sensational statements either as part of the title or within the first paragraph. They typically only clarify those statements and put them in context, if they do at all, further down in the article.

But what if your page does not have sensational statements and you just need to emphasize a sentence or even a few words. What is the most effective way to do that? Unfortunately, for many beginner web content creators, their first thought might be to underline the text that they feel is important. That, however, can be visually misleading. Why? Most web site visitors immediately assume that any underlined text represents a link to somewhere else in the document, another page, or even another site. You cannot assume that if your underlined text is a different color that the font color used by links on the page that the user will know that you are just emphasizing the text and not making it a link. For people with low color vision, they may not even notice the difference so why tempt fate? Just keep underlined text for links, not to emphasize a point.

If the text on the page is broken into topics with a header at the beginning of each topic, it is equally wrong to underline the header text for the same reasons as stated above. I will talk about headers in a future post. They can be very useful on pages with a large amount of text that can easily be divided into topics.

One way some web content creators emphasize text is to use a different font color without the underline. While that may be tempting, there is an ADA (Americans with Disabilities Act) guideline that states that color alone should never be used to emphasize text or imply meaning. This echoes again the concern for people with low color vision. For example, the following line may seem okay to most.

If you experience pain in your upper arms or chest, call 911 immediately.

First, the contrast between the font color of the last three words and the rest of the sentence may not be obvious to all readers of your site. The color contrast between the black text and the maroon text is only 2.6:1.

Preferred recommendations in this case combines the color with a change in the font style such as making the text bold or italic. You can also use a different font family and change the font size. Changing the font color to a shade that better contrasts with the rest of the text works as well. Examples of better ways to display the above line might be one of the following.

If you experience pain in your upper arms or chest, call 911 immediately.

If you experience pain in your upper arms or chest, call 911 immediately.

If you experience pain in your upper arms or chest, call 911 immediately.

Note that if you change the font color to emphasize text as in the last example above, the font color of the emphasize text must contrast with the rest of the text. In this example the contrast between the new shade of red and the black text is a healthy 4.8:1 and the contrast to the background is 4.3:1 but by increasing the font size to 14 pt. bold, this still surpasses the 3:1 color contrast requirement of ADA.

One word of warning when using a color, do not use a color that is the same or close to the color used for links within the text to prevent confusion. In no case should you underline text to emphasize it even if you change the font style or font size.

Another alternative for emphasis that can sometimes work is to reverse the color to emphasized text such as:

If you experience pain in your upper arms or chest, call 911 immediately.

If you experience pain in your upper arms or chest, call 911 immediately.

These two examples simply turn the text to white while using a black or maroon background color. Both options help the important text stand out from the rest of the page content.

In summary, emphasized text should be reserved for the most important information only. You might use more than one emphasis style if you have different levels of emphasis. However, within the same site, be consistent with the methods you use to emphasize important text. Do not use different emphasis styles on different pages. That would be as bad as using different font families, font styles, or font sizes on different pages. At all times, all pages within your site should look like they belong together.

Don’t Change the Way I Look

Link formatting should be consistent across your entire website and should be controlled from a master CSS file.

Links are usually displayed in a different color to help them stand out visually from the ordinary text on a web page. Usually, they also appear underlined. Why do both? The contrast between the link and ordinary text colors may seem clear to most people without vision issues, but for those with color blindness, the contrast may not be adequate. Therefore, the underline provides an additional visual clue to identify the text as a link. In addition, the link color may change depending on the state the link is in. There can be as many as four different colors, one for each link state as shown in the following table. Continue reading “Don’t Change the Way I Look”

Where Am I?

Plan your link destinations with the vision impaired in mind.

When you add a link to a page, you can control where the link’s content appears. By default, it replaces the content in the current tab/window that contains the link. In other words, you stay in the same place. However, the HTML <a>, or anchor tag, includes an attribute: target. This attribute allows you to open the new content in a different tab or a different window. It could even be a parent tab to the one in which the link appears. For most of us with no vision disabilities, that distinction may be obvious. However, for the vision impaired, especially the blind relying on a screen reader, jumping to another location could be a total mystery. The problem is this. If a vision-impaired person wants to return to the previous content after reading the new content, what do they do? Do they press the go-back arrow? That only works when the new content replaced the prior content. Do they click the close box in the upper right corner? That only works if you display the new content in a new window. What if the new content replaced a parent window/tab? Getting back to where they were can be frustrating. Continue reading “Where Am I?”

I Need More Space!

Adding space around your links helps those with physical disabilities that make using a mouse to click on screen items a challenge.

No, this is not a blog about Elon Musk or NASA. Rather, it is about how you position links on your webpage. One disability that is often forgotten when building web pages affects those with physical disabilities such as the difficulty in using a mouse to select and click on-screen items. When links appear too close together, the site visitor may accidentally click on the wrong item when they try to point and click on a link that is too close to other links. Continue reading “I Need More Space!”

Suspicious Text

Suspicious text refers to links that do not inform the user what the link is about.

Sure, there are plenty of good online software solutions to help you fix your web pages to make them ADA compliant. However, there is a lot you can do before spending a dime. Therefore, in this first set of blog posts, I will show you how to adjust a few of your habits to make improve the readability and ADA compliance of your web pages at no cost. Let us start by looking at links. Continue reading “Suspicious Text”