{"id":1275,"date":"2019-09-13T12:51:10","date_gmt":"2019-09-13T16:51:10","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=1275"},"modified":"2019-09-13T13:56:05","modified_gmt":"2019-09-13T17:56:05","slug":"image-alt-text-is-short","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/image-alt-text-is-short\/","title":{"rendered":"Image Alt Text is Short"},"content":{"rendered":"<p>This ADA issue is one of the Level AA issues you might encounter in your Monsido reports, that can be extremely confusing at first.  What does it mean?  Does it mean that the alt-text is short and needs to be longer?<\/p>\n<p>Actually that is not how to read the Monsido issues.  What it is really saying is that the image alt-text must be short and that the current alt-text may be a bit too long or perhaps the alt text is not as short as possible.  Okay, what does &#8216;not as short as possible&#8217; mean?  If someone attempts to add a long sentence or even several sentences to the alt-text, it may get flagged as possible longer than it needs to be.<\/p>\n<p>Still confused?  Let&#8217;s take a look at a few examples.<\/p>\n<p>In the following figure, you can see that the alt-text associated with the image is essentially the same as the paragraph that came before it.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/09\/091319_1651_ImageAltTex1.png\"><\/p>\n<p>Strictly speaking, this text does not describe the image.  Alt-text should describe the image, not the entire story behind the image.  Perhaps better alt-text might be shortened to: &#8220;Photo of xxxxx named to 2<sup>nd<\/sup> chair Euphonium in All-County Band&#8221; or even, &#8220;Photo of xxxx&#8221;.  This is sufficient because the text before the photo tells the rest of the story.<\/p>\n<p>Another good example (or maybe I should say bad example) of long text is this one:<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/09\/091319_1651_ImageAltTex2.png\"><\/p>\n<p>Here the alt-text goes into far more detail than necessary repeating information that appears directly above this image, but is not part of the image.  Alt-text is supposed to describe the image which is this case is: &#8220;Valencia Collage logo&#8221;.  Nothing more.  Now the interesting thing about this example is that the tag line: &#8220;Learn More&#8221; with an arrow implies that you can click on it to learn more.  But you cannot click on this image.  There is no hyperlink here.  Oops?<\/p>\n<p>Another example found on the same page is this one for CLEP Testing.  Note that alt-text says to click here, but again this is just an image, not a link. You go nowhere when you try to click on it.  Frustrating!<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/09\/091319_1651_ImageAltTex3.png\"><\/p>\n<p>Let&#8217;s go extreme.  The following image has a lot of text that blind people need an alternate way of discovering.  However, the alt-text is so long that it would be like reading a separate page:<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/09\/091319_1651_ImageAltTex4.png\"><\/p>\n<p>Here is what the alt-text actually says:<\/p>\n<blockquote><p>The graphic consists of a vertical column with multiple rows of text. The column is broken into three main sections. The top section has the heading AP Seminar open parenthesis Year 1 close parenthesis. Under this heading are three rows of text, as follows: Team Project and Presentation; Individual Research-Based Essay and Presentation; and End of Course Exam. The middle section has the heading AP Research open parenthesis year 2 close parenthesis. Under this heading are two rows of text as follows: Academic Paper and Presentation and Oral Defense. The bottom section consists of the heading 4 AP Courses and Exams. Underneath the heading is the following text: open parenthesis Taken at any point throughout high school close parenthesis. Along the left side of the vertical column is a bracket labeled AP Capstone Diploma. The bracket includes all three sections of the vertical column. Along the right side of the column is a bracket labeled AP Seminar and Research Certificate. This bracket includes only the AP Seminar and AP Research sections of the column.<\/p><\/blockquote>\n<p>Yeah, that is a bit too long.  Remember blind visitors with screen readers would hear that complete text every time they passed over that image.  What should be done in this case, and in all cases where the image contains a large amount of text, is to include a link close to the image [above, below, to the side] that when clicked displays the full text\/description of the image.  The link alt-text in that case could say something like, &#8220;Click here to open a new widow with an accessible version of the [above\/below] image&#8221;.  The link text might be: Accessible Version of AP Capstone Diploma Image<\/p>\n<p>On a related topic, what if you have an image that has an alt tag with text, but no title tag with text?  That was actually the case of the above image and why hovering over the image did not show any alt-text even though the alt-text field was filled in. Well, blind users may hear the alt-text read to them, but sighted people do not see that alt-text.  Do you want everyone to see the same information?  If so, duplicate the Alt-text into the Title property of the image.  The following image shows a portion of a page that has an image selected.  Notice the image properties shown in the lower portion of the image.  What we call alt-text appears in the Tooltip box and is the text read to blind visitors to the site.  Title text is what sighted people see when they hover a mouse over the image.  To provide the same information to both kinds of visitors, you must duplicate that alt-text in the title field as shown.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/09\/091319_1651_ImageAltTex5.png\"><\/p>\n<p>Okay.  Next time I will take a deep dive into one of the other Accessibility Issue messages.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This ADA issue is one of the Level AA issues you might encounter in your Monsido reports, that can be extremely confusing at first. What does it mean? Does it mean that the alt-text is short and needs to be longer? Actually that is not how to read the Monsido issues. What it is really &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/wordpress.ocps.net\/presenceblog\/image-alt-text-is-short\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Image Alt Text is Short&#8221;<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28,87],"tags":[48,47,67,114],"class_list":["post-1275","post","type-post","status-publish","format-standard","hentry","category-news-related-to-ada-and-accessibility","category-monsido-news","tag-accessibility","tag-ada","tag-alt-text","tag-image-text"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":1345,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/news-content-pages-and-the-advance-data-display-portlet\/","url_meta":{"origin":1275,"position":0},"title":"News Content Pages and the Advance Data Display Portlet","author":"Carlos Hernandez","date":"December 2, 2019","format":false,"excerpt":"If you are using the Advanced Data Display portlet either on a standalone page or as part of a News Content page, you may have added a Featured Image to Page Content area. If you did, you still need to supply Alt-text for this image. \"Where?\" you ask. There is\u2026","rel":"","context":"In &quot;ADA News&quot;","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1117,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/monsido-accessibility-level-a-errors-with-links\/","url_meta":{"origin":1275,"position":1},"title":"Monsido Accessibility Level A Errors with Links","author":"Carlos Hernandez","date":"April 30, 2019","format":false,"excerpt":"This post examines Level A accessibility errors related to links that you can fix. Over the entire district's sites, there are 28 Level A compliance issues that the district must resolve and 8 warning issues at this level. In addition, 54 Level A issues require manual review. Your site may\u2026","rel":"","context":"In &quot;ADA News&quot;","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1252,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/quick-ada-hint-tables-cannot-be-included-as-an-image\/","url_meta":{"origin":1275,"position":2},"title":"Quick ADA Hint: Tables Cannot Be Included as an Image","author":"Carlos Hernandez","date":"August 30, 2019","format":false,"excerpt":"Tables with valuable information cannot be included as an image.\u00a0 They must be created as a table within the portal editor (there is too much information to be conveyed by simply including the text in the Alt-Text of the image.\u00a0 When a visually impaired person attempts to read this page\u2026","rel":"","context":"In &quot;ADA News&quot;","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1307,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/all-img-elements-must-have-an-alt-attribute\/","url_meta":{"origin":1275,"position":3},"title":"All IMG elements must have an ALT attribute","author":"Carlos Hernandez","date":"September 23, 2019","format":false,"excerpt":"While it is true that images added to a web page using the Image Manager button in the content editor menu will not currently allow you to add an image to a content area without entering text into the Alt-Text field, there are still many images throughout the portal where\u2026","rel":"","context":"In &quot;ADA News&quot;","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"Image Manager Button in Edit Menu","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2019\/09\/092019_1721_AllIMGeleme1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1062,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/what-errors-should-i-address-first\/","url_meta":{"origin":1275,"position":4},"title":"What Errors Should I Address First","author":"Carlos Hernandez","date":"April 9, 2019","format":false,"excerpt":"Now that reports from Monsido are being sent out, there are two things you need to know: Because people must be added to Monsido manually, the only people initially added were the site owners, principals and department directors. To add other names, I need the person's: First Name, Last Name\u2026","rel":"","context":"In &quot;ADA News&quot;","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1283,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/blockquote-must-not-be-used-for-indentation\/","url_meta":{"origin":1275,"position":5},"title":"BLOCKQUOTE must not be used for indentation","author":"Carlos Hernandez","date":"September 19, 2019","format":false,"excerpt":"For today's look at ADA\/Accessibility issues reported by Monsido, I have chosen an error that is simple to fix. This error occurs when users or applications attempt to use the BLOCKQUOTE tag to indent text. This is invalid. BLOCKQUOTE can only be used when citing quotations from people or sites\u2026","rel":"","context":"In &quot;ADA News&quot;","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"Use the Indent tool in the Edit toolbar when you want to indent text.","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2019\/09\/091919_1132_BLOCKQUOTEm1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2019\/09\/091919_1132_BLOCKQUOTEm1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2019\/09\/091919_1132_BLOCKQUOTEm1.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1275","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/comments?post=1275"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1275\/revisions"}],"predecessor-version":[{"id":1277,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1275\/revisions\/1277"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=1275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=1275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=1275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}