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 https://nueweb.org 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

Confused by the alt, title and longdesc Attributes of Images?

Images have three different attributes that can be used to describe the image. Most of you probably know that the alt attribute found in the <img> tag is used by screen readers to assist the visually impaired and blind. But did you also know that alt text is the text that appears in place of the image if the user turns off graphics or if the user is using a screen reader as is the case for blind or visually impaired visitors to your site.

But before we get into the details, you must ask whether you always need alt text? Well, the answer to that question begins with another question of whether the image adds to the understanding of the content on the page. As an example, look at this image used to divide content sections on the page.


There should be no doubt that this image does not enhance the understanding of the content. Rather, it is a decorative feature used to divide sections of the content only. So, say that such decorative images can be eliminated by the proper use of text headers for each content section. I will cover headers at a later time.

Decorative images can even be a picture such as this one depicting elementary school children returning to school after a year of remote learning. Suppose we found this image on a page that provides back to school health guidelines for parents. In this case, the image does not enhance the understanding of the back-to-school health guidelines. In fact, it likely does not illustrate a single one of those guidelines. Therefore, it is simply decorative. Some content editors refer to decorative images such as this as ‘eye candy’ because for the vision enabled viewers of the page, it breaks up the text. Some say that this makes the page more inviting to read. (Imagine if I removed all images from my posts.)

Students race each other as they return to school after a year of remote learning.

If an image does not add additional understanding of the page’s content, would the site visitor have any less understanding after reading just the text content? Would a user who turned off graphics or was blind or visually impaired and could not see these images understand the rest of the page just as well as a person with normal vision? I would argue that in these cases, they would not miss a thing. Therefore, these images could be considered as decorative elements on their respective pages. Decorative images do not need alt text, but they do need the alt attribute. At first you might say, ‘Huh?’ But a decorative image must still include the alt attribute and it must be set to the null string as in the following: (not the word null)

alt=”” (good)

alt=null or alt=”null” (bad)

Would it be wrong to have alt text for this image such as:

alt=”Students race each other as they return to school after a year of remote learning.”

No, it would not be wrong. It just may not be necessary to the understanding of the rest of the page’s content.

Here is one last comment about decorative images. While the title attribute often has the same text as the alt attribute, it should not be included for decorative images. You should not set the title attribute to the null string as in:

title=””

Strictly speaking, the title attribute is what the page visitor sees when they hover over the image with their mouse. This text is used by many search engines to catalog the image. So, if an image provides no additional content to the text around it, there is no need for the search engines to catalog it.

Consider the following image with no text embedded in the image. First ask whether it supports other content on the page?

A middle school student races the Soap Box Derby car he built in the Engineering Magnet program.

If the rest of the page discusses the local Soap Box Derby, it might be appropriate to have the alt text:

alt=”A middle school student races the Soap Box Derby car he built in the Engineering Magnet program.”

Does it matter that the car is blue, or that the grass is green, or that they are on an athletic track, or that the student is wearing a helmet? Depending on the purpose of the story, the alt text shown above may be enough when combined with other content on the page to understand the purpose of the image.

On the other hand, suppose the top of the page has the following banner image which contains text.

New Student Registration

While the image itself may not add to the understanding of the content on the page, at a minimum, the text must be included in the alt attribute to help the visually impaired as in:

alt=”New Student Registration”

Note that the alt text must convey the same information as the text in the image. It is not necessary to say that it is the “New Student Registration Banner” or “Student Registration Image”. Adding words like “banner”, “logo”, “picture” or “image” is considered superfluous. Even the vision impaired already know this text is from an image.

Some images in the middle of the content have text that must be repeated in the alt attribute such as for the following image:

A blue T-shirt sold during COVID-19 that says: We’re all in this together

In this case, the alt text must describe the image as well as the text.

alt=”A blue T-shirt sold during COVID-19 that says: We’re all in this together”.

On the other hand, names on the sides of buildings, text in store windows, and other image text, if not pertinent to the content of the page do not have to be mentioned. The following image use alt text that simply states general information about the image such as:

alt=”Photo of Penn Street in Reading, PA in the early 1940s.”

Photo of Penn Street in Reading, PA in the early 1940s.

It is not always necessary to repeat the image text word for word as long as the meaning and intent remain the same such as in the following image which also serves as a link to more information.

Click image for parental information about remote learning

alt=”Click image for parental information about remote learning”

It is acceptable to convert the text to upper and lower case, and to define TLA (three-letter acronyms) as long as the converted text does not change the fundamental message of the image text.

What if the image and the text on the image do add substantially to the understanding of the page or even the purpose of the image? Then that information must be provided to the visually impaired in some way. If the image description is short or if the text is short, as we saw above, then the alt text can provide that additional information easily. But what if it is not short? While there is no physical limit on the length of alt text, it is recommended that alt text is kept short, 125 to 160 characters or less. Is that really sufficient to describe the image and the text on it? Look at the following image.

An example of an image that needs to use the longdesc attribute to point to a complete version of the text for a screen reader.

Repeating all this information in the alt attribute with only 125-160 characters or less is impossible. This is the intended purpose of the longdesc attribute.

However, contrary to popular belief, the longdesc attribute is NOT a place for directly entering longer text, perhaps paragraphs or more in which to explain the image or the text on it. Rather, the longdesc defines a link or URL where the visitor can get more information about the image and/or the text on the image. While the status of the longdesc attribute is not entirely clear under HTML5, the main point is that it is not a duplicate of the alt attribute text nor is it a more detailed explanation of the image even though longdesc sounds like ‘long description’. It is a reference to a bookmark on the same page or to a relative or absolute URL address of another page that describes the content and/or text in more detail.

In the above example, how do you use a reference on the same page where the text appears? We can identify the content section by adding an id attribute inside any one of the following content tags that precede the content:

<p id=”CovidVaccineComparisons”>

<h3 id=”CovidVaccineComparisons”>

<div id=”CovidVaccineComparisons”>

(Note: Each id value can only appear once on a page. Otherwise, how would a link know which location to branch to. Make sense?)

Then in the longdesc attribute of the image, we would include the following:

longdesc=”#CovidVaccineComparisons”

Note that the name assigned to the id attribute can contain only upper and lower case letters, no spaces, no numbers, and no special characters. When the id is referenced, it must begin with the ‘#’ sign to identify it as a bookmark name and not a page name.

It is also possible to reference another HTML page found at the same level as the page with the image. Suppose this page was given the name: “CovidVaccineComparisons.html” or “CovidVaccineComparisons.asp”. Then the longdesc attribute would be:

longdesc=”CovidVaccineComparisons.html”

Note the absence of the ‘#’ symbol, in this case, to identify the relative reference URL as another page on the same folder level as the current page.

You can also use relative URL references to traverse your folder structure, but that is a more advanced topic than what I wanted to cover here as we are already getting quite long.

It is even possible to reference a page using an absolute reference that might exist on an entirely different site such as:

longdesc=”https://myschoolsite.edu/StudentHealth/CovidVaccineComparisons.html&#8221;

Relative and absolute references are the preferred way to handle charts and graphs in which the longdesc attribute points to a ‘hidden from menu’ page that describes the data used to create the charts and graphs and perhaps even includes the actual data tables used by them. Obviously, information from a graph or chart would never fit within the character limits of the alt attribute.

Anyway, I hope you learned something here about how to use the alt, title, and longdesc attributes found in the <img> tag and to not use the longdesc attribute to directly insert additional text describing the image or text.

Images As Links and Alligators Too!

Images are also used as links and therefore must follow certain accessibility rules.

So far, our link discussions have focused on text links. However, another common way to implement links on a web page is with an image or photo. Sometimes the image simply looks like a button that the user might click like the one shown here.

Click image to open a web page with more ADA information.

Other times, the image might consist of anything from a corporate logo to a photograph which when clicked takes you to a page that tells you more about the photo or a related topic.

If the image contains text, such as this one, the text color contrast is also important. In a future post, I will cover color contrast in more detail. For now, I will just say that you should limit the text in images, and when you do include text, it must follow the same color contrast rules as ordinary content text and the text should be included in the alt text that screen readers access for the visually impaired.

In any case, using an image as a link is often as simple as adding the image to the page. Then with the image selected just as you would select content text to be used as the link text, insert a link. The actual method and keystrokes may vary depending on the text editing tool you are using, but the concept is essentially the same everywhere. The link wraps around the image. (Hint: If you are coding your page manually, it is easier to create the <a> link first. Then in place of the link text, place the <img> tag to reference the image you want to display.)

In addition, you need to know that while links only need a title attribute to describe their action, images have two attributes that must contain text, the title attribute and the alt attribute.

As with a text link, the title attribute consists of text that appears visually when the user hovers over the image. However, the alt attribute has an enhanced role.  It is used by search engines and screen readers for the visually impaired to describe the image.  In addition, when the image is used with a link, it must also describe what happens when you click on the image. You need to say where the link opens and what is being displayed. That is the fundamental difference from a text link.

Suppose the following image appeared on a webpage. Would you think that this was just a man holding a baby alligator? Would you know that the picture had a link that took the user to a separate page that explained more about baby alligators?

Man holding a live baby alligator.

Probably not. You may not even think to click on the image. Perhaps the title text should tell the user a bit more.  Suppose this photo included alt text telling the reader to click on the image to learn more about baby alligators in Florida.  You could duplicate the alt text as the title text so it would display visually helping even the visual visitors to your site.

Click here to display more information about baby alligators in a new frame.

(Yes, that is really me holding a live baby alligator compliments of the folks at Gatorland, Orlando, FL who had stopped by.)

The alternative would be to place text around the picture telling the user to click on it to see more information, but why not just put that in the title text?

Another type of image is one that contains multiple links. This image type is called an image map because you must map each area of the image to its own link information. The following corporate organization chart is one such image that might utilize an image map to provide more information to the user about each corporate position.

Click on the position to learn more about the person who holds that position.

Bio for President Mitch Healey Bio for Ms Andrea Jackson Bio for Ms Ann Li Bio for Mr. Johann Pleiski Bio for Ms. Scarlett Weir

For an image map, the <img> tag contains an attribute called: usemap. This attribute connects to a <map> tag that has one <area> tag for each separate clickable area. For the above image, there are five separate clickable areas, one for each position. The <area> tag contains attributes that define

    • the shape of the clickable area
    • the coordinates of that area
    • the URL that defines where the user will be taken when they click within the area
    • the title attribute
    • and alt attribute

You can even define a title and alt attribute for the overall image in the <img> tag that will apply if the user clicks or hovers outside of all the position boxes. While image maps can be created manually, it is best to use a tool to calculate the coordinates to build the <map> tag code block such as the one at Image Map Generator.

Remember that this organization chart is still an image made up of dots of color, and a blind person cannot read the labels on the individual blocks with a screen reader that only reads text created with text characters. Therefore, you must provide that information in the alt text of each area perhaps something like: ‘Open the Bio Page for the position of President held by Mitch Healey’. The title text might simply identify visually the box in the organization chart: ‘Bio for President Mitch Healey’.

My goal here is not to teach you how to create an image map. Many Internet references can do that including How To Create Multiple Links On A Single Image with Image Map. My point is that multiple links within an image map must have their own individual title and alt text strings just like individual images with links.

Before leaving today, I want to ask what is the difference between alt text and title text? When correctly implemented on the web platform, the alt text is used by search engines and for the visually impaired and should describe what the image is and where it takes the user when clicked. The title attribute appears when you hover over the hotspot of an image map or link. While the title text is not used by search engines or screen readers, it does help visual users to understand what you are trying to do.  For that reason, it is my opinion that it is not necessarily wrong to use similar alt and title text strings with images that have links if doing so makes your intent clearer to all site visitors.

See you later this week.

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”