Text alternatives - some examples
When writing text alternatives for images you need to consider the role of the image and the context in which it is used.
Consider the image role and context
Before you can write a text alternative you need to consider:
- Role: What are you using the image for? What is it meant to do, say or mean?
- Context: What else is on this page that might affect how you should provide a text alternative for the image?
The same image may require a different text alternative when it plays a different role or is used in a different context.
Some examples
These examples focus on the types of images that web writers (rather than designers or developers) use.
| Role of image | Examples and context | Text alternatives |
|---|---|---|
| Decorative effect—to make a page look more attractive | Stock photos, photos from your image library, decorative graphics | Leave blank |
| Shows the person mentioned in the content of the page | Photo of the new company director in an article about her appointment. No other people are mentioned in the content. Photo of a staff member in their staff directory entry |
Leave blank or include the person's name Doing the latter will let users know there's a photo on the page, help with search engine optimisation, and help those browsing with images turned off |
| Photo of a person receiving a bravery award from two government officials | Use a text caption so you can identify the award recipient and, if necessary, the officials. Visible captions are better for this purpose because everyone needs the identifying information Don't repeat the caption as the text alternative. Use a short ALT—something that works with the text caption without being overly wordy. Try alt="Photo of" or alt="Bravery award" |
|
| Illustrates an event or issue mentioned in a news article | Generic photo of a flooded residential street in an article about the rising cost of flood insurance | Leave blank |
| Photo of a well-known street showing the height to which flood waters rose. Appears in an article about recent floods | Use a text caption to identify the street shown and any useful information contained in the image. Don't repeat the caption as the text alternative Use a short ALT for the photo—something that works with the text caption without being overly wordy. Try alt="Photo of" or alt="Name of street" |
|
| Shows the product described on a product page | Photo of a CD cover on a page providing information (artist, tracks, genre and so on), about the CD | Assuming the product is fully described in the text leave blank, or provide a very short text alternative (such as alt="Cover of name of CD") |
| An advertisement or notice for an event, promotion, sale | Photo of an orchestra that includes text that advertises the name, date and location of the orchestra’s next event. The advertising text in the image is not provided elsewhere in the content | Use the text that appears on the image as the ALT text |
| Photo of an island holiday destination that includes text showing the starting price for airfares. Fare information is included in the accompanying text on the page | Leave blank, unless there is extra information in the image that is not on the page | |
| A photograph of a work of art | Within a photo gallery or as an example of work from an exhibition that is being advertised | Provide the title, artist's name, medium and date in a caption below the image. Don't repeat the caption as the text alternative Use a short ALT for the photo—something that works with the text caption without being overly wordy. Try alt="Photo of" or alt="Title of the work" |
| Acts as a link to another page or site | Thumbnail photo, icon, logo of a program sponsor or partner | Write the text alternative as though you are writing a link. Clearly identify the linked page Don't include 'link to' as part of the ALT as screen readers will announce the image as a link |
| Provide a visual representation of information or data | Organisational chart, flow diagram, pie chart, bar or line graph, map | Write a very short text alternative to label the graphic and refer to the location of the full text version (such as alt="Organisational chart, link to text version below"). Then provide a full text alternative on either:
|
| A 'help' page with a screenshot of an interface along with fully explained text instructions | Write a very short text alternative to identify the image (such as alt="Metadata entry screen") |
Write better text alternatives
Improve your website's accessibility and SEO. Join our course - learn how to write useful text alternatives for images.
Book a course at https://4syllables.com.au/