Image accessibility guidance

Source: “Figure 12-1b” in: Kindt, T.J., Osborne, B.A., Goldsby, R.A. & Kuby, J. (2007) Kuby immunology. International edition. 6^th ed. New York: W. H. Freeman.

Alt text (based on needs of the ILO)

Autocrine, paracrine and endocrine actions of cytokines.

Description (or ‘detailed alt text’) (based on needs of the ILO)

3 acting modes of cytokines, shown with the release of cytokines from 3 cells. The first cell releases a number of them and one of the cytokines is recognised by its own receptors. This is autocrine action. The second cell releases cytokines and one is recognised by the receptor of a nearby cell. This is paracrine action. The third cell releases cytokines, and through the circulatory system, one is recognised by the receptor of a distant cell. This is endocrine action.

Additional accessibility notes (for example 1)

• The label text is in bold, which is not advised for certain vision disabilities.
• The receptor with cytokine may also be difficult to distinguish for someone with low vision.
• The citation text is inconsistent with other images, varying font type, bolding and uses italics, which is not advised. Citation text may be better in content text, depending on image production policies.

Source: Schroeder, B.O. & Backhed, F. (2016) Signals from the gut microbiota to distant organs in physiology and disease. Nature Medicine, 22: 1079-1089; doi: 10.1038/nm.4185. Available from: https://www.nature.com/articles/nm.4185.

Alt text (based on needs of the ILO)

Gut microbiota convert environmental signals and dietary molecules into signalling metabolites to communicate with the host.

Description (or ‘detailed alt text’) (based on needs of the ILO)

Infographic flow chart showing inputs affecting gut biota, their outputs and which organs and tissues they affect. Both environmental elements and diet affect gut microbiota. Environmental factors include antibiotics and cold exposure. Diet includes dietary fibre, animal-derived saturated lipids, and dietary cholesterol. Microbiota exposed to these signals communicate with the host via signalling metabolites which include LPS/endotoxin, bile acids, SCFAs, trimethylamine and other as yet unknown signals. The resulting metabolites subsequently signal to adipose tissue, the liver, intestines, brain, cardiovascular system and lungs.

Additional accessibility notes (for example 2)

• Need to ensure any acronyms are explained in a key in the content text for all learners.
• Citation text may be better in content text, depending on image production policies.
• Text size on image is small. But high resolution allows it to be magnified well.
• Image elements are small, with some being low contrast (e.g adipose tissue, brain, etc).

Source: Biogents (2020) Malaria. [online] Available from: https://eu.biogents.com/malaria/

Alt text (based on needs of the ILO)

Infographic of the malaria transmission cycle, shown in five stages.

Description (or ‘detailed alt text’) (based on needs of the ILO)

Firstly, an infected mosquito bites a human who becomes infected with so-called sporozoites of the Plasmodium. The human liver then becomes infected. Sporozoites produce thousands of so-called merozoites. Then, blood cells get infected with merozoites which develop to further stages (gametocytes). Mosquito bites an infected person becoming itself infected with gametocytes. In the mosquito, Plasmodium gametocytes develop in several steps to sporozoites. Lastly, an infected mosquito bites a human, restarting the cycle.

Additional accessibility notes

• There is a lot of image text here. Whilst the stage titles may be appropriate here, any further descriptions would be better in the content text for all learners to benefit from.
• Some label text is in bold, which is not advised for certain vision disabilities.
• The ‘HUMAN’ and ‘MOSQUITO’ watermarks are not accessible for low vision.
• The citation text is inconsistent with other images. Citation text may be better in content text, depending on image production policies.

Source: National Institute of Allergy and Infectious Diseases (NIAID) (2017) [online] Available from: https://en.wikipedia.org/wiki/File:Malaria_Parasite_Connecting_to_Human_Red_Blood_Cell_(34034143483).jpg. CC BY 2.0, via Wikimedia Commons.

Alt text (based on needs of the ILO)

Colorised electron micrograph of malaria parasite, in blue, attaching to a red blood cell. Attachment point is magnified in the inset image.

Description (or ‘detailed alt text’) (based on needs of the ILO)

[More detail could be referred to in the content text instead, if required by the ILO, which makes it available for all]

Additional accessibility notes

• There has to be a need for showing such an image. What ILO is it seeking to assist in the delivery of?
• Colour contrast could be an issue here. A white background would help the red blood cell in particular be seen more easily.
• Inset image is not easy to separate from the main image for low vision. Inset, if needed, should be a separate image.

• Consider the content text before and after the image.
• Some of what you write for the alt text or description may be better in the content text, for everyone to be able to benefit from.

• Probably not. This rarely approaches the needs of a low or no vision audience and the needs for delivering the ILO(s).
• It may contain a key for the acronyms used, which should be explicit in the content text.

• It’s best to refer to the Intended Learning Outcome (ILO) the image is addressing. What is it the image is delivering for the learner?
• What does the target learning audience need to know?
• What do they need to know at this stage of their learning?
• To what level/detail do they need to learn it?
• This will determine what is relevant or not for your learners.

• What overall is being shown? Is it a process? How many stages, types or examples? Is it cells?
• What kind of image is it? Is it a colorised scanning electron microscope image? Is it a black and white X-ray? Is it an infographic? Of what? Would this also help a learner to recognise which image is being referred to in a conversation with another learner?

• What is shown? What type of cell, receptor, etc? Which organs or tissues? Skin surface?
• Numbers – if relevant, is it relative numbers (e.g. many, less than), or exact?
• Shape – does its shape help recognise it, or assist in its function?
• Outline – does its outline help recognise it, or assist in its function?
• Texture – does this help recognition (e.g. comparing a red blood cell with malaria to one without), diagnosis or identify a characteristic
• Relative position – does the fact that something is over/under, near/far, inside/outside, on the surface, etc. something the learner needs to know? Or is it merely an image design choice?
• Movement – is any movement being indicated (e.g. towards, away from, moving out of)?
• Colour – is colour use coincidental, or does it reflect real-world recognition? Does colour assist in identifying a particular area or feature? Has an image been colorised with certain colours indicating certain regions or cells?

• All text that appears on the image has to be included.
• The reason for this is that you have to be giving a similar experience to the non-visual learner. If there is text on the image, there should be a learning justification for it. Otherwise, it is decorative or ‘nice to know’, not need to know.
• This influences image choice in the first place. If there is text or labelling that is not needed for this ILO, target learner audience, or for this stage of this learning, then go back to the image selection or image production stage.

• Do not include “an image of” or “a picture of”. Screen readers will automatically state it is an image.

• Ideally, 125 characters for alt text. 2000 characters for the ‘description’.
• Further guidance is in the FAQ below.

• Use capitalisation of the first letter of a new sentence.
• Use punctuation.
• Use short sentences.
• Use simple English where possible, around the terminology needed to be used.
• The text should flow as if you were telling someone about it. NOT as you would write it in an academic paper.

• All previously used alt text and descriptions need to be reviewed through the lens of the ILO, target audience, and detail/level required.
• It is likely that for a new or later use any description text will need to be amended for its new application.
• It may be there is something different to focus on here than in its previous usage. This may in turn make you ask yourself, is this the best image to enable this learning at this stage of the learning?

• Image simplicity is key.
• Does the image (or intended image design) convey the learning of the Intended Learning Outcome, to the target learning audience, to the level needed, at this point in their learning? (No more, no less.)
• Text on images should be avoided at all costs, unless necessary for labelling elements of an image.
• Labelling should adhere to disability accessibility standards for those with low vision e.g. with font size, colour contrast between font and background, orientation horizontally only, etc.
• What information on it would be better as text content off image so more learners benefit from it?
• Before considering text descriptions, we must choose the best visual image to deliver our Intended Learning Outcome (ILO) for a fully visual and limited vision audience. This latter audience has considerations of its own.
• Avoid purely decorative images. If it does not convey information for delivering an ILO, then it does not need to be used.

• Text on the image that is more than just the essential labelling of elements of the image.
• Any text descriptions of elements or stages of a process. Could this be in content text instead, referring to the image visualisation of it?
• Any text presented in a list or a table should be in content text, not in an image. This becomes very lengthy to describe in alt text.
• Multiple graphs, pie charts or lots of data, if needed, should be split up and/or described in content text. Multiple stages of a complex process should be considered for separate images.

• It is required under UK legislation.
• Images and text on images pose a key barrier to independent access to information and learning for those with blindness or limited vision.
• Providing they are well written, they enable those with vision disabilities to understand an image.

Alternative (alt text) is a description that enables someone who cannot see the image to gain the same or similar understanding of what it is aiming to portray, as someone who is able to see it fully.

If the alt text is not enough, then a lengthier image ‘description’ that follows the alt text can be used.

• It enables those who are blind or have vision disabilities to access learning and to avoid barriers to their understanding and success.
• Software called screen readers convert alt text and descriptions that are programmed in the background of web content into vocalised audio that learners can listen to.
• It can assist learners who use software to assist their learning experience, such as those with neurodivergence, learning difficulties, or non-native English speakers.

Alt text is read by the software first. Then the ‘description’ text is read out, if present. There is a tight limit on the length of alt text, so the description enables more details to be provided for a better understanding of the image, if needed.

Alt text, the first text that a screen reader will read out to a user, is limited to 125 characters including spaces and punctuation. So that maximum length would look similar to this:

“Ac turpis egestas sed tempus urna et pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna eget est lorem ipsum dolor sit amet.”

It would probably be rare for many medical and biomedical diagrams to be able to be adequately described within these confines, so a summary is advised here. Detail would then be provided in the ‘description’.

In the ‘description’ (or ‘detailed alt text’) the limit is 2000 characters, including spaces and punctuation. So this would be 300-500 words.

Importantly, if you are having to use a lot of words to describe any image, it may be that the image contains too much information, has too much inaccessible text on the image, has detailed graphical representations, or shows many stages of a process, for example. Consider to how to simplify, split or have more in the content text rather than in the image.

UK public sector legislation requires it.

Alt text is section 1.1 of WCAG 2.1 and WCAG 2.2.