The University\u2019s template for external websites gives great flexibility in the use of images. From visual grid layouts to mastheads and galleries.<\/p>\n
Many users of our websites don\u2019t see these images. They may have chosen not to download images, or might be using a screen reader to turn visual information into audio. This means it\u2019s important to provide contextual information about our images.<\/p>\n
Alternative text, or alt-text, is used to describe images to screen readers<\/strong> used by visually impaired people. It is also a useful aid for search engine optimisation, as search bots can crawl this field to get information about the image.<\/p>\n In T4 when you add an image to the media library, whatever you put in the description field is output as alt-text.<\/p>\n To make your alt-text effective, keep it short and descriptive<\/strong>. For all our web content, we recommend you write naturally and clearly \u2013 alt-text is no exception.<\/p>\n Long alt attributes will disrupt the flow of the content on your page. If you have a lot to say about the image, eg for a chart or graph, add a caption or describe it in the text on the page. Don\u2019t cram this into the alt-text.<\/p>\n It\u2019s good to think about including key words in your alt-text to aid findability, but they must be relevant to the image. Don\u2019t fill your alt text with a string of random keywords just to help search optimisation. This will be confusing for users of screen readers. As we recommend for all content – write for people, not search engines.<\/p>\n We recommend that you avoid using text in an image<\/strong> as it can\u2019t be seen by screen readers or search bots. Therefore it\u2019s not accessible or findable. But, if you do have text in an image, make sure you also include that text in the alt attribute.<\/p>\n Alt text is not needed for:<\/p>\n However, there still needs to be an alt tag in the code of the page. If the alt tag is missing, a screen reader will try to add context by reading the image name, and this is often unhelpful.<\/p>\n An empty alt tag indicates to the screen reader that the image is meaningless. This means it\u2019s simply ignored by the screen reader. The good news is that in T4 if the description field is left empty then the alt text field is left empty and still appears in the code.<\/p>\n This video, created by Mike West<\/a>,\u00a0gives a great overview of what I’ve covered in this blog post. It includes examples of exactly what a screen reader picks up from images with and without alt-text.<\/p>\nGood practice for alt-text<\/h2>\n
Exceptions<\/h2>\n
\n
Find out more<\/h2>\n