Skip to content Skip to footer

Alt tags- Why context is everything

Article Content
  • Why you need to consider the context of an image to write a useful alt tag.
  • How to write a alt tag for complex images, graphs and charts.
  • How to write alt tags for fuctional images and images of text.
  • Why you might need a empty alt tag for a decorative image.

Alt tags are crucially important for accessibility. If you’ve read the first article on alt tags, you will know the importance of getting the description right for users who cannot see the images uploaded on a website. ( read the alt tag basics article here ) However, you’ll quickly find that getting an alt-tag description right is not always easy. There is a huge variety of different styles of images that can be included on the website, and the image’s context is fundamental to getting an alt tag which is accurate and useful for the user. The best way of approaching this is to categorise the type of image that you are writing the alt tag for, and once you’ve done this, you can then make an informed decision on how the alt tag should be written. Below you will find a description of the different styles of images you are likely to be dealing with and the subsequent approach you should take to writing an alt tag.

A complex or visually rich image

A visually rich image has a lot of visual information that needs to be conveyed to the user. This could be a complex artwork, a photograph with a lot going on in the scene, or anything that cannot be simply described. It is best to try to boil down what is important to convey to the user in these situations. For example, if you were describing a painting of Van Gogh’s ‘Starry Night’, it would obviously be important to describe the sky in detail, you might want to spend less time describing the village below.

Van Gogh's famous impressionist painting Starry Night
Van Goghs beautiful painting, of a Starry Night over a small village, is difficult to describe. See how I did later in the article.

However, you may often find an alt tag insufficient with these images. This is because it is recommended that alt tags are kept relatively short. Joshue O’Connor recommends a maximum of 100 characters. Others argue slightly more around 150, this used to be because of the technical restraints of how much a screen reader could read out, but these limitations have been found to be eliminated in modern screen readers. However, it is still a useful barometer to ensure your alt-tag descriptions are not becoming too long and difficult to understand. (read about the length of alt tags in this CSS tricks article here )

The solution to this problem is to split up your description of your image into different parts, this will help screen reader users understand the full context of the image without becoming confused or overwhelmed. Adding a figure is one method of adding further context to your initial description of the image in your alt tag. You achieve this by wrapping the image in a figure tag and writing your further description in a “fig caption” HTML tag. You can see how it is coded below. (You can find another figure coding example in this MDN web docs article here)

screenshot of code for fig caption
Figure element with opening and closing tags. Inside is image tags with an alt tag, and the opening closing tags of a fig caption tag.

Going back to our example of Van Gogh’s painting, you could have an alt tag which describes how the picture is “Van Gogh’s famous impressionist painting Starry Night” and then a fig caption which goes into more detail on the picture itself. For example, the caption could be something along the lines of-

“Van Gogh’s painting of the night sky reflects many of the techniques of Impressionist paintings, the dark blue sky depicted in swirling brushstrokes mixed with the dark yellow of the stars. Below this is a small village with the cathedral covered in shadow.”

Other methods of doing this include having a longer description in an HTML paragraph linked to “aria-describedby” by using the same ID for both. This would explicitly link the description to the image for screen reader users. (Read more about this method in this W3C article)

However, I think the fig caption is the best method to start with. This is because it works effectively and is easy to remember because figures and captions are so commonly used outside of web development (textbooks, magazines, newspapers, etc.) This is not to say you can’t use the other methods, there may be some circumstances where they are more appropriate. (Although none immediately come to mind). Fig Caption will work well in the majority of cases, so why complicate things if you don’t need to?

Graphs and charts

Graphics and charts follow a similar process of logic to that of visually rich images. You can use an alt tag as a brief descriptive label and then the figure element for more detail on the information in the graph. You can also use aria describedby, but again, my advice would be to try using a figure caption first.

To improve your ability to write figure captions, look at websites which have to present a lot of graphs and charts as an example of how best to do this. For example, see below the captions from a recent graph from the Guardian. ( Access the source of the Guardian graph here) For another example of graph labelling read this article from W3C here or follow some great examples from Joshue O Connor’s book, read a summary of O Connor’s book here.

House Price Graph from the Guardian
An example of how you could label a graph, from The Guardian, which labels this graph average UK price per thousand. You could combine the heading above with the content below into one caption to simplify it.

An image of text

A website may have an image file of text, usually as a workaround if it’s a font that is unlikely to be installed on the user’s computer (it’s generally not good practice to do this)

If this is the case, the alt text must simply repeat the text of the picture. The alt tag functions as a direct replacement for the text if the user cannot see the image. You can see an example from the W3C below. (access this W3C source here)

Your Access to the city in handwritten font.
Example of image of text from W3C, this would need an alt tag just repeating the text.

A functional image

If an image has a specific function, it is good practice to describe it rather than the image. An example of this would be a printer icon that prints the webpage when clicked. The alt tag would read print this page, rather than going into detail about how the printer icon looks. You can see this example from the W3C as shown below. (Access W3C source of the example here)

printer icon and html code for printing
After the printer icon. Code contains a tag with javascript print, image tag with print.png and alt tag equal to print this page.

This is once again a case of considering the priorities of the screen reader user. What the printer icon looks like is less relevant to them than what will happen when they click it. Another example would be if you had an image of a guitar and text saying, “Buy this guitar”. Rather than the top describing the guitar’s look in detail, it would be better practice to describe its function, the alt tag reading “buy this guitar” (example from Joshue O Connor, read a summary of his book here).

A decorative image

The final one can be difficult to get your head around, particularly if you had it drilled into you by now that you must have an alt tag. However, if an image is purely decorative, it has no function and no meaning beyond simply adding to the visual design, then you can leave the alt tag blank. It’s still good practice to have alt tag code formatting in your image tag, but you would write that the alt tag equals a quotation mark, nothing inside. You can see how you’d code this below,

code sample for empty alt tag
A opening image tag , src equal to semantically useless graphic and then a alt tag equals, quotes with nothing inside. Lastly the closing image tag.

An example of an image that might be purely decorative could be a fancy border, a page break or anything that has no real value beyond making your website look a little prettier, what Joshue O Connor describes as a ‘semantically useless graphic’. Evaluating whether an image is decorative is a case of whether this graphic contributes to the reader’s understanding of the text or is purely a visual bit of design. (You can find a link to buy Joshue O Connors book and a summary here)

Having an empty alt tag might seem to contradict everything you have learned so far about alt tags. Bear in mind that a screen reader user may encounter a lot of information on a page, which can be overwhelming.  If an image has no meaning and is superfluous, they may appreciate not having more information than they need.

If you are unsure whether an image is decorative. I would personally air on the side of caution and include a short alt tag. This is open to debate, but I feel the worst-case scenario here is the screen reader user thinks I didn’t need that information. I feel this annoyance is better than the potential larger irritation of the user feeling they have missed out on information that could have contributed to their understanding and enjoyment of the content.

Summary

Alt tags are important but difficult to get right. I recommend that you invest time in writing them and evaluating which of the categories covered in this article they fit within. Following this process will help you write alt tags that are efficient and helpful to your users, giving them the information they need to know to contextualise the image within the rest of the content.

Leave a Reply

Your email address will not be published. Required fields are marked *