{"id":1243,"date":"2019-08-13T10:37:50","date_gmt":"2019-08-13T14:37:50","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=1243"},"modified":"2019-08-13T11:13:05","modified_gmt":"2019-08-13T15:13:05","slug":"hyperlinks-with-images-rather-than-link-text","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/hyperlinks-with-images-rather-than-link-text\/","title":{"rendered":"Hyperlinks with Images Rather than Link Text"},"content":{"rendered":"<p>A common occurrence is to have a hyperlink that uses an image rather than Link Text.  In these situations, the alt text for the image and link must appear in the &lt;img&gt; tag&#8217;s &#8216;alt&#8217; attribute.  There are many cases where this has been left blank or as an empty string.  Even if the image may appear to be decoration, that fact that clicking on the image causes the hyperlink in which the image is embedded to go to another page or site requires that the alt text describe the link destination.  A typical example is shown in the following image.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/08\/081319_1437_Hyperlinksw1.png\" alt=\"\"><\/p>\n<p>When you edit a content portlet and select an image from that page (as shown by the red circle with a &#8216;1&#8217; in it), the image is highlighted and image properties appears at the bottom of the edit dialog box.   The first line of the properties (red circle with a &#8216;2&#8217; in it) shows the hierarchy of tags which surround the image.  As you can see in the figure above, the anchor tag (hyperlink) has an image tag (IMG) inside of it.  You can also see that the <strong>Tooltip<\/strong> and <strong>Title<\/strong> of the image are empty.  You must enter text in the Tooltip and Title field (It can be the same text) that describes what happens when you click on the image.  For the above example, appropriate text might be: <strong>Go to the Florida Bright Futures Scholarship Program website<\/strong> as shown in the following figure.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/08\/081319_1437_Hyperlinksw2.png\" alt=\"\"><\/p>\n<p>At this point, you can publish the page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A common occurrence is to have a hyperlink that uses an image rather than Link Text. In these situations, the alt text for the image and link must appear in the &lt;img&gt; tag&#8217;s &#8216;alt&#8217; attribute. There are many cases where this has been left blank or as an empty string. Even if the image may &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/wordpress.ocps.net\/presenceblog\/hyperlinks-with-images-rather-than-link-text\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Hyperlinks with Images Rather than Link Text&#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,30,33,34,32,31],"tags":[48,47,67,50],"class_list":["post-1243","post","type-post","status-publish","format-standard","hentry","category-news-related-to-ada-and-accessibility","category-news-related-to-site-governance-at-ocps","category-post-that-explains-how-to-perform-a-specific-activity","category-something-to-think-about-related-to-web-sites","category-news-related-to-internet-and-intranet-sites","category-news-related-specifically-to-school-sites","tag-accessibility","tag-ada","tag-alt-text","tag-links"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":1307,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/all-img-elements-must-have-an-alt-attribute\/","url_meta":{"origin":1243,"position":0},"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":1018,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/do-users-really-want-to-see-the-url-of-your-hyperlinks\/","url_meta":{"origin":1243,"position":1},"title":"Do Users Really Want to See the URL of Your Hyperlinks?","author":"Carlos Hernandez","date":"March 5, 2019","format":false,"excerpt":"Working with links When you enter a hyperlink within the content area of a page, the link has to surround either text or an image. (If not, the link is still checked whether it is valid or broken, but it is not visible on the page.) On many pages, I've\u2026","rel":"","context":"In &quot;Tips\/Tricks&quot;","block_context":{"text":"Tips\/Tricks","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/post-showing-a-specific-tip-or-trick-related-to-web-sites\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1355,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/style-and-consistency-part-1-links\/","url_meta":{"origin":1243,"position":2},"title":"Style and Consistency \u2013 Part 1 &#8211; Links","author":"Carlos Hernandez","date":"December 4, 2019","format":false,"excerpt":"Style and consistency on your web pages are very important issues when publishing your finished web page. I am going to take a portion of a web page and highlight some of the things you need to review before publishing your next web page. The following is a portion of\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":1595,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/short-topics-image-and-link-alt-text\/","url_meta":{"origin":1243,"position":3},"title":"Short Topics: Image and Link Alt-text","author":"Carlos Hernandez","date":"December 7, 2020","format":false,"excerpt":"Image Alt-text Image and link alt-text is extremely important to the visually impaired who cannot see either the picture or the link text (link text is what appears on the page). Often the alt-text is the only clue to these people to tell them what the picture or link is\u2026","rel":"","context":"In &quot;Governance News&quot;","block_context":{"text":"Governance News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-site-governance-at-ocps\/"},"img":{"alt_text":"Example of poor alt-text for an image that tells the viewer nothing about the image.","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2020\/11\/112720_1355_ShortTopics1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":767,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/accessibility-of-images-in-pdfs\/","url_meta":{"origin":1243,"position":4},"title":"Accessibility of Images in PDFs","author":"Carlos Hernandez","date":"August 29, 2018","format":false,"excerpt":"Accessibility of Images in PDFs follows essentially the same rules as images on web pages. There are three basic types of images: Decoration Example of something Actual content All three types of images must have alt-text associated with them. However, the contents of that text varies based on the image\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":970,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/alt-text-in-news-articles\/","url_meta":{"origin":1243,"position":5},"title":"Alt-Text in News Articles","author":"Carlos Hernandez","date":"February 15, 2019","format":false,"excerpt":"Recently the question has come up how to place alt-text on the image displayed by news content pages in the Data Summary portlets. There is no property line for this image called: Alt-Text. The 'trick' here is to remember that for image and even hyperlinks, the alt-text goes into an\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":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1243","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=1243"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1243\/revisions"}],"predecessor-version":[{"id":1246,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1243\/revisions\/1246"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=1243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=1243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=1243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}