Introduction to Alternative Text
Part of the requirements for the Web Content Accessibility Guidelines (WCAG) is alternative text, in some places called alternative attributes. This requirement comes under the Perceivable Principle that states that websites should be able to have their information and context conveyed to all users. Human users of alternative text include the visually impaired, either partial or total, users with a slow internet connection, and people who have a cognitive disability such as autism where certain images may be disturbing. Search engines such as Google and Bing and others use alternative text to determine what is in an image and its context to the rest of the website. Providing adequate and concise text allows for better search engine optimization (SEO) as is having a keyword in one of the images.
Determining when to use Alternative Text
Alternative text should be provided for each image used on the website. However, there are different types of images, which include decorative images and meaningful images. It is up to the web designer to determine the difference, however, if unsure or if there is a question as to which, the image is likely meaningful.
Decorative Images
Decorative images are those that do not convey meaningful content or context for the website. In other words these images, shapes, or colors can be taken away the essence of the website will still be there. The question to ask is whether the image can be removed without the site changing. This however, gets difficult if the particular item in question is needed to project the overall color scheme of the website or set the mood.
An example of a decorative image is a hero image that bears no meaning to the information within the site. If an image or shape is decorative, no alternative text will be used and screen readers will ignore the image in question. But wait a minute.
What about that Hero Image?
Asj yourself why did you pick the hero image? Is it because we have an outdoor travel site and wanted to show mountains or a beach? Do we have a cooking blog and are showing a kitchen or a chef making a dish for dinner? Do these images set the context or the feelings of the site? They probably do or we would not have picked them. This means they provide meaning and context for site. If unsure, there is no harm in added alternative text for the image.
Consider the image below (Figure 1), which I use as the hero image on my website for silphiumdesign.com. Out of context, it is just an image showing a flower that sort of looks like a sunflower. This is not far from the truth, as this plant, called a yellow-cup (Silphium perfoliatum), is in the Aster Family (Asteraceae) of plants, of which the sunflower (Helianthus spp.) is a part of. However, in my website, as you might surmise above, this image conveys meaning as it is a plant in the genus for which my firm is named (Silphium Design LLC). In this case, I use alternative text for the image, since in taking this image, it away would cause my website to lose a lot of meaning.
What about the Shape or Background and its Color?
Colored shapes are probably in the brand colors setting the mood and reminding users not only of your brand, but setting a particular feeling on the site. Cover blocks are another thing to think of. If you remove a shape that has a darker background when using white or light colored text, you may lose your color contrast. However, some shape backgrounds, such as the one below in Figure 2, if they do not have the brand colors would likely be considered a decorative image.
The above two examples show why it can be hard to have a truly decorative image situation. In cases where there is uncertainty, it is a judgment call, but it helps to put yourself in the shoes of a disabled person and determine how they would look at it or interpret it. If you decide to use alternative text, some example alternative text for figure 2 would be “Generic shape background with a blue horizontal rectangle, blue half-circles, white dots, and a black background.”
Meaningful or Informative Images, Diagrams, and Tables
Meaningful images relate to the content being provided and are needed in order to complete the story or information being conveyed. For these images, alternative text, which fully describes the image should be provided. Going from the examples in the decorative text, this would include most things on the website. The description should be enough for the user to develop an image in their mind rather than seeing the image. As far as length they should 125 characters or less. Remember, this is characters and not words.
Examples of Alternative Text for Blog Images
For example, lets say we are writing a blog post on a particular plant that is attractive to butterflies, say a milkweed. The caterpillars of monarch butterflies need milkweed in order to survive to adults and many other butterflies use the milkweed plants as a nectar source. For this post, we would have an image of a milkweed plant in flower, a monarch butterfly, a caterpillar, and another species of butterfly that nectars on it, perhaps a swallowtail. Below are the images and examples of alternative text that would be used.
The alternative text for this image (Figure 3) would be (alt= Pink flowers of common milkweed (Asclepias syriaca) surrounded by green leaves.)
The alternative text for this image (Figure 4) would be (alt= Goldenrod with monarch butterfly (Danaus plexippus) nectaring.).
The alternative text for this image (Figure 5) would be (alt= Green, yellow, and black striped monarch caterpillar on milkweed leaf.).
The alternative text for this image (Figure 6) would be (alt= Black and yellow eastern tiger swallowtail butterfly (Papilio glaucus) on milkweed plant.).
When writing the alternative text you to miminimize the use of capital letters since they confuse screen readers. Also you want to use different text for the caption than what is used for alternative text; again to reduce confusion for the reader. If you are stumped, just reverse the sentence as I have done in the examples above.
An Example of Alternative Text in the Header of the Site
Another example that is not often thought of is the logo. While the logo is exempt from the contrast requirements in WCAG, it is still the visual representation of your brand and is therefore meaningful text. Removing the logo would definitely alter the meaning and the context of the website.
Alternative Text for Diagrams and Tables
Graphics such as diagrams and charts should have alternative text describing what they show and if applicable the conclusions or findings. Tables should also have a brief description as to what is included in the table.
The Mechanics of Alternative Text
When producing alternative text there are some guidelines that should be followed.
- As stated above, alternative text descriptions should be 125 characters or less.
- The descriptions, if possible, should use lower case letters finished with a period like a sentence.
- They should also not be the same for each image or the same as the caption text. This avoids redundancy and confusion for users.
- For text images, write the text of the image as it is.
Examples of Code for Alternative Text
Code for an Image
When coding alternative text for an image it is best practice to try have the keyword within the text. However, do not stuff (use multiple times) the keyword. Be sure
to have an adequate description so the user can draw a mental image in their mind.
Example image code: <img src=”pink-flowers-swamp-milkweed-asclepias-incarnata.webp” alt=”swamp milkweed (Asclepias incarnata) with pink flowers at edge of forest.”>
Code for a Chart or Table
When coding alternative text for a chart or table it is best to include a summary of the information or findings depicted. Charts needing a longer description than 125
characters can use the “longdesc” attribute.
Example chart or table code: <img src”most-popular-butterfly-plants.png” alt=”table of butterfly plants showing milkweed as most popular.”>
Alternative Text is Written in Plain Text
Alternative text, as in written in HTML is as plain text. Descriptions should be considered with this mind as added features of bolding, underlining, or italics cannot be used. I have to work within this constraint a lot with my blog on pollinator gardens. The proper way to write the Latin names of the plants or insects is with italics such as (Asclepias purpurascens) or Asclepias purpurascens for purple milkweed. However, because alternative text is in plain text it has to be (Asclepias purpurascens) with no italics since there is no way to do this. You just have to work with it.
It is good to have details, but not too many details as to make it complicated. For example, do not use alternative text to start or convey an original thought not present in the body text of the page. This can confuse those readers using the alternative text and those not using or seeing the alternative text will not even see the thought being expressed.
Conclusion
Alternative text is a priceless amenity for those who need it to “view” and understand your webpage. Be sure you have it in your page and that you do it right in order to provide the best experience for users of your website.
Robert Coxe, Owner, Web Developer-Botanist
Silphium Design LLC
