Principle 1: Perceivable
Alt text: What it is, how to write it, and why it matters
People using screen readers are often vision impaired and unable to perceive non-text content. Providing a brief alternative that the screen reader speaks conveys the same editorial intent or purpose of editorially significant non-text content, such as buttons, icons, images, or avatars.
testing and checks
Checking for alt text problems
The easiest way to test your site, is to use one of our suggested browser tools. You'll potentially want to manually test using a screen reader tool too, to evaluate the full experience. All guidance for carrying out these checks are available in the tools section. By using these methods, you’ll likely encounter the following findings:
Missing Alt Attributes
For missing attributes, you’ll need to evaluate whether or not the media in question requires you to add an alternative attribute, the type of message you want to convey or if you’d like to hide any details because it’s purely decorative. See the next section for guidance on best practice.
Poor quality Alt Attributes
Tools like WAVE will highlight when you have poor quality or insufficient alt attribute usage. These will likely be instances which have little to no consideration for the end user e.g. adding and alt attribute of “logo” to your logo.
General best practice
Best practice for handling alt attributes
Now you’ve checked your site and identified each instance, you’re going to want to determine which of the following categories best describes your image or content:
The image conveys simple information (e.g., a photograph, icon, or logo)
<alt = students working out on cardio equipments and free weight stations in the David Ross Sports Hall>
The description should convey the content and functionality of the image as concisely as possible to provide access to the content of the image without burdening users with overly complex details.
The image conveys complex information (e.g., a chart or graph)
<alt = The chart indicates that 58% of students would like to see more events at the sports centre. More details are specified in the article>
Complex images, such as graphs, charts, or diagrams, may contain too much information to be effectively described using alt text. With this type of content, we recommend exposing the description within the page content, as it’ll likely be useful to all users of your site or service. Include an alt attribute as above, with reference to your upcoming long description content.
For developers, you could use the longdesc tag here and point to the content id with HTML as an alternative to providing an alt attribute.
The image is purely decorative, not informative
In the final instance, you may have images which are purely decorative and include little to no additional context for users. For this, you’ll need to instruct screen readers to ignore these using one of the following methods:
• If using the HTML element, add an empty alt attribute (alt="").
• If using the HTML <img> element, add the following attribute: role="presentation"
• Avoid using the HTML <img> element for decorative images; instead present the image as a background-image using cascading style sheets (CSS).
University guidance
Adding alt text to your images on University platforms
Adding alternative text to your content is super simple and there's a few of potential ways to do so, depending on the platform you're working on. Below are some examples you'll bump into on your travels around University platforms...
University CMS
If you're working on a web page within the University CMS, there's a simple feature when adding or editing an image that provides a box to enter your alt attributes within. This will automatically attach it to your image for screen readers to communicate.
Moodle
As with the CMS, Moodle allows users to enter an alt attribute when adding an image to your page. You can also re-visit by double clicking on the image to open up the editing box.
Microsoft Products
Within Microsoft Office, including Word and Powerpoint, simply right click on the image you've added and select "Edit Alt Text".
In Microsoft Sharepoint, open the page editor, hover over the image, click the little pencil icon and alt text entry will appear in the right sidebar.
Adding as HTML (manually)
To add an alt attribute directly to your HTML, simply open your web editor and find your image. Your alt attribute can be entered as following, within the img brackets :
<img src="/images/your-image.jpg" alt="your alt attribute goes here" />