It is important that you learn how to add alt text to an image on your webpage. Adding alt text to an image is standard practice for optimising your page’s search engine results performance on Google, but it is also vital for partially sighted or blind users who rely on screen readers to describe a webpage to them.
Alternative text (alt text) is the text given to an image to describe its contents. It is invisible to people who can see the image on a page but revealed to partially-sighted or blind users using screen readers.
Deciding whether images need alt text
All images on your page serve some sort of purpose. They generally fall under three categories:
-
Simple descriptive (related to the text, with simple information)
-
Complex descriptive (an image which includes text, such as screenshots or graphs)
-
Decorative (purely for decoration, images that do not refer to the text on a page in any way)
Descriptive images (both simple and complex) require alt text and decorative images do not. If in doubt as to whether an image is descriptive or decorative, it is probably best to treat the image as being descriptive and add an alt tag.
1. Adding alt text to simple descriptive images
Simple descriptive images (mostly photographs) convey simple information and must be described using alt text. The alt text you add should clearly describe the image in question so that people who cannot see the image are not at a disadvantage. For example, an image of four carrots on a table should read something like 'four carrots on a table' rather than just 'carrots'. Both are fine, but the former concisely defines the image and allows those who cannot see the image to understand its contents. You do not need to ever specify 'image of...' or 'picture of...'.
Adding alt text to images
You first need to upload an image into Contensis. Alt text needs to be added to images within the webpage they sit. This is because alt text is context dependant. For example, the same image in a recruitment page may have a different purpose or meaning in a page about research. You can edit an image's alt text on a page in Contensis by right-clicking on the image and selecting 'Image Properties'. This will change the alt text for that image only on that specific page, even if the image is used elsewhere.
2. Adding alt text to complex descriptive images
Complex descriptive images (mostly screenshots or graphs) convey textual information and must be described using alt text. Images such as infographics that include text should be avoided unless the text on the image can be clearly described above the image and an alt tag can concisely describe the text. If you are using screenshots on your page, clearly label them with detailed alt text and start the alt text with 'screenshot of...'. For example, the alt text for the first screenshot on the page reads 'Screenshot of an editor clicking 'view additional information' on a new image on Contensis’.
3. Blank alt text for decorative images
If your existing image is purely decorative, the alt text should be left blank. On our website there are only very specific circumstances where images can be truly justified as decorative. One example is in promo rows where your link text is sufficiently descriptive enough.
It is much better to add alt text than leave it blank so best practice is to add alt text to any image within a page.