Blog

The WCAG guidelines are fairly complex and it’s easy to make mistakes as you update your website (even for those who are well versed in them!). Incorrect or unnecessary ALT text is a mistake that we see come up quite often with clients who are managing their own website. This is a shame, because with just a little bit of understanding, it’s very easy to nip this problem in the bud.

So what is ALT text?

ALT text (or alternative text) is a word or phrase that can be inserted as an attribute in the HTML code to tell Web site viewers the nature or contents of an image. Often the ALT text will be read out to those who are visually impaired and using a screen reader. It is common for content management systems to give you easy options for providing alt text when you are uploading images.

How do I use ALT text correctly?

ALT text is very easy to use correctly once you get good at answering this simple question:

“Is this image purely decorative or is it adding value to the content?”

If the image is purely decorative, then the ALT text should be left blank. It’s often that we see lifestyle images used to break up the content or just make a page have a bit of color added to it. These images that are just there to add value to the design do not need alt text.

If an image is adding value to the text of the page, or if the image is serving its own separate purpose, then it will require ALT text. It’s common that these types of images will include text as part of the image (Such as an image advertisement). Most of the time, simply using the text presented on the image as its alt text is acceptable. Just be clear about what this image’s purpose is. If the image is a link, be clear about what happens when it’s clicked (For Example: “Apply for an Auto Loan”)

Tips for writing the ALT text.

• Describe the purpose of the image and any actions that will result from clicking it.
• Keep your ALT text concise and to the point. The recommended length is fewer than 125 characters.
• Don’t start ALT text with “picture of…” or “Image of…”
• Don’t use any ALT text for purely decorative images.

Going forward, when you’re managing your site and adding alt text to images, just keep these tips in mind. Many visually impaired users rely on ALT text to get them the information they need when browsing sites with a screen reader. So ALT text is a core component of their user experience on your website. Keep vigilant about using it correctly and use your best judgement when writing it. You’ll be doing your part to make your website all-around better and much more accessible!