{"id":105,"date":"2006-03-02T14:50:21","date_gmt":"2006-03-02T14:50:21","guid":{"rendered":"http:\/\/lachy.id.au\/log\/2006\/03\/accessible-alternate-content"},"modified":"2006-04-30T23:24:01","modified_gmt":"2006-04-30T23:24:01","slug":"accessible-alt","status":"publish","type":"post","link":"https:\/\/lachy.id.au\/log\/2006\/03\/accessible-alt","title":{"rendered":"Accessible Alternate Content"},"content":{"rendered":"

For accessibility reasons, it\u2019s important to specify alternate content\r\n\tfor any multimedia including images, audio, video, etc. When a\r\n\ttext alternative is provided for an image, it should serve the same purpose\r\n\tas the image itself and not just describe what it looks like; and similarly\r\n\tfor other multimedia content. However, there are some cases where it\u2019s\r\n\timportant to know that the alternate content is replacing an image in order\r\n\tto give some context, even if the user can’t actually see the image (either\r\n\tby choice or phyisical limitation).<\/p>\r\n

For example, take a recent post from Joe Clark<\/cite> \u2013 a well\r\n\trespected accessibility consultant \u2013 entitled Kills\r\n\tBugs Dead<\/a><\/cite>. When I read this article\r\n\tin my feed reader, which is configured to view plain-text only (no images),\r\n\tthis is what I read:<\/p>\r\n

\r\n\t

Truck fender has illustrations of six green-and-yellow grasshoppers in workboots\r\n\t\tand shades striking different poses, with the last two seated and stretched\r\n\t\tout on its back<\/p>\r\n<\/blockquote>\r\n

After reading that, I had no clue what he was talking about. I had no\r\n\tidea what truck fender he was talking about, let alone having knowledge of\r\n\tany grasshoppers. Once I loaded the article in my browser and saw a photograph\r\n\tof a truck with grasshoppers as described, it suddenly became clear: the\r\n\tarticle was about the image itself and since I didn\u2019t know there was an image,\r\n\tit was read out of context and didn\u2019t make any sense.<\/p>\r\n

A few weeks later, in a recent instant messaging (IM) discussion with Charl\r\n\t\tvan Niekerk<\/cite>, we were discussing his alternate content (or lack\r\n\t\tthereof) for an image he\u2019d used in an article entitled The\r\n\tguilty one at Koeberg<\/a><\/cite>. As in\r\n\tJoe Clark\u2019s case, Charl\u2019s article was also about the image and when\r\n\tI first read it in my feed reader, this is part of what I read:<\/p>\r\n\r\n

\r\n

South Africans might enjoy this one. \ud83d\ude42<\/p>\r\n

Now we know! \ud83d\ude42<\/p>\r\n<\/blockquote>\r\n\r\n

In this case, not only is it important to know what the image says, it\u2019s\r\n\timportant to know that there is an image between those two lines because\r\n\tit gives some context to the other content around it. Additionally, just\r\n\tbecause the user may be viewing the content without images enabled in one\r\n\tenvironment, that doesn\u2019t mean the user can\u2019t see the image at all and so\r\n\tthere should be a way for the user to access it, if desired.<\/p>\r\n

To summarise, these are the requirements for a solution to this problem:<\/p>\r\n

    \r\n\t
  • Make it clear that there is an image being discussed.<\/li>\r\n\t
  • Provide suitable alternate content for where the image is not available.<\/li>\r\n\t
  • Provide easy access to the image for the user to view.<\/li>\r\n<\/ul>\r\n

    The first issue may be easily addressed by prepending the phrase \u201cImage:\u201d or \u201cPhotograph\r\n\tof\u2026\u201d to the alternate content and the second point is addressed\r\n\tby actually providing alternate content. But the third point is a little\r\n\ttricker.<\/p>\r\n

    One way to do this is with a hyperlink, but unfortunately most images are\r\n\tincluded using the img<\/code> element, which only allows plain text with no markup. In\r\n\tCharl\u2019s case, he made use of the object<\/code> element which has a much richer\r\n\tcontent model and allows things like hyperlinks within. His markup now\r\n\tlooks like this (URIs modified to make the example shorter):<\/p>\r\n

    <object type=\"image\/jpeg\" data=\"homer.jpg\">\r\n  <a href=\" homer.jpg\" type=\"image\/jpeg\">Image: Eskom \u2013\r\n     Koeberg Nuclear Power Plant - Reactor Maintainance,\r\n     Head of Maintainance: Homer J. Simpson<\/a>\r\n<\/object><\/code><\/pre>\r\n\r\n
    As you can see, this now clearly addresses all three requirements.  But\r\n\twhat about the average author that uses the good old img<\/code> element?   One\r\n\talternative is to make the image itself a hyperlink, like this:<\/p>\r\n\r\n
    <a href=\" homer.jpg\" type=\"image\/jpeg\">\r\n  <img src=\"homer.jpg\" alt=\"Image: Eskom \u2013\r\n     Koeberg Nuclear Power Plant - Reactor Maintainance,\r\n     Head of Maintainance: Homer J. Simpson\"><\/a><\/code><\/pre>\r\n\r\n
    Another alternative is to place a hyperlink as text after the image, like\r\n\tthis:<\/p>\r\n\r\n
    <img src=\"homer.jpg\" alt=\"Image: Eskom \u2013\r\n    Koeberg Nuclear Power Plant - Reactor Maintainance,\r\n    Head of Maintainance: Homer J. Simpson\">\r\n<a href=\"homer.jpg\" type=\"image\/jpeg\">(view image)<\/a><\/code><\/pre>\r\n\r\n
    There may be other, possibly more accessible, alternatives I couldn\u2019t\r\n\tthink of.  Let me know.  What do you think of these methods and how\r\n\twould you improve them?<\/p>","protected":false},"excerpt":{"rendered":"Discussion of how to improve the accessibility of alternate content for images.","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,2],"tags":[],"class_list":["post-105","post","type-post","status-publish","format-standard","hentry","category-accessibility","category-markup"],"_links":{"self":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/comments?post=105"}],"version-history":[{"count":0,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/posts\/105\/revisions"}],"wp:attachment":[{"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/media?parent=105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/categories?post=105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lachy.id.au\/log\/wp-json\/wp\/v2\/tags?post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}