{"id":100,"date":"2018-01-17T07:00:00","date_gmt":"2018-01-17T14:00:00","guid":{"rendered":"https:\/\/coreassistance.com\/tips\/?p=100"},"modified":"2018-01-17T10:04:56","modified_gmt":"2018-01-17T17:04:56","slug":"write-great-alternative-text-for-images","status":"publish","type":"post","link":"https:\/\/coreassistance.com\/tips\/2018\/01\/17\/write-great-alternative-text-for-images\/","title":{"rendered":"Write Great Alternative Text for Images"},"content":{"rendered":"<p>The <code>&lt;img&gt;<\/code> element has an <code>alt<\/code> attribute that should be populated with text describing that image.  The content of an image&#8217;s <code>alt<\/code> attribute is used in various situations:<\/p>\n<ul>\n<li>Search engines can&#8217;t see images the same way people do, so they&#8217;re going to look at the content of the <code>alt<\/code> attribute instead.<\/li>\n<li>When people have their browsers configured to not load images (which is more people than you might think; many have restrictive data and\/or bandwidth limits).<\/li>\n<li>Non graphical browsers, including screen readers, will use the text in the <code>alt<\/code> attribute in place of the image.<\/li>\n<li>If the image fails to load, or the image format is not supported by the browser, the alternative text will be displayed instead.<\/li>\n<\/ul>\n<p>If you find yourself wondering what you should put in an <code>alt<\/code> attribute ask yourself this question: <strong>If you were describing this website to a friend over the phone, and they had no way to view it, how would you describe this image?  The answer is what you put for the value of that image&#8217;s <code>alt<\/code> attribute.<\/strong><\/p>\n<p>Some image elements are not integral to the content of the page, like decorative images.  If you wouldn&#8217;t mention a particular image to your friend on the phone that <code>&lt;img&gt;<\/code> element should still have an <code>alt<\/code> attribute, but its value should be an empty string, like this:<\/p>\n<pre><code>&lt;img alt=\"\" src=\"...\"&gt;<\/code><\/pre>\n<p>An <code>alt<\/code> attribute with an empty string indicates that non-visual browsers, like screen readers, can simply ignore the image.<\/p>\n<p>For images that <em>are<\/em> a key part of the content, but have no appropriate textual description, the <code>alt<\/code> attribute should be omitted entirely (but this is almost never the case).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to write great descriptions for your images to improve accessibility, user experience, and SEO.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-100","post","type-post","status-publish","format-standard","hentry","category-ux"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":7,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/100\/revisions"}],"predecessor-version":[{"id":198,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/100\/revisions\/198"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=100"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=100"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}