<span class="span-reading-time rt-reading-time" style="display: block;"><span class="rt-label rt-prefix">Reading Time: </span> <span class="rt-time"> 2</span> <span class="rt-label rt-postfix">minutes</span></span> <p>Writing alternate text for non-text can be hard. This widget can help you decide which approach to take.</p> <style> .container-fluid > form { min-height: 208px; } .form-group, p.error { display: none; } p.error { color: red; } .btn-info { margin: 1em 0 0 1.1em; } fieldset { border: 0px; } fieldset .form-check input[type="radio"] { position: absolute; left: 3em; top: 0; z-index: -1; } fieldset .form-check label { display: inline-block; padding: 7px 15px; margin: 0 0 6px 0; position: relative; background: #3a817e; border: 1px solid #3a817e; color: #ffffff; font-weight: bold; cursor: pointer; width: 50% !important; max-width: 6em; font-size: 1.4em; } fieldset .form-check input[type="radio"]:checked + label { background: #ffa500; border: 1px solid #3a817e; } </style> <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <p style="font-size: 40px; font-weight: 500;">Alt text decide-o-matic </p> <noscript>This application requires javascript. Please make sure javascript is enabled in your browser’s settings.</noscript> <form> <fieldset class="form-group" id="intro"> <legend>About this</legend> <p>This decision tree will help you understand how best to include text alternatives for image-based content.</p> <p>It is based on the <a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">W3C’s alt text decision tree</a>.</p> <p>All errors are mine. Give feedback, tell me what’s broken, by leaving a comment here, <a href="https://mastodon.scot/@se_davidobrien" rel="noopener" target="_blank">or via Mastodon</a>.</p> <button class="btn btn-info" id="b">Start now</button> </fieldset> <fieldset class="form-group" id="q1"> <legend>Does the image contain text?</legend> <div class="form-check"> <input class="form-check-input" id="r1y" name="r1" type="radio" value="yes"/> <label class="form-check-label" for="r1y">Yes</label> </div> <div class="form-check"> <input class="form-check-input" id="r1n" name="r1" type="radio" value="no"/> <label class="form-check-label" for="r1n">No</label> </div> <button class="btn btn-info" id="b1">Next</button> <p class="error">Please select either Yes or No, then click Next</p> </fieldset> <fieldset class="form-group" id="q2"> <legend>Is the text also present as real text nearby?</legend> <div class="form-check"> <input class="form-check-input" id="r2y" name="r2" type="radio" value="0to249"/> <label class="form-check-label" for="r2y">Yes</label> </div> <div class="form-check"> <input class="form-check-input" id="r2n" name="r2" type="radio" value="Over250"/> <label class="form-check-label" for="r2n">No</label> </div> <button class="btn btn-info" id="b2">Next</button> <p class="error">Please select either Yes or No, then click Next</p> </fieldset> <fieldset class="form-group" id="q3"> <legend>Is the text  only shown for visual effects?</legend> <div class="form-check"> <input class="form-check-input" id="r3y" name="r3" type="radio" value="yes"/> <label class="form-check-label" for="r3y">Yes</label> </div> <div class="form-check"> <input class="form-check-input" id="r3n" name="r3" type="radio" value="no"/> <label class="form-check-label" for="r3n">No</label> </div> <button class="btn btn-info" id="b3">Next</button> <p class="error">Please select either Yes or No, then click Next</p> </fieldset> <fieldset class="form-group" id="q4"> <legend>Does the text have a specific function, for example as an icon?</legend> <div class="form-check"> <input class="form-check-input" id="r4y" name="r4" type="radio" value="yes"/> <label class="form-check-label" for="r4y">Yes</label> </div> <div class="form-check"> <input class="form-check-input" id="r4n" name="r4" type="radio" value="no"/> <label class="form-check-label" for="r4n">No</label> </div> <button class="btn btn-info" id="b4">Next</button> <p class="error">Please select either Yes or No, then click Next</p> </fieldset> <fieldset class="form-group" id="q5"> <legend>Is the text in the image not present otherwise?</legend> <div class="form-check"> <input class="form-check-input" id="r5y" name="r5" type="radio" value="lessThan45m"/> <label class="form-check-label" for="r5y">Yes</label> </div> <div class="form-check"> <input class="form-check-input" id="r5n" name="r5" type="radio" value="over45m"/> <label class="form-check-label" for="r5n">No</label> </div> <button class="btn btn-info" id="b5">Next</button> <p class="error">Please select either Yes or No, then click Next</p> </fieldset> <fieldset class="form-group" id="q6"> <legend>Is the image used in a link or a button, and would it be hard or impossible to understand what the link or the button does, if the image wasn’t there?</legend> <div class="form-check"> <input class="form-check-input" id="r6y" name="r6" type="radio" value="Retail"/> <label class="form-check-label" for="r6y">Yes</label> </div> <div class="form-check"> <input class="form-check-input" id="r6n" name="r6" type="radio" value="Nursery"/> <label class="form-check-label" for="r6n">No</label> </div> <button class="btn btn-info" id="b6">Next</button> <p class="error">Please select either Yes or No, then click Next</p> </fieldset> <fieldset class="form-group" id="q7"> <legend>Does the image contribute meaning to the current page or context?</legend> <div class="form-check"> <input class="form-check-input" id="r7y" name="r7" type="radio" value="over51k"/> <label class="form-check-label" for="r7y">Yes</label> </div> <div class="form-check"> <input class="form-check-input" id="r7n" name="r7" type="radio" value="under51k"/> <label class="form-check-label" for="r7n">No</label> </div> <button class="btn btn-info" id="b7">Next</button> <p class="error">Please select either Yes or No, then click Next</p> </fieldset> <fieldset class="form-group" id="q8"> <legend>Is the image a simple graphic or photograph?</legend> <div class="form-check"> <input class="form-check-input" id="r8y" name="r8" type="radio" value="yes"/> <label class="form-check-label" for="r8y">Yes</label> </div> <div class="form-check"> <input class="form-check-input" id="r8n" name="r8" type="radio" value="no"/> <label class="form-check-label" for="r8n">No</label> </div> <button class="btn btn-info" id="b8">Next</button> <p class="error">Please select either Yes or No, then click Next</p> </fieldset> <fieldset class="form-group" id="q9"> <legend>Is the image a a graph or complex piece of information?</legend> <div class="form-check"> <input class="form-check-input" id="r9y" name="r9" type="radio" value="yes"/> <label class="form-check-label" for="r9y">Yes</label> </div> <div class="form-check"> <input class="form-check-input" id="r9n" name="r9" type="radio" value="no"/> <label class="form-check-label" for="r9n">No</label> </div> <button class="btn btn-info" id="b9">Next</button> <p class="error">Please select either Yes or No, then click Next</p> </fieldset> <fieldset class="form-group" id="q10"> <legend>Does the image show content that is redundant to real text nearby?</legend> <div class="form-check"> <input class="form-check-input" id="r10y" name="r10" type="radio" value="yes"/> <label class="form-check-label" for="r10y">Yes</label> </div> <div class="form-check"> <input class="form-check-input" id="r10n" name="r10" type="radio" value="no"/> <label class="form-check-label" for="r10n">No</label> </div> <button class="btn btn-info" id="b10">Next</button> <p class="error">Please select either Yes or No, then click Next</p> </fieldset> <fieldset class="form-group" id="q11"> <legend>Is the image purely decorative or not intended for the user?</legend> <div class="form-check"> <input class="form-check-input" id="r11y" name="r11" type="radio" value="yes"/> <label class="form-check-label" for="r11y">Yes</label> </div> <div class="form-check"> <input class="form-check-input" id="r11n" name="r11" type="radio" value="no"/> <label class="form-check-label" for="r11n">No</label> </div> <button class="btn btn-info" id="b11">Next</button> <p class="error">Please select either Yes or No, then click Next</p> </fieldset> <!-- Answers --> <fieldset class="form-group" id="a1"> <h2>Use alt=””</h2> <p>Use an empty alt attribute. See <a href="https://www.w3.org/WAI/tutorials/images/decorative/" rel="noopener" target="_blank">Decorative Images</a>.</p> <button class="restart btn btn-info">Start over</button> </fieldset> <fieldset class="form-group" id="a2"> <h2>Communicate the function</h2> <p>Use the alt attribute to communicate the function of the image. See <a href="https://www.w3.org/WAI/tutorials/images/functional/" rel="noopener" target="_blank">Functional Images</a>.</p> <button class="restart btn btn-info">Start over</button> </fieldset> <fieldset class="form-group" id="a3"> <h2>Include the text</h2> <p>Use the alt attribute to include the text of the image. See <a href="https://www.w3.org/WAI/tutorials/images/textual/#image-of-styled-text-with-decorative-effect" rel="noopener" target="_blank">Images of Text</a>.</p> <button class="restart btn btn-info">Start over</button> </fieldset> <fieldset class="form-group" id="a4"> <h2>Communicate the destination of the link</h2> <p>Use the alt attribute to communicate the destination of the link or action taken. See <a href="https://www.w3.org/WAI/tutorials/images/functional/" rel="noopener" target="_blank">Functional Images</a>.</p> <button class="restart btn btn-info">Start over</button> </fieldset> <fieldset class="form-group" id="a5"> <h2>Briefly describe the image</h2> <p>Use a brief description of the image in a way that conveys that meaning in the alt attribute. See <a href="https://www.w3.org/WAI/tutorials/images/informative/" rel="noopener" target="_blank">Informative Images</a>.</p> <button class="restart btn btn-info">Start over</button> </fieldset> <fieldset class="form-group" id="a6"> <h2>Include the information elsewhere</h2> <p>Include the information contained in the image elsewhere on the page. See <a href="https://www.w3.org/WAI/tutorials/images/complex/" rel="noopener" target="_blank">Complex Images</a>.</p> <button class="restart btn btn-info">Start over</button> </fieldset> <fieldset class="form-group" id="a7"> <h2>Use alt=””</h2> <p>Use an empty alt attribute. See (redundant) <a href="https://www.w3.org/WAI/tutorials/images/functional/#example-2-logo-image-within-link-text" rel="noopener" target="_blank">Functional Images</a>.</p> <button class="restart btn btn-info">Start over</button> </fieldset> </form> </div> <!-- partial --> <!-- MOLONGUI AUTHORSHIP PLUGIN 5.0.8 --> <!-- https://www.molongui.com/wordpress-plugin-post-authors --> <div class="molongui-clearfix"></div><div class="m-a-box" data-author-archived="" data-author-id="3" data-author-type="user" data-box-layout="slim" data-box-position="below" data-multiauthor="false"><div class="m-a-box-container"><div class="m-a-box-tab m-a-box-content m-a-box-profile" data-author-ref="user-3" data-profile-layout="layout-1" itemid="https://design.scotentblog.co.uk/author/davidobrien/" itemscope="" itemtype="https://schema.org/Person"><div class="m-a-box-content-top"></div><div class="m-a-box-content-middle"><div class="m-a-box-item m-a-box-avatar" data-source="local"><a class="m-a-box-avatar-url" href="https://mastodon.scot/@se_davidobrien"><img alt="" class="avatar avatar-150 photo lazy" data-sizes="100vw" data-src="https://i0.wp.com/design.scotentblog.co.uk/wp-content/uploads/2017/01/08304af.jpg?resize=150%2C150&amp;ssl=1" data-srcset="https://i0.wp.com/design.scotentblog.co.uk/wp-content/uploads/2017/01/08304af.jpg?w=398&amp;ssl=1 398w, https://i0.wp.com/design.scotentblog.co.uk/wp-content/uploads/2017/01/08304af.jpg?resize=150%2C150&amp;ssl=1 150w, https://i0.wp.com/design.scotentblog.co.uk/wp-content/uploads/2017/01/08304af.jpg?resize=300%2C300&amp;ssl=1 300w, https://i0.wp.com/design.scotentblog.co.uk/wp-content/uploads/2017/01/08304af.jpg?resize=100%2C100&amp;ssl=1 100w" decoding="async" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" width="150"/></a></div><div class="m-a-box-item m-a-box-data"><div class="m-a-box-name m-a-box-title"><h5 itemprop="name"><a class="m-a-box-name-url" href="https://design.scotentblog.co.uk/author/davidobrien/" itemprop="url"> David O'Brien</a></h5></div><div class="m-a-box-item m-a-box-meta"><a href="https://mastodon.scot/@se_davidobrien" target="_blank"><span class="m-a-box-string-web">Website</span></a> <span class="m-a-box-meta-divider">|</span>  <a class="m-a-box-data-toggle" href="https://design.scotentblog.co.uk/toolbox/alt-text-decide-o-matic/" rel="nofollow"><span class="m-a-box-string-more-posts">+ posts</span><span class="m-a-box-string-bio" style="display:none">Bio</span></a></div><div class="m-a-box-bio" itemprop="description"><p>I'm a service designer in Scottish Enterprise's unsurprisingly-named service design team. I've been a content designer, editor, UX designer and giant haystacks developer on the web for (gulp) over 25 years.</p></div><div class="m-a-box-related" data-related-layout="layout-1"><div class="m-a-box-item m-a-box-related-entries" style="display:none;"><ul><li><div class="m-a-box-related-entry" itemscope="" itemtype="http://schema.org/CreativeWork"><div class="molongui-display-none" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><div itemprop="name">David O'Brien</div><div itemprop="url">https://design.scotentblog.co.uk/author/davidobrien/</div></div><div class="m-a-box-related-entry-title"><i class="m-a-icon-doc"></i><a class="molongui-remove-underline" href="https://design.scotentblog.co.uk/good-services-scale-an-interactive-assessment/" itemprop="url"><span itemprop="headline">Good Services Scale: an interactive assessment</span></a></div></div></li><li><div class="m-a-box-related-entry" itemscope="" itemtype="http://schema.org/CreativeWork"><div class="molongui-display-none" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><div itemprop="name">David O'Brien</div><div itemprop="url">https://design.scotentblog.co.uk/author/davidobrien/</div></div><div class="m-a-box-related-entry-title"><i class="m-a-icon-doc"></i><a class="molongui-remove-underline" href="https://design.scotentblog.co.uk/making-our-account-managers-appy/" itemprop="url"><span itemprop="headline">Making our account managers appy</span></a></div></div></li><li><div class="m-a-box-related-entry" itemscope="" itemtype="http://schema.org/CreativeWork"><div class="molongui-display-none" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><div itemprop="name">David O'Brien</div><div itemprop="url">https://design.scotentblog.co.uk/author/davidobrien/</div></div><div class="m-a-box-related-entry-title"><i class="m-a-icon-doc"></i><a class="molongui-remove-underline" href="https://design.scotentblog.co.uk/show-your-stripes/" itemprop="url"><span itemprop="headline">Show your stripes</span></a></div></div></li><li><div class="m-a-box-related-entry" itemscope="" itemtype="http://schema.org/CreativeWork"><div class="molongui-display-none" itemprop="author" itemscope="" itemtype="http://schema.org/Person"><div itemprop="name">David O'Brien</div><div itemprop="url">https://design.scotentblog.co.uk/author/davidobrien/</div></div><div class="m-a-box-related-entry-title"><i class="m-a-icon-doc"></i><a class="molongui-remove-underline" href="https://design.scotentblog.co.uk/storyboards-for-service-design/" itemprop="url"><span itemprop="headline">Telling a story</span></a></div></div></li></ul></div></div></div></div><div class="m-a-box-content-bottom"></div></div></div></div><div class="sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded" data-name="like-post-frame-180632043-2400-6792a557c5624" data-src="https://widgets.wp.com/likes/?ver=14.2.1#blog_id=180632043&amp;post_id=2400&amp;origin=design.scotentblog.co.uk&amp;obj_id=180632043-2400-6792a557c5624&amp;n=1" data-title="Like or Reblog" id="like-post-wrapper-180632043-2400-6792a557c5624"><h3 class="sd-title">Like this:</h3><div class="likes-widget-placeholder post-likes-widget-placeholder" style="height: 55px;"><span class="button"><span>Like</span></span> <span class="loading">Loading...</span></div><span class="sd-text-color"></span><a class="sd-link-color"></a></div>

A new analysis tries to calculate the coming environmental footprint of AI in the US and finds that the ideal sites for data centers aren’t where they’re being built.