{"id":970,"date":"2019-02-15T15:49:49","date_gmt":"2019-02-15T20:49:49","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=970"},"modified":"2019-02-15T15:49:52","modified_gmt":"2019-02-15T20:49:52","slug":"alt-text-in-news-articles","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/alt-text-in-news-articles\/","title":{"rendered":"Alt-Text in News Articles"},"content":{"rendered":"<p>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.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/02\/021519_2045_AltTextinNe1.png\"><\/p>\n<p>The &#8216;trick&#8217; here is to remember that for image and even hyperlinks, the alt-text goes into an attribute called &#8216;TITLE&#8217;.   When you create or edit the <strong>News Content<\/strong> page, look at the section: <strong>Page Content<\/strong>.  As shown in the image below, a <strong>Featured Image<\/strong> was defined for the news article, but there was no <strong>Image Title<\/strong> supplied.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/02\/021519_2045_AltTextinNe2.png\"><\/p>\n<p>Simply add text to this property as you would for any image or hyperlink that requires alt-text such as the following:<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/02\/021519_2045_AltTextinNe3.png\"><\/p>\n<p>Publish your changes.<\/p>\n<p>Now when you go back to the home page and check the Recent News you will see the alt-text when you hover over the image for the news story.  Well, actually, you may have to wait a few minutes because this change is not reflected immediately.  Changes to a news content page are only updated in the Data Summary portlet ever 1 to 15 minutes depending on the setting in the portlet properties.  If you do not want to wait for the Data Summary portlet to refresh its contents, you can &#8216;trick&#8217; the portlet into updating by going into Design Mode on the Home page (or where ever you placed the Data Summary portlet) and clicking the edit button (the pencil in the header) to display the Settings dialog<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/02\/021519_2045_AltTextinNe4.png\"><\/p>\n<p>Then, without making any changes to any of the settings, simply click the Update Settings button in the bottom right corner of the dialog.  This forces the portlet to refresh by going out to the select News Section page and reloading information from all the News Content pages beneath it.  When you turn off Design Mode and hover over the news story image, you now see the Alt-Text for that image.<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/02\/021519_2045_AltTextinNe5.png\"><\/p>\n<p>For district sites that may use the News Section Page, News Content Pages, and Data Summary portlet to view and select news articles, this process works exactly the same way.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8216;trick&#8217; here is to remember that for image and even hyperlinks, the alt-text goes into an attribute called &#8216;TITLE&#8217;. When you &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/wordpress.ocps.net\/presenceblog\/alt-text-in-news-articles\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Alt-Text in News Articles&#8221;<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":969,"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,33,31,36],"tags":[47,59,51],"class_list":["post-970","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news-related-to-ada-and-accessibility","category-post-that-explains-how-to-perform-a-specific-activity","category-news-related-specifically-to-school-sites","category-post-showing-a-specific-tip-or-trick-related-to-web-sites","tag-ada","tag-images","tag-tips"],"jetpack_featured_media_url":"https:\/\/wordpress.ocps.net\/wp-content\/uploads\/2019\/02\/021519_2045_AltTextinNe5.png","jetpack-related-posts":[{"id":1345,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/news-content-pages-and-the-advance-data-display-portlet\/","url_meta":{"origin":970,"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":510,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/annotating-images\/","url_meta":{"origin":970,"position":1},"title":"Annotating Images","author":"Carlos Hernandez","date":"March 14, 2018","format":false,"excerpt":"At a recent Open Lab, the question came up as to why we cannot add captions at the bottoms of all images. Perhaps they are thinking about captions that appear beneath images in many books and magazines. Or perhaps they noticed that captions are available at the bottom of the\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":970,"position":2},"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":1307,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/all-img-elements-must-have-an-alt-attribute\/","url_meta":{"origin":970,"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":767,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/accessibility-of-images-in-pdfs\/","url_meta":{"origin":970,"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":1415,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/alt-text-for-images-with-text\/","url_meta":{"origin":970,"position":5},"title":"Alt Text for Images with Text","author":"Carlos Hernandez","date":"January 27, 2020","format":false,"excerpt":"Background If you use an image that contains text that you want site visitors to read, that text must be included elsewhere on the page so that screen readers can read the text for the visually impaired and blind. In most cases, the image can be used as long as\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":"Backstage Menu within Micrsoft Word","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2020\/01\/012720_1804_AltTextforI1.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/970","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=970"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/970\/revisions"}],"predecessor-version":[{"id":973,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/970\/revisions\/973"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media\/969"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}