{"id":1387,"date":"2020-01-12T23:57:00","date_gmt":"2020-01-13T04:57:00","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=1387"},"modified":"2020-01-10T15:05:02","modified_gmt":"2020-01-10T20:05:02","slug":"alt-text-for-decorative-images","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/alt-text-for-decorative-images\/","title":{"rendered":"Alt Text for Decorative Images"},"content":{"rendered":"

What is a decorative image when applied to a webpage? It is any image that does not add information to the content of the page. It could be part of the page design such as a border around the page, a border around a paragraph or topic, or even horizontal or vertical lines that separate sections. Anything added to the page to make it more visually attractive is decorative. Some images may require extensive explanatory text that may already be on the page adjacent to the image. Since the content is already on the page, the image itself is simply decorative. It can also be an image that is included as part of a text link where the text in the link is already descriptive. In all of these cases, the alt attribute of the image can be set to a null value (alt=””) to indicate to users of screen readers that the image can be ignored. In fact, in these cases, any alt text would only serve to distract the user from the topic. On the other hand, you cannot simply leave out the alt attribute completely because some screen readers will then read aloud the image’s filename, which no one really cares about.<\/p>\n

So again, what are some common types of images that are considered decorative?<\/p>\n

    \n
  1. \n
    Images used as part of the page design such as the line under the text ‘Quick Links’ in the following image is purely decorative as it adds nothing to the content.<\/div>\n

    \"Example<\/li>\n

  2. \n
    Decorative images can be part of a text link such as the ones found in the Quick Links section.<\/div>\n

    \"Example<\/li>\n

  3. \n
    Images with adjacent text alternative<\/div>\n

    \"Example<\/li>\n

  4. \n
    Often an image is used only for ambiance or to make the page more visually attractive. (Note this also the case with most banner images)<\/div>\n

    \"Example<\/li>\n<\/ol>\n

    In each of these cases, the alt text for the image is simply alt=””. The title attribute is optional in these cases. If the title attribute is present, it must also be set to the null string. By the way, the null string is represented by a pair of double quotes with no characters between them. It is not represented by alt=null or alt=”null”. Therefore as an example, the HTML for the image in the last example above would be:<\/p>\n

    <img src=”\/UserFiles\/Servers\/Server_80110\/Image\/Spring%20Lakes%20Home\/Media%20Center\/Policies\/j0439526.jpg” alt=”” title=”” style=”width: 30%; height: 21%; float: left;”>
    \n<\/span><\/p>\n

    Next time, I’ll take a ‘look’ at functional images.
    \n<\/span><\/p>\n

    Return to the beginning of the Alt Text Series<\/span><\/a>.
    \n<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

    What is a decorative image when applied to a webpage? It is any image that does not add information to the content of the page. It could be part of the page design such as a border around the page, a border around a paragraph or topic, or even horizontal or vertical lines that separate … <\/p>\n

    Continue reading “Alt Text for Decorative Images”<\/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],"tags":[48,67,136,59],"class_list":["post-1387","post","type-post","status-publish","format-standard","hentry","category-news-related-to-ada-and-accessibility","tag-accessibility","tag-alt-text","tag-decorative","tag-images"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":607,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/frequently-asked-questions-about-accessible-images\/","url_meta":{"origin":1387,"position":0},"title":"Frequently Asked Questions About Accessible Images","author":"Carlos Hernandez","date":"June 14, 2018","format":false,"excerpt":"Today's blog post is from a guest contributor, Michael Graf. Michael is part of the OCPS legal department and is responsible for overseeing ADA compliance for the OCPS family of web sites. He reminds us all that ADA compliance within our web sites is a matter of concern for all\u2026","rel":"","context":"In "ADA News"","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 Property Settings - Remember the Alt-Text","src":"https:\/\/i0.wp.com\/wordpress.ocps.net\/wp-content\/uploads\/2018\/06\/ADA01-278x300.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1345,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/news-content-pages-and-the-advance-data-display-portlet\/","url_meta":{"origin":1387,"position":1},"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 "ADA News"","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":1387,"position":2},"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 "ADA News"","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":[]},{"id":1360,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/the-alt-text-series\/","url_meta":{"origin":1387,"position":3},"title":"The Alt Text Series","author":"Carlos Hernandez","date":"January 7, 2020","format":false,"excerpt":"This post begins a series of posts on how to use the alt attribute with images in a variety of different scenarios. Not all images on a web page are the same. The purpose of the image on a webpage page will determine how to use the alt attribute. One\u2026","rel":"","context":"In "ADA News"","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":1387,"position":4},"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 "ADA News"","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":1507,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/tale-of-the-alt-title-and-longdesc-attributes\/","url_meta":{"origin":1387,"position":5},"title":"Tale of the alt, title and longdesc Attributes","author":"Carlos Hernandez","date":"July 12, 2020","format":false,"excerpt":"Most of you probably know that the alt attribute found in the tag is used by screen readers to assist the visually impaired and blind. What is alt text in the first place? It is the text that appears in place of the image if the user turns off\u2026","rel":"","context":"In "ADA News"","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\/1387","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=1387"}],"version-history":[{"count":2,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1387\/revisions"}],"predecessor-version":[{"id":1389,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1387\/revisions\/1389"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=1387"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=1387"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=1387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}