Icons and linked images
Overview
Icons and linked images may need descriptive alt text.
To learn how to set alt text, see our advice on images.
Icons
Alt text should be left blank on purely decorative icons. That includes icons that add no more information than is available in the surrounding text (eg a warning icon next to a header that states 'Warning').
Where icons are there to convey meaning, they should include alt text that describes the detail/quality the item communicates (eg ‘Four-star rating out of five’ for a rating display of four gold and one grey star).
Linked images
Image used as a link
Alt text should convey the action that clicking or selecting the image performs or allows when the image, logo, or icon is used on its own as a link.
For example, the use of alt text of ‘Print’ on a printer icon that opens a print menu.
Image link with a text link
Descriptive link text should mean there’s no need for alt text on the rare occasion an image is placed inside a text link.
For example, it's more accessible to combine the following into one link than have them next to each other:
- A Twitter icon that links to the University of Leeds Twitter page.
- A text link that reads 'University of Leeds Twitter' and also links to the Twitter page.
Two links pointing to the same place next to each other would be unnecessarily complex for people using screen readers, for example.
Instead, they should be combined into one link.
However, when that happens, it's more accessible to leave the alt text of the Twitter icon empty because the link text already describes the icon. There's no need for descriptive alt text and descriptive link text in the same link.
The following example is incorrect as the icon and text use separate links that go to the same place:
This example is correct. The icon and text are now part of the same link and the icon now has no alt text as the link text is describing it:
