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.)

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?

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.

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:

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.”

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.

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.

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.