Alt Text

Alt text should be descriptive and informative, and the words you use should give a clear idea of the who, what, and where of the image. This functionality should be utilised on all Images on your site to comply with Accessibility regulations.

Imagine someone is reading a web page out loud to you. How do they describe an image on the web page? Is the information they provide descriptive or vague?

Some of your visitors may not be able to see images; they may be blind, colour-blind, or low-sighted. The alt text attribute is of great help for those people that can rely on it to have a good idea of what's on your page. If you know anyone who is visually impaired, think about how they would use your website and how you can provide accessible content for all of your users.

What is Alt Text?

Alternative text (Alt Text) is a HTML Alt attribute that helps to describe an image to users who are unable to see them. It is used by accessibility tools such as screen readers to help anyone who may have difficulties when browsing your site. These tools rely on accurate tags, labeling, and headings to provide users with the full picture of your website content and guide them around your site more easily.

Describing Images

Keep Alt Text specific and descriptive but not too long. One or two sentences should suffice.
Consider the context of the image. What content is it supporting? Which details are important to the image? Use the image subject and context to help create good Alt Text. Follow the who, what & where.
Review your text for spelling errors and use a capital letter for the first letter and end whole sentences with a full stop.
Do not use the terms “an image of” or “a picture of” – Screen Readers will pick up that there is an image on the page via the HTML Source code, otherwise it will read as “image, an image of….”.

Using Images

As Text

WCAG states that images of text are not allowed. If the image is not a logo, avoid text in images. However, if you do use an image that contains text, the alt text should contain the same words as in the image.

If the text on the image contains important information or the text is very long, then add the text within the website content rather than provide this in an image or a long, drawn-out alt text description. Users using assistive technology may require the text in a particular font and size and may need to change the background colour, line spacing, and alignment; which they would be unable to control with an image.

As Links

If the image is a link, describe where the link would take you. The alt text should describe the purpose of the image rather than the image itself.

As Decoration

Decorative Images do not provide any information about the content of the page. If the purpose of the image is to provide visual decoration only, provide a null (alt="") alt attribute. These will then be skipped over by the screen reader.

Alt Text and SEO

Alt text contributes to image SEO - Search Engine Optimisation. It gives Search Engines a better understanding of what the image and web page are about as a whole. Search engines crawl through web pages for alt text as they are unable to pick up image files. This will then allow them to index an image. If you do not add alt text to your images, this will affect your website accessibility and search engine rankings.

Keep keywords accurate and relevant to the content. Do not overuse keywords (keyword stuffing) as this can affect your ranking on search rankings.
Not having Alt Text can affect your website SEO and site accessibility. When creating your website content and images think about how all of your users will read this information.

Good Examples vs Bad Examples

Remember, the primary purpose of Alt Text is to describe images to visitors who are unable to see them. This includes screen readers & browsers that block images, but it also includes users who are sight-impaired or otherwise unable to visually identify an image. The more descriptive your Alt Text; the better this is for a visually impaired user.

Okay: alt="A doctor in a hospital."

Good: alt="A doctor providing patient care in a hospital.”

Not recommended:

alt=”” - No alt-text has been entered. Only acceptable for images that are for decorative purposes

alt=”hospital.jpg” - This is the image file code and does not provide a description of the image

alt=”hospital health doctor patient care results nhs healthcare nurse ward clinician” - This is an example of keyword stuffing.

How to add Alt Text on your website

Within the CMS, Alt text can be added to the Image at the point of upload by filling out the available fields. Alt text can also be added to the Image after the Image has been uploaded. This can be done by selecting the ‘i’ Information Icon key, This will then open up the Image properties that you can now amend as you wish.