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.

I’m Not Just Making This Up…Really!

I have been talking about ADA Compliance rule on this site but some of you may be wondering where those rules are specifically written or if I am just making them up. While the ADA (Americans with Disabilities Act) started as a set of general nondiscrimination requirements for employers, it has expanded over the years to impact website design to ensure that all people can fully interact with your website.

Even today, much of the content you find in print, video and websites is not fully accessible to all people. The difficulty for those of us who may be “fully able” is that it is not always easy to put ourselves in the place of someone with a disability and to understand what we must do to make our content fully accessible. While there are many types of disabilities, the ones that most affect websites include: cognition, hearing, mobility, and vision. Each of these areas has its own rules and guidelines that are included in the WCAG (Web Content Accessibility Guidelines).

You may also ask whether these rules apply to all websites. Strictly speaking ADA applies to sites that include:

    • Governmental websites (local, state & federal) (which broadly includes public schools)
    • E-commerce sites
    • Nonprofits
    • Business to Consumer websites

This may seem to cover everyone, but even if your site is only a business-to-business portal or even a corporate intranet for your employees, you should still consider ADA compliance for those sites. Why? Because according to the CDC, up to 25% of the population has one or more disability. Afterall, you want everyone to get the same message from your site. In general terms, this means you site must be:

    • Perceivable
    • Operable
    • Understandable
    • Robust

Think of meeting the expectations of these four areas as a goal. It is rare that a site completely meets the rules in all these areas. For that reason, many associate the task of making a site ADA compliant as a journey, not as a destination. Even if you get close to following all the rules as defined today, those rules could change tomorrow. However, like the Chinese proverb, “A journey of a thousand miles begins with a single step”, you journey toward compliance begins with a single rule. In other words, the solution is to have a plan moving forward to make your site increasingly compliant. For example, you could focus on one rule at a time and make sure your site completely meets that rule. Then move on to the next rule. Over time, your site will become increasingly compliant for all users. This method also avoids having to learn all the rules at once. It also avoids the confusion inherent when attempting to fix dozens or more issues on your web pages at once. For that reason, I will continue on this site to focus on one or two issues in each post and not cover all potential issues unless they are extremely closely related.

However, because some of you wanted to get a 10,000-foot view of the entire ADA landscape, I am going to list my ‘favorite’ ADA compliance sites here. For those of you who want a high-level view of where we are going and the ‘terrain’ we must cover I suggest reviewing the following sites:

Understanding WCAG 2.0Web Content Accessibility Guidelines (WCAG) 2.0

Web Content Accessibility Guidelines (WCAG) 2.1 – Extends the 2.0 release from December 2008

If you look at these sites, you will understand why I want to focus on one or two related rules at a time. There are dozens of rules and quite a lot of information in these sites. However, remember that the 2.1 version is an extension to the 2.0 version so that much of the information naturally appears in both documents. The fact that I show links to both the 2.0 which appeared in December of 2016 and the 2.1 version which appeared on June 5, 2018 clearly indicates that changes have happened in the past. Furthermore, it can also be assumed that there will be future versions. In fact, I have heard that another version may appear at any time. Some say that it is overdue.

You will also notice that the rules are defined by the four areas (or sections) mentioned above (Perceivable, Operable, Understandable, and Robust). Each rule in these sections is also labeled with a level indicator. The level indicator signifies the degree of compliance with Level A being the lowest and thus easiest level to achieve and Level AAA being the highest. However, for the website as a whole to be at a Level AA compliance, it must meet all of the Level A and Level AA guidelines, not just the Level AA guidelines. Levels are cumulative. Similarly, a Level AAA site must meet all Level A, Level AA, and Level AAA guidelines.

My suggestion is that if your website is not one of the websites that are required to be ADA compliant, that you should still aim for Level A compliance across the site with some areas possibly at a higher level. For example, an internal website, or intranet, should at least be Level A compliant. Similarly, for any public website, I recommend at least a Level AA compliance across the site with some areas striving to meet Level AAA guidelines.

In case you are interested, much of what I covered in several prior posts on color contrast falls under Section 1.4.3 Contrast (Minimum) Level AA. Information on Generic Link Text mentioned earlier in this series comes from the WCAG 2.0 Success Criterion 2.4.4 which is a Level A violation.

So stick with me and this blog site as I cover additional requirements. While I will focus on Level A and Level AA concerns, I may occasionally divert into some of the Level AAA rules. In any case, my primary focus will be to cover rules that you can easily check and correct one step at a time.

Must Text Color Contrast with the Background of an Image?

Text added to an image must also provide sufficient color contrast for those viewing your webpages visually.

In the last several posts, you have seen how color contrast of text on a webpage can be easily checked and corrected, but what if the text is part of a chart, image, or picture? I suppose this is just another one of those questions that can be answered with the phrase, “It depends.” By that I mean that it depends on whether the text in the image or chart is material to understanding the purpose of the image. Take the following image of a signpost with multiple signs pointing in different directions, each with a different curriculum area on it.

Signpost representing the many career paths available to a student

It should be obvious to you that some of the words cannot be read easily due to low color contrast. For example, the third sign from the top pointing left says, “MEDICAL”. White text on a yellow background has insufficient color contrast. Furthermore, this is not the only sign with text that may have low color contrast in this image. However, you might ask whether the words on the sign are pertinent to understanding the purpose of the image. This image represents the multiple paths a student can take upon enrolling in college. It does not matter what these paths are or even if all possible paths are represented. Rather, the image is symbolic of the many options available to a student. One might argue that in this case the words are not as important as the fact that each student can choose from many academic paths. In that case, the ability to read all the words may not be important.

On the other hand, suppose that a website had the following chart. The chart was created by someone with good color vision. They thought that having a variety of different color boxes would add interest to the chart. Unfortunately, the text for each color box uses a white font. In some boxes, such as the green ones, the first line is exceedingly difficult to read, even for someone with normal vision. The first text line in the blue and the orange boxes do not fare much better.

Using white text on multi-color boxes may not be readible

The point here is that if you have a graphics team that creates the images for your website, you may need to work with them to help them understand that color contrast concerns trump favorite colors, school colors, or even colors in a business logo. Sometimes, you can avoid this issue by displaying some text in a dark color on a light background and other text in a light color on a dark background as shown in the following figure.

Use different text colors to contrast with the background color, but be sure to check all combinations

Note here the use of black text on the yellow and orange boxes. If you were to open your color contrast testing software, you would also find that the white text on the lighter blue background in the center and lower right fail the color contrast test even for larger text. It may take a little work to get all the text in the image to contrast with the background, but the example below shows that it is possible to create an image that is much easier to read high good text contrast.

Example of a chart with text colors in different colored boxes that have good contrast ratios.

Finding text colors that work on different colored backgrounds is relatively easy. But what if you have text that overlays a photograph? The color contrast rule remains the same as for text on a solid background with the additional complication that the color contrast rule must be applied across the entire text. Just because the contrast may work for some letters, if it does not work for all of them, it is still a violation of the ADA color contrast rules. In the following example, the first text line uses black text against a blue sky which has some white clouds. In this case, black text provides sufficient contrast at every point in the entire line of text. However, the second line of text uses white text which obviously blends in with the clouds at several points in the line. While you might try to argue that you can still read enough of the text that your brain ‘fills-in’ any text that may disappear into the clouds. But that is not sufficient.

Text on a photograph must have sufficient contrast for each letter compared to the background

So how do you resolve the issue that the text color does not work for the entire text string? One way is to change the text color on a character-by-character basis to ensure adequate contrast as shown in the figure shown below. Where the image background is darker, white text appears and where the background gets lighter, the text color changes to black.

You could change the text color on a letter-by-letter basis to provide good color contrast

While this technique satisfies the letter of the ADA color contrast rule, the changing text colors can make it hard to read and probably should be avoided. So, what can you do then? The following image shows my preferred solution. Add a colored box in which to display the text. In this box, you can control the colors of both the text and background to meet the color contrast requirement. In this case, the background color of the box uses a darker shade of blue than the sky so that white text clearly stands out. Adding a very slight black shadow to the text enhances the contrast further.

Or you could place the text within a colored box on the image so you only have once background color to deal with

I could continue with many more examples of text on charts and images, but I hope that these examples provide a starting point for you to being looking at text on your images with an eye toward providing contrast here, not just in the pages text content. Remember, the goal is to ensure that everyone reading the web page can also read the text on the images.

Next time, I will continue talking about text on images, but will focus on the use of the alt property of the image. Alt text helps those visitors to your site who may use a screen reader to understand what the image is, its purpose, and any significant text on it.

Fixing Your Color Contrast – Part 2

Last time we saw how to adjust the colors of text (or background) to meet the color contrast requirements for ADA compliant websites. Using the tool mentioned in that post, we examined various methods to select other colors for text. But what if you really like the text color with which you started and what if the contrast ratio was really close to the compliance rules. (For text that is 14 pt bold (~19 pixel) or 18 pt (~24 pixel) or large we need a contrast ratio of 3:1 or better and a contrast ratio of 4.5:1 for all smaller text.)

You could tweak the RGB value of the starting color. Of course, you should test each candidate color to see if the resulting contrast of the text with the background meets the appropriate requirement. Or you could use a tool like that found on the website: https://contrast-finder.tanaguru.com.

This is a free tool that you do not even have to download to use. It lets you change either your foreground or background colors to tweak their RGB values to a color that meets the selected contrast ratio. Let’s assume that I start from a page that had the following horizontal menu that used blue text on a black background.

Menu with blue text on a black background only has a 3.9:1 contrast ratio

Using the Colour Contrast Analyser from my last post, I see that the blue text on this nearly black background does not have sufficient color contrast. In fact, it is only 3.9:1. However, I still want to use blue text so I question whether I can change the blue to a lighter tint that will provide a better contrast ratio. By opening the Tanaguru Contrast Finder I begin by specifying the initial foreground (1) and background (2) colors via the hex values of both colors. Note, however, that you also can specify these colors by using the decimal values of the RGB colors.

Tanaguru Contrast Finder lets you easily set the foreground and background color from which you are beginning.

Next, I can select the minimum color contrast ratio you want (3). Because this text is smaller, I select 4.5 as shown below. For larger text, the color contrast ratio need only be 3:1. For level AAA, you could aim for a more restrictive 7:1 contrast ratio. I can also select whether I want to vary the foreground (text) color or the background color (4). Next, I can specify whether I want valid colors that are very close to the initial color or whether I might like to see a range of valid colors(5) because some other colors may actually look better. Finally, to have the tool find possible replacement colors, I click the Check and find contrast button (6)

You can then select the minimum contrast ratio, which color to vary, and whether you want to stay in the same color family or whether you would consider other colors.

The area labeled Old contrast(7) shows the original colors along with a sample of what the text looks like with those colors. It also calculates the color contrast ratio with five significant decimal places. Beneath that are possible replacements, New contrast(8), for the text color (since I specified text colors close to the original color). It also shows the detailed values for the text and background color as well as a sample for each combination of colors. Even if they look similar, the actual RGB values displayed in the leftmost column show that these really are different variations of blue. At the same time, the ratio column shows a calculated ratio of 4.5 or greater for each color combination.

The number of possible replacements varies based on the initial colors selected. Looking at the variations of blue text on a nearly black background, the text should appear more readable with the new color variations compared to the original blue text. However, I may still not be completely satisfied with the results. One option may be to change the background color. Another might be to set the Gimme (5) selection to a range of colors rather than colors close to the original. After clicking the Check and find contrast button again, the page refreshes with the following color combinations.

When you allow for any color, the actual ratios of the selected colors may greatly exceed the minimum you need.

As shown, many of these color combinations result in a contrast ratio significantly greater than the minimum of 4.5:1. Thus, I could select any of these new colors and meet the basic contrast ratio for normal vision people. However, the one negative aspect of this tool is that it does not calculate the contrast ratio as seen by the average color blind person with any of the three most common types of color blindness. It is for that reason, that I usually combine the use of the Tanaguru contrast analyzer with the Colour Contrast Analyser so that I can also see the contrast ratios for a color-blind person. As frequently happens, a good color contrast for normal vision people may still result in a poor color contrast for color blind people. Using the large color blocks (or the RGB or hex values of the colors), I can overlay the Colour Contrast Analyser on the Tanaguru page to see how well a color combination appears to each of the color-blind types.

Always check the colors you want to use not just for normal vision, but also for the three major color-blind vision types.

One other point that might be worth considering. While the Colour Contrast Analyser calculates the contrast ratio for each of the three main types of color blindness, the degree of color blindness can vary substantially. Therefore, while aiming for colors that meet the minimum color contrast ratio is a good starting point, you may want to target values that are at least 0.5 higher as in 5:1 and 3.5:1 rather than 4.5:1 and 3:1.

Next time, I will look at text within graphics.