Alt tags

What is an alt tag?

Alt tags are also known as alt text or alternative description. An alt tag is text that describes what is in non-text content. In most cases, this will be an image. In some cases, an alt tag may be used to describe video or audio content. Having alt tags stems from the most basic rule of web accessibility.

"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose." Web Content Accessibility Guideline 1.1.1

These alternative descriptions of images allow users who can’t see the images understand what they show. Users may not be able to see the images because they are blind (and are using a screen reader to read the alt tag) or because they have a poor internet connection (and will see the alt tag written on the page).

How to add an alt tag

TerminalFour users can add an alt tag in the “Description” field when they add an image to the T4 Media library. If you don’t add an alt tag, the blind user or the user with a bad connection will know only that there is an image on the page.  

How to write an alt tag: 

• It needs to describe the image  
• It needs to give the image context within the site – think about what information you are trying to convey by using this image 
• It needs to be fewer than 125 characters
• Do not use phrases like “image of” or “picture of”, let the screen reader handle that 

Alt tags to avoid: 

• Don’t simply use file names  
• Don’t use overly descriptive text 
• Don’t use in-jokes 

You should avoid using images of text on the website in almost every instance but you can use logos. If you use a logo on the site, your alt tag should let the user know, eg “Digital Marketing logo”.

You can check an image on a page has an alt tag by opening up the inspection window on the page (right click on the image and go to "inspect") or by finding the image in the Media library in T4. If you look on the page, you will see a line of code in the inspection window, eg: alt=“Digital Marketing logo”.

Your alt tag for video and audio content does not have to explain all the content within the video or audio (that's what the transcript is for). You are describing the visual representation on the page.

If you want to read more about alt tags, our web developer James Filby has written a fantastic blog about how to write the perfect alt text.

If you need further help, please email digitalsupport@derby.ac.uk and we will invite you along to one of our drop-in sessions.