People who cannot see images must not be excluded. The above applies in particular if the image is important. An image may be an integral part of the content, support the content, or be used as a decoration. It is still allowed to use decorative images to make the content more engaging, except for scientific articles, where images always have a specific meaning. Provide a text description for important images. Illustration images are not separately explained to users who cannot see images. Still, users who cannot see the image must not be left with a feeling that they are missing out on something essential.
How a screen reader works
Watch a short YouTube video in English to see how a screen reader reacts to an image with no alternative text and what happens when an alternative text is added to the image:
Watch a video (in Finnish) published by the Celia Library, where University of Helsinki student Ronja Oja talks about using a screen reader:
The screen reader user can, for example, jump from one link to the next, listen to different level headings, or listen to the entire content of the page in one go. When there is an image, the screen reader reads its alternative text. If the alternative text is empty, the screen reader will skip the image as if it did not exist. Therefore, the attribute must not be omitted completely; it must be empty.
What does an empty alternative text (alt attribute) look like in the HTML code that defines the structure of a web page?
The content of a web page is provided in a markup language (HTML) describing the structure of the page. All images, including illustration images, must have an alternative description in the HTML code, but in the case of illustration images, the description must be left empty The below illustration image example is the accessibility icon that looks a bit like a matchstick figure version of the Vitruvian Man. The image has an empty alternative text or alt attribute, which means that the screen reader will not mention its existence.
Simply put, the image’s HTML code looks like this:
<img src=”accessibility.png” alt=”” />
(the name of the element is ‘img’ and it stands for image. The ‘src’ (source) part is an attribute and it indicates where and under what name the image file can be found. The alternative text to the image is added in the ‘alt’ attribute. If no description is required, the alt attribute is left blank. If you were to add a description to the image, it would be inside the alt attribute quotation marks.)
An image with text in it
Website images may contain text. If the text in the image is relevant, the alternative text must, of course, also convey its meaning. Remember that users with low vision cannot adjust the text in an image as comprehensively as real text. The most typical website components that include text in an image are logos. For example, the University of Oulu’s logo should have an alternative text, such as “University of Oulu.” Please note that adding a dot in the end of the description is often a good idea.
<img src=”unioululogo.png” alt=”University of Oulu.” />
What constitutes a good alternative text?
When the page and its contents appear understandable to the screen reader and Braille terminal users, it can be said that the alternative texts are good. The most common mistakes include having no attribute at all, repetition, describing non-essential things, and the omission of the most important information.
- If there is no attribute at all, screen reader users become aware that there is an image of some sort but do not know whether it is of any importance. If the image contains important information that is not included in the image caption or body text, you should provide an alternative text for the image. Otherwise, add an empty attribute to the image to indicate that it is not important.
- There is no need for unnecessary repetition. If you already have a visible image caption under the image, repeating the image text does not make for a good alternative text. If the image caption adequately explains the image, the attribute can be left empty.
- Consider the message you are trying to convey. Do not describe irrelevant things. Describe what you want the image to convey.
- In the case that the image contains information that is not mentioned in any text, that information should be included in the alternative text. You should also consider if describing the image in the text would be a good idea; then you could leave the alt attribute empty.
- If the image serves as a link, a good description will tell where the link takes you, i. e. the name of the page or file the link opens.
- Consider the function: if a web page has a magnifying glass icon for a search function, the correct attribute to the icon would be “search” or “find”, not “magnifying glass”.
Tool-specific instructions
Adding an alternative text in Moodle
When you add an image to Oamk’s Moodle, you can immediately enter an alternative text to the image in the Describe this image for someone who cannot see it (Kuvausteksti kuvalle) field. If it is an illustration image, select the checkbox next to the Description not necessary (Kuvausta ei tarvita) option.
(Note: we have switched to a new Moodle editor, Atto, which supports the creation of accessible content better than the previous Tine MCE, where the only way to create an empty attribute was to add a space in the attribute field.)
If you write a description text for the image AND select the Description not necessary checkbox, Moodle will add a description text to the image.
Adding an alternative text in Microsoft Office 365 tools
Unfortunately, the different versions of MS tools do not (yet) work with the same logic. The focus here is on the browser versions of the Office suite, with the desktop versions only mentioned in passing.
- Word
- Select the image.
- Select Alt text/Vaihtoehtokuvaus from the ribbon.
- If the browser window is narrow, the Alt text/Vaihtoehtokuvaus option may be hidden under “More picture format options”.
- PowerPoint and Excel
- Right-click on the image to open the context menu. Select Alt text.
- (In the desktop version, alternative text can be found in the picture editing options under Format Picture/Kuvan muotoilu).
In the browser, fill in the Description field.
If you do not add the information, the image will not have an alt attribute at all. To allow the screen reader to skip the image if necessary, add a space in the Description field. The desktop version includes the option to mark the image as decorative. While you can select the appropriate checkbox in the desktop version, the cloud service does not include this option. Therefore, it is better to use a space until the other option is also supported in Word’s browser version.
(Still, consider the above example: in what situation would it be of importance to a screen reader user that the accessibility icon is a stickman inside a circle? If it is a decorative image irrelevant to the content, it should have an empty alternative text.)
Adding an alternative text in WordPress
On the WordPress publishing platform, an empty alt attribute is automatically applied to all images. In a way, it is assumed that all images are decorative or explained in the text (or, e.g. in the Caption Text/Kuvateksti field) so exhaustively that the image itself does not need to have an alternative text. If necessary, you can enter an alternative attribute in the image editing view that also includes several other fields; a text entered in the Alternative text/Vaihtoehtoinen teksti field will be added as the content of the alt attribute. If you leave the field empty, the image will have an empty alt attribute (alt=””).
Adding an alternative text in Webropol
At the moment, you can only add an alternative text to a logo in Webropol.
Webropol survey editor does not allow setting an alternative text to images attached to the questions, and no alt attribute is set for the added images, not even empty.
If you want to add an alt text to your survey logo, save the image in the image bank first. Then, when you set the logo for the survey, you can also add an alternative text.
In the case of Webropol, we must accept for the time being that it is not possible to provide an alternative text to the images in the survey. This being the case, you should not use decorative images at all. If images are necessary and you include them in the survey, always indicate in sufficient detail the content of any relevant images in the body text. Also, it would be polite to mention the following in, for example, an invitation to a survey:
“About the accessibility of the survey:
We use the Webropol for this survey. Webropol is not yet accessible. The survey contains images to which we were unable to provide alternative attributes due to the software. If you use a screen reader, please note that we have nevertheless described the content of the images in the text sections of the survey, so all relevant content can be found as text.”
Links in Webropol
If you need to add a link in Webropol, use HTML markup and enter the link as follows:
<a href=”https://ict.oulu.fi”>ICT Services help website</a>
– provide the web address (in its entirety with the protocol included, like ‘https’ in the example) inside quotation marks and enter the link text between the start <a … > and end </a> tags.