{"id":16732,"date":"2022-02-10T16:14:27","date_gmt":"2022-02-10T21:14:27","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?p=16732"},"modified":"2026-03-18T08:52:06","modified_gmt":"2026-03-18T12:52:06","slug":"alt-text-1-improving-your-image-with-web-services","status":"publish","type":"post","link":"https:\/\/carleton.ca\/webservices\/2022\/alt-text-1-improving-your-image-with-web-services\/","title":{"rendered":"Alt Text 1: Improving your Image with Web Services"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Alt Text 1: Improving your Image with Web Services\n <\/h1>\n \n \n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n

Let’s discuss the subtext<\/h2>\n\n\n\n

Before you get too excited this story isn\u2019t about how to run a great PR campaign or mend your reputation after those photos get leaked to the press. When we say improving your image, we mean we are going to look at how to improve the accessibility of images on your website using alt text<\/strong>.<\/p>\n\n\n\n

The five Ws of Alt Text<\/h2>\n\n\n\n

First things first: it\u2019s pop quiz time – let\u2019s try the five Ws (What? Why? How? When? and Who?) about alt text. (Relax: I have provided the answers for you.)<\/p>\n\n\n\n

What?<\/strong><\/p>\n\n\n\n

Alt text is the little description of a picture that you can hear read to you when browsing a web page using an assistive technology called a screenreader. (It also appears in place of an image when the image is missing or hasn’t loaded.)<\/p>\n\n\n\n

Why?<\/strong><\/p>\n\n\n\n

To enable people with visual disabilities to hear what the content of a picture is.<\/p>\n\n\n\n

How?<\/strong><\/p>\n\n\n\n

You can add the piece of text to the image in the media library of your website.<\/p>\n\n\n\n

When?<\/strong><\/p>\n\n\n\n

When the image has something that warrants description.<\/p>\n\n\n\n

Who?<\/strong><\/p>\n\n\n\n

You probably think the \u2018Who\u2019 is users who have visual disabilities \u2013 but, yes sorry, it was a trick question because everyone benefits from accessible images!<\/p>\n\n\n\n

Let\u2019s move on swiftly from the unfairness of that trick question, to see what we mean by ‘everyone benefits from alt text.’<\/p>\n\n\n\n

We put the ‘text’ into ‘context’<\/h2>\n\n\n\n

Alt text on images serves three functions:<\/p>\n\n\n\n

    \n
  1. It allows users with visual disabilities to hear the content of the image described to them<\/li>\n\n\n\n
  2. It allows other users to read something about the content of the image if the image fails to load with the rest of the page<\/li>\n\n\n\n
  3. It allows search engines like Google to index pages in a much more efficient manner<\/li>\n<\/ol>\n\n\n\n

    These functions make it even more important to make sure you have well-crafted alt text for your images.<\/p>\n\n\n\n

    Let\u2019s look at the When? again<\/p>\n\n\n\n

    What does it mean when we say the ‘When’ of alt text is “when the image has something that warrants description”? A good practice to adopt with alt text is to always consider the context of the image. Let\u2019s take a look at this image:<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    Now imagine this picture is used on a page that gives very general information about cats. This picture seems very relevant to the page content because it contains a picture of \u2013 spoiler alert \u2013 a cat. Alt text might be a grey cat in front of a computer<\/em>.<\/p>\n\n\n\n

    Let’s ask ourselves two questions:<\/p>\n\n\n\n