Core accessibility skills
Writing useful alt texts
‘Alt texts’ are brief text alternatives for digital images. Screen readers and refreshable Braille displays read alt texts to users in place of image files, and if an internet connection is interrupted, the browser displays alt texts to sighted users as well.
Many people feel hesitant writing alt texts at first, but there’s good news:
- You don’t have to describe every element of an image. In fact, concise alt texts are better.
- Machine learning tools and large language models can help speed up the process (if used thoughtfully).
- It’s normal to get better at writing alt texts over time, so it’s okay to start where you are.
Principles of writing alt texts
In general, alt texts should be:
- Concise: One long sentence or two short sentences.
- Informative: Images can convey a mood; describe a relationship, process or hierarchy; or replicate an elaborate formula. Pretend a friend is sitting opposite you, and tell them what the main subject is and what information you want them to get out of it.
- Description-focused: Only describe the information contained within the image itself. If the image needs a lengthy interpretation, explanation or analysis, that part doesn’t need to be in the alt text. Share it with everyone by writing the text on the page or delivering it verbally in a presentation.
- Light on punctuation: End the alt text with a full stop. You can use commas and full stops, but screen readers vary on support for other punctuation and special characters. It’s best to minimise them.
You do not need to write “image of”, because screen readers announce when they are reading an image.
What to include for different types of visuals
- Photographs: Identify the subject, relevant action, setting and any details needed for the learning purpose. Do not describe irrelevant appearance details.
- Screenshots: Explain what the screenshot shows and why it is included. If the user needs to follow steps, provide the steps in body text rather than relying on the screenshot alone.
- Charts and graphs: State the chart type only if useful, then summarise the main trend, comparison or takeaway. If precise values matter, provide them in text or a table.
- Diagrams and flowcharts: Describe the starting point, sequence, relationships and endpoint. For complex diagrams, provide a full text alternative.
- Infographics: Do not cram all infographic content into alt text. Provide a short identifier in alt text and a nearby text alternative that communicates the same information.
- Formulas, equations and notation: If the equation is essential, provide it in an accessible equation format where possible. If it must be an image, write a clear text version or provide the equation in surrounding text.
- Icons and buttons: Describe the function, not the appearance. For example, “Submit response” is usually better than “Blue arrow icon”.
- Logos: Identify the organisation or brand if it communicates useful information. Decorative or repeated logos may be marked as decorative depending on context.
Lengthy or complex images
If you need more than 1-2 sentences to adequately convey the information, provide a full text alternative. In many formats, you can contain a text alternative in an accordion or similar so that users can choose whether to view it.
Use the alt text to describe the location of the text alternative.
Example: “This is figure 1. To read the text alternative, open the link following this image.”
Marking images as decorative
If an image does not convey any meaningful information at all, it’s okay to mark it as decorative. A perfect example is a decorative ‘ribbon’ at the top or bottom of a page – one with no text or logos.
Most platforms have a tick box to allow you to “mark as decorative”. If you work directly in HTML code, you can add a null alt attribute; that is, alt=””.
Examples: Improving alt text
Photograph of students in a laboratory
- Poor: “Students.”
- Better: “Students work at benches in a university laboratory with equipment and notebooks.”
Screenshot of a Canvas discussion page
- Poor: “Screenshot.”
- Better: “Canvas discussion page showing a discussion prompt above a list of student replies.”
Line graph in a lecture slide
- Poor: “Line graph of results.”
- Better: “Line graph showing response times decreasing across the first three trials, then levelling off from trial four.”
Decorative banner
- Poor: “Blue abstract banner.”
- Better: Mark as decorative.
Image that contains text
Where possible, avoid images of text, and type or paste the text directly instead. In some cases, a picture of text might be unavoidable; for example if you need a photograph of a printed item
- Poor: “Poster with text.”
- Better: Use a short alt text like “PDF poster. Full text follows.” Then recreate the text in the document, following the image. In a webpage, this text can easily be hidden in an accordion panel.
Writing alt texts for assessments
Yes, it is still necessary to write alt texts for images in assessments and exams.
There is an art to it – you need to convey the essential features of the visual cues without giving away the information you are asking students for. Here again, pretend you are describing an image to a colleague sitting across from you. If you wanted them to be able to answer the question, what information would you need to tell them?
Examples: alt texts for assessments
Asking students to interpret a graph
Your question might ask students to explain what a graph means, or what actions should be taken based on the data. In that case, students will need access to the general trend, but not the interpretation or the data. A possible alt text would be: “Scatter plot with study time on the x-axis and quiz score on the y-axis. The points generally rise from left to right, with one low-score point at high study time.”
If your question asks a mathematical question based on the data, you may wish to provide a table as an alternative – just be sure the table is in a text format and has row and column headers.
Visual diagnoses
If you are asking students to make a visual diagnosis based on an image, students will needs access to the relevant visual features. A possible alt text would be: “Close-up photograph of a skin lesion on the forearm. The lesion is oval, dark brown and unevenly coloured, with an irregular border.” You may choose to include distracting information as well, such as the surrounding skin colour if that is irrelevant.
Of course, it is rare that students using screen readers will be taking a subject that requires, but it can and does happen – students can operate with restrictions on their practising certificate. Furthermore, if the image fails to load in the test environment, the alt text is the only thing that any student will see.
You might ask students to interpret a medical graph. For example, you could be asking students whether this is a normal rhythm, atrial fibrillation, myocardial infarction, or something else. An alt text then describes the relevant visual features, but not the diagnosis. This alt text could be: “Twelve-lead ECG showing an irregular heart rhythm, with uneven spacing between heartbeat peaks and varying intervals across the tracing.”
Using AI-generated alt text responsibly
Many generative AI tools – such as Ally in the LMS or the University of Melbourne SparkAI tool – can create alt text drafts for you if you paste in an image. AI-generated alt text can be useful as a starting point, especially when reviewing many images. It still needs human review because it may miss the educational purpose of the visual, omit important details, overstate what is visible, or introduce inaccurate information.
- Always review generated alt text before approving it.
- Check that it describes the image in the context of the surrounding content.
- Remove confidence statements or system-generated comments from the alt text field.
- For assessment images, do not rely on AI-generated alt text without subject matter review.
Generative AI alt text rules
You can ask most generative AIs to remember rules about creating good alt texts. This is a sample you can start with.
Please follow these rules for alt texts:
- Be concise. The goal is 120 characters, though you may need to go slightly over.
- Do not write "image of" or "photograph of".
- Describe the most prominent visual components.
- Avoid interpretation, diagnosis or conclusions.
- Do not include sensitive, speculative or irrelevant details about the people in images.
- If you have a slide or a document, write an alt text that is relevant to the context of the document.
- Use commas and full stops for readability.
- Avoid complicated punctuation.
- Avoid subscript and superscript notation, using words such as "sub" and "to the power of" instead.
Review checklist for alt text
- Every meaningful visual has alt text or an equivalent text alternative.
- Decorative visuals are marked as decorative rather than given unnecessary descriptions.
- Alt text is concise, accurate and relevant to the learning or communication purpose.
- Charts, diagrams and infographics have a full text alternative when the alt text field is not enough.
- Assessment alt text gives access to the visual information without giving away the answer.
- AI-generated alt text has been reviewed, edited and approved by a person.
Using colour in an accessible way
Accessible pages can still use colour! The two important factors are:
- Keep high contrast between font colours and the background, and
- If you use colour coding, use something else (like symbols or patterns) as well.
Colour contrast
Strong contrast between fonts and background colours is valuable for people with low vision as well as people with colour blindness. A very dark colour (like the University of Melbourne Heritage blue) against a very pale background will be fine. White screens can sometimes trigger migraine sufferers, so picking a pale background just off white can take the edge off.
If you want to try out other font colours for any reason, try a colour contrast tool like the browser-based WebAIM Contrast Checker, or the software tool Colour Contrast Analyser. If you aim for a contrast ratio of 7:1, your content be readable by almost everyone with vision.
Redundant coding with colour
Graphs often colour-code data – that is, they use colour to indicate meaning. If you think about it, so do traffic lights and board game pieces! However, there is no colour combination so accessible that every person can distinguish between them.
For that reason, whenever you use colour to indicate meaning in a graph, map or other visualisation, you need to add either text, or a pattern, or a symbol. For example:
