{"id":21206,"date":"2025-03-28T15:35:28","date_gmt":"2025-03-28T19:35:28","guid":{"rendered":"https:\/\/carleton.ca\/webaccessibility\/?page_id=21206"},"modified":"2025-06-09T07:52:34","modified_gmt":"2025-06-09T11:52:34","slug":"alt-text-on-a-linked-image-describes-the-action","status":"publish","type":"page","link":"https:\/\/carleton.ca\/webaccessibility\/alt-text-on-a-linked-image-describes-the-action\/","title":{"rendered":"Alt text on a linked image describes the action"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Alt text on a linked image describes the action\n <\/h1>\n \n \n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n\n\n

Accessibility<\/h2>\n\n\n\n

Alt text must always appear on an image which is being used as a link.<\/p>\n\n\n\n

Reason<\/h2>\n\n\n\n

Although not every image needs to have alt text, if the image is being to link to something, it must<\/strong> have alt text which describes the effect of clicking on the link. This is so a user with a screen reader doesn’t have a “wasted journey”.<\/p>\n\n\n\n

Best practice<\/h2>\n\n\n\n
\"Discover<\/a><\/figure>\n\n\n\n

This image is a link to the MacOdrum Library. This means that the image must have alt text to outline what will happen if the user clicks on the image. In this instance it reads:<\/p>\n\n\n\n

Discover more information about the MacOdrum<\/em> Library.<\/em><\/p>\n\n\n\n

Example of less accessible practices<\/h2>\n\n\n\n

This image has no alt text. (Worse still: it conveys the message in text on the image.)<\/p>\n\n\n\n

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

This means the user with a screen reader does not know what the link will do, and that entire URL will be read out to them. <\/p>\n\n\n\n

Additional benefits<\/h2>\n\n\n\n