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.

Site Navigation – One Type Does Not Fit All

What type of site navigation should your website have to make it easy for visitors to find the information they are looking for?

Most website creators have to think about how users will navigate their site. I say most and not all because if you have a very simple site that consists of just a single page, you really do not need navigation unless your page has multiple topics and requires the user to scroll to see them all. (Then you might want to use section headers and a Table of Contents to allow the user to quickly jump to the topic in which they are interested. More on headers at another time.)

Suppose that your website has only a few pages. Besides the home page, you might have an About Me/Contact Us page and two or three other pages. An example taken from my site has the following menu across the top of the page.

Example of a horizontal static menu.

This menu consists of only four topics. The selected topic is displayed as bold text while the others are regular text and more of a grey than a black font color. To go to one of the other pages, you need only click on the one you want to go to. In addition to pages on your site, a menu item can also link to another site. In my case, the My Old School Site is just a link to a site I supported in a previous life.

Usually, horizontal menus appear across the top of your website. However, they can also appear across the bottom of the page. The probably with putting it on the bottom of the page is that if the user must scroll to see the menu options, they may not even both and go to a different site instead.

It is also reasonable to create a menu that appears vertically on the left side of the page. (Left because we read left to right.) This orientation is useful when you have more links that can fit horizontally across the top of the page. You never want a horizontal menu to wrap around to a second line. One reason for this is related to the ADA concern that clickable links must have sufficient vertical space between them so that visitors with issues pointing and clicking their mouse are less likely to click the wrong link. If you have a lot of menu links or if the number of links can vary by the user or by the user’s action, placing them vertically along the left side of the page with plenty of space between each line is a common alternative. This menu method is used by Outlook, Google Mail, and many others to display your mail folders since you can add or remove folders at any time and you can have dozens of individual folders.

A typical vertical style menu.

Another way around a large horizontal menu is to have as the last button on the right an option to display more menu items. The three dots in a horizontal line shown below or three stacked horizontal lines (known as a hamburger button) show a typical vertically oriented dropdown menu box.

Use of a button on the right side of a horizontal menu to display additional menu items as a dropdown menu.

But what if you have a series of pages that are related to the main topic rather than being separate topics in themselves. In this case, a dropdown menu from an option in a horizontal menu like the one shown above can in theory support any number of items. However, as a practical standard, you do not want the dropdown to have so many items that the user would have to scroll vertically to see all of them. Because they won’t.

For a vertical menu, an indented submenu is a common way to expand the menu with subtopics such as the one shown on Microsoft’s Start Menu. This image shows what happens when the Windows System folder is clicked to show the programs found within it. The same technique could be applied to web pages related to a common topic.

Example of expanding a vertical menu with indented submenu items.

Another way to display a submenu is through the use of a ‘flyout’ menu. In the example below, the dropdown for the horizontal menu item, Academics, first lists various academic areas for a school. Next, the Performing Arts menu item from the dropdown has a fly-out menu that includes Band, Chorus, Orchestra, and Theatre. Similarly, the Band menu item has a fly-out for different band groups that are supported. Note that each menu item that has additional menu selections in a fly-out is indicated by a right-pointing arrow to hint to the user that there are more options.

Example of fly-out menus beginning with Performing Arts with the Academics dropdown menu.

Some sites have a large number of different topics and while a menu structure could serve to display links to each of the topics, sometimes a sitemap on a separate webpage with all of the topics listed is a better alternative. In the example shown below, a site map shows all the departments within an organization as links. The site visitor can then click on the department page to get redirected to the top page of that department. That does not mean that the department only has a single page. Indeed, it may have its own menu of individual pages and subtopics using any of the above navigation methods including this one. The point is that you do not want to display these subtopics in a menu off the website’s main page because the sheer number of subtopics across all departments would be too much information for most users to easily navigate. Therefore, the Home page of the site may have a single link for Departments which shows links to this page displaying the sitemap from which the user can select the department they need to visit.

Example of a sitemap or a mega-menu.

Rather than use a separate page for a site map, this same basic structure can also appear as a drop-down menu. But since the dropdown has more than one column, it is often referred to as a mega-menu.

The use of an individual image sometimes referred to as an icon image, can also serve as a menu provided the image has a properly defined title and alt properties to help the visually impaired. It is also possible to use an image with hotspots that the user can click on to navigate to different parts of the website. Sometimes that image uses graphics that the user might readily identify with an action or perhaps one or more words of text. In either case, the problem with this type of menu is that it is probably not ADA compliant because a blind user would not easily know where to click on the image or perhaps that they even must. To make the menu ADA compliant, you might need a secondary menu like one of the above structures to help blind visitors to your site navigate around. Also, if you do use text on an image, the font color of that text must contrast with the background color according to the ADA rules of color contrast which are:

  • Text and images of text that is at least 14 points and bold or at least 18 points must have a color contrast ratio between the text color and the background of at least 3:1.
  • All other text and images of text must have a contrast ratio of at least 4.5:1.

See:    Must Text Color Contrast with the Background of an Image? – NUEWeb

The Wonderful World of Color – NUEWeb