Inline SVG <desc> correct usage for accessilibility</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2020-01-02T12:20:10.440" class="fromnow">Jan 02 '20 at 12:20</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2020-01-02T16:09:18.710" datetime="2020-01-02T16:09:18.710">Jan 02 '20 at 16:09</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 1,215 times"> <span class="fc-light mr2">Viewed</span> 1,215 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="59563251" data-ownerid="7993857" data-score="3"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="59563251"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="3">3</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I am using a lot of inline svgs in my html and am a little confused about the best way to present them concerning accessibility.</p> <p>I've see two methods to add <code><title></code> and <code><desc></code> to svgs -</p> <pre><code><svg role="img" aria-label="[title + description]"> <title>title text here</title> <desc>a description of the image here</desc> <path> etc. </svg> <svg role="img" aria-labelledby="my_svg_title my_svg_description"> <title id="my_svg_title">title text here</title> <desc id="my_svg_description">a description of the image here</desc> <path> etc. </svg> </code></pre> <p>The first method seems the best as I don't have to give unique IDs to each title and description (I have multiple svgs per page)? Is that the case? Is there anything else to take into consideration when choosing "aria-label" or "aria-labelledby"?</p> <p>Also I am still confused a little about the role < desc > plays - is it exactly the same as alt? I always remove the xmlns and xmlns:xlink tags from inline svgs for optimisation, will google image search still reference these inline svgs as images? Will <code><desc></code> help with that?</p> <p>If the inline svg will always display (do inline svgs ever not render?) then the <code><desc></code> will never be useful for missing images, which then only leaves page readers for accessibility which could use it. Do they?</p> <p>Basically is it worth using/including <code><desc></code>?</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/svg" class="post-tag js-gps-track" title="show questions tagged 'svg'" rel="tag">svg</a> <a href="../../questions/tagged/tags" class="post-tag js-gps-track" title="show questions tagged 'tags'" rel="tag">tags</a> <a href="../../questions/tagged/accessibility" class="post-tag js-gps-track" title="show questions tagged 'accessibility'" rel="tag">accessibility</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Jan 02 '20 at 16:09">edited Jan 02 '20 at 16:09</time> <a href="../../users/2370483/machavity" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2370483.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Machavity" /> </a> <div class="s-user-card--info"> <a href="../../users/2370483/machavity" class="s-user-card--link">Machavity</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">30,841</li> <li class="s-award-bling s-award-blinggold" title="27 gold badges">27</li> <li class="s-award-bling s-award-blingsilver" title="92 silver badges">92</li> <li class="s-award-bling s-award-blingbronze" title="100 bronze badges">100</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 02 '20 at 12:20">asked Jan 02 '20 at 12:20</time> <a href="../../users/7993857/gulli" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7993857.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Gulli" /> </a> <div class="s-user-card--info"> <a href="../../users/7993857/gulli" class="s-user-card--link">Gulli</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">167</li> <li class="s-award-bling s-award-blingsilver" title="3 silver badges">3</li> <li class="s-award-bling s-award-bling__bronze" title="13 bronze badges">13</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-59563251" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="59563251" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-105295314" class="comment js-comment " data-comment-id="105295314" data-comment-owner-id="162698" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105295314_59563251"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Questions about SEO are off topic here and will get your question closed. I suggest you quickly remove any references to that and rewrite your question. https://stackoverflow.com/help/on-topic</span> – <a href="../../users/162698/rob" title="14,746 reputation" class="comment-user ">Rob</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59563251/inline-svg-title-desc-correct-usage-for-accessilibility#comment105295314_59563251"><span title="2020-01-02T13:02:07.350 License: CC BY-SA 4.0" class="relativetime-clean">Jan 02 '20 at 13:02</span></a></span> </div> </div> </li> <li id="comment-105295348" class="comment js-comment " data-comment-id="105295348" data-comment-owner-id="2702894" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105295348_59563251"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">SEO opinion is not allowed, but SEO as a topic is not banned, I.E. if it is a factual question (there is an `SEO` tag), overall the question is fine but good to give him a heads up to be careful.</span> – <a href="../../users/2702894/grahamthedev" title="22,724 reputation" class="comment-user ">GrahamTheDev</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59563251/inline-svg-title-desc-correct-usage-for-accessilibility#comment105295348_59563251"><span title="2020-01-02T13:03:14.587 License: CC BY-SA 4.0" class="relativetime-clean">Jan 02 '20 at 13:03</span></a></span> </div> </div> </li> <li id="comment-105295392" class="comment js-comment " data-comment-id="105295392" data-comment-owner-id="162698" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105295392_59563251"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@GrahamRitchie From the SEO Tag. GENERAL SEO QUESTIONS ARE OFF-TOPIC. Only programming-related SEO questions are acceptable on Stack Overflow. Non-programming SEO questions should be asked on Webmasters.SE at https://webmasters.stackexchange.com. If someone has directed you here to read this warning, go back and delete your question.</span> – <a href="../../users/162698/rob" title="14,746 reputation" class="comment-user ">Rob</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59563251/inline-svg-title-desc-correct-usage-for-accessilibility#comment105295392_59563251"><span title="2020-01-02T13:04:35.127 License: CC BY-SA 4.0" class="relativetime-clean">Jan 02 '20 at 13:04</span></a></span> </div> </div> </li> <li id="comment-105295501" class="comment js-comment " data-comment-id="105295501" data-comment-owner-id="2702894" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105295501_59563251"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Yes and so his question was 'how to present them for SEO' - it is a programming question (loosely, a `markup` question) and 'will google image search still reference these inline SVGs as images' is a valid question also as that is about a decision on whether to inline SVGs or put them in an external file. Which bit do you feel is outside of scope?</span> – <a href="../../users/2702894/grahamthedev" title="22,724 reputation" class="comment-user ">GrahamTheDev</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59563251/inline-svg-title-desc-correct-usage-for-accessilibility#comment105295501_59563251"><span title="2020-01-02T13:08:17.343 License: CC BY-SA 4.0" class="relativetime-clean">Jan 02 '20 at 13:08</span></a></span> </div> </div> </li> <li id="comment-105295571" class="comment js-comment " data-comment-id="105295571" data-comment-owner-id="250259" data-comment-score="2"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105295571_59563251"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This question appears to be off-topic because it is about SEO which is off-topic at Stack Overflow. Please read ["Which SEO questions should be closed as non-programming/non-admin?"](//meta.stackoverflow.com/a/382618) to better understand when SEO questions are acceptable to ask here (most are not) and where you might be able to get assistance.</span> – <a href="../../users/250259/john-conde" title="217,595 reputation" class="comment-user ">John Conde</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59563251/inline-svg-title-desc-correct-usage-for-accessilibility#comment105295571_59563251"><span title="2020-01-02T13:10:30.713 License: CC BY-SA 4.0" class="relativetime-clean">Jan 02 '20 at 13:10</span></a></span> </div> </div> </li> <li id="comment-105295595" class="comment js-comment " data-comment-id="105295595" data-comment-owner-id="162698" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105295595_59563251"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@GrahamRitchie The only part I want to be careful is "SEO as a topic is not banned". That's a really gray area and he's walking a fine line here.</span> – <a href="../../users/162698/rob" title="14,746 reputation" class="comment-user ">Rob</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59563251/inline-svg-title-desc-correct-usage-for-accessilibility#comment105295595_59563251"><span title="2020-01-02T13:11:10.150 License: CC BY-SA 4.0" class="relativetime-clean">Jan 02 '20 at 13:11</span></a></span> </div> </div> </li> <li id="comment-105295596" class="comment js-comment " data-comment-id="105295596" data-comment-owner-id="2702894" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105295596_59563251"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">thanks, that clear it up for me too. Cheers Rob and John!</span> – <a href="../../users/2702894/grahamthedev" title="22,724 reputation" class="comment-user ">GrahamTheDev</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59563251/inline-svg-title-desc-correct-usage-for-accessilibility#comment105295596_59563251"><span title="2020-01-02T13:11:10.837 License: CC BY-SA 4.0" class="relativetime-clean">Jan 02 '20 at 13:11</span></a></span> </div> </div> </li> <li id="comment-105295612" class="comment js-comment " data-comment-id="105295612" data-comment-owner-id="7993857" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105295612_59563251"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Oh sry I phrased question badly... I was more concerned about how to implement it in HTML and what the title and desc meant in practical terms than than the SEO itself.</span> – <a href="../../users/7993857/gulli" title="167 reputation" class="comment-user owner">Gulli</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59563251/inline-svg-title-desc-correct-usage-for-accessilibility#comment105295612_59563251"><span title="2020-01-02T13:11:47.907 License: CC BY-SA 4.0" class="relativetime-clean">Jan 02 '20 at 13:11</span></a></span> </div> </div> </li> <li id="comment-105300756" class="comment js-comment " data-comment-id="105300756" data-comment-owner-id="2370483" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105300756_59563251"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I took the SEO parts out, since accessibility is on-topic. If you still need an SEO answer, you can always ask that part on [Webmasters](https://webmasters.stackexchange.com/)</span> – <a href="../../users/2370483/machavity" title="30,841 reputation" class="comment-user ">Machavity</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59563251/inline-svg-title-desc-correct-usage-for-accessilibility#comment105300756_59563251"><span title="2020-01-02T16:10:07.360 License: CC BY-SA 4.0" class="relativetime-clean">Jan 02 '20 at 16:10</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="59563793"></a> <div id="answer-59563793" class="answer accepted-answer" data-answerid="59563793" data-ownerid="2702894" data-score="8" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="59563793"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="8">8</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Think of <code><title></code> like <code>alt</code>, think of <code><description></code> like <code><figcaption></code></p> <p>Your <code><title></code> should describe the image sufficiently to provide a user with an understanding of what the image contains.</p> <p>If it is a complex image, or the image plays a vital role in an article that necessitates more details then use <code><description></code>.</p> <p><a class="external-link" href="https://www.deque.com/blog/creating-accessible-svgs/" rel="noreferrer">Deque did a great test of different methods</a> and found that your second version was the most reliable with a <code>title</code> and <code>description</code> linked via <code>aria-labelledby</code> and IDs, <strong>so use that</strong>.</p> <p>Yes google will still reference them as images without <code>xmlns</code> served inline (provided you serve your page as mime type <code>text/html</code> otherwise you will get rendering issues). For external images I would leave it in, it is such a minor optimisation it isn't worth it.</p> <p>Inline SVGs do not get indexed as far as I am aware in Google Image Search (but their content still contributes to your SEO in Google Search Algorithms slightly so it is still worth having <code><description></code> where appropriate.)</p> <p>SVGs will always render if inline (<a class="external-link" href="https://caniuse.com/#feat=svg" rel="noreferrer">assuming the browser supports SVG</a> which is very likely). </p> <p>Yes include <code><desc></code> if the image is sufficiently complex that you can't describe it with <code><title></code> in 20 words or less (general rule).</p> <p><strong>final thought</strong> - <code>alt</code> tags, <code>titles</code> etc. are all about accessibility, don't worry about them for SEO keywords as you will end up damaging usability. I know you didn't mention that but I thought I would put it in here for clarity.</p> <p><strong>p.s.</strong> - Next time, maybe limit this to 1 or 2 questions at once as that was a lot to answer!</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2020-01-02T13:05:44.137" class="relativetime">Jan 02 '20 at 13:05</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">GrahamTheDev</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jan 02 '20 at 12:59">answered Jan 02 '20 at 12:59</time> <a href="../../users/2702894/grahamthedev" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2702894.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="GrahamTheDev" /> </a> <div class="s-user-card--info"> <a href="../../users/2702894/grahamthedev" class="s-user-card--link">GrahamTheDev</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">22,724</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="32 silver badges">32</li> <li class="s-award-bling s-award-bling__bronze" title="64 bronze badges">64</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-59563793" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="59563793" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-105295745" class="comment js-comment " data-comment-id="105295745" data-comment-owner-id="7993857" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment105295745_59563793"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thanks a million for taking the time. Great answer. The info about aria-labelledby is very useful as I would have probably used the other method. From everything you have said it seems like using title will be enough for my purposes... I was having trouble understanding exactly what different roles this text would perform compared to more traditional title and alt. I am more concerned about accessibility really than SEO, should have put into post title but thought would make it too long. Thanks again!!</span> – <a href="../../users/7993857/gulli" title="167 reputation" class="comment-user owner">Gulli</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/59563251/inline-svg-title-desc-correct-usage-for-accessilibility#comment105295745_59563793"><span title="2020-01-02T13:16:14.300 License: CC BY-SA 4.0" class="relativetime-clean">Jan 02 '20 at 13:16</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/63208144/why-does-a-link-not-take-the-title-of-a-contained-svg-as-it-s-accessible-name" class="question-hyperlink">Why does a link not take the <title> of a contained <svg> as it's accessible name?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">6</div></a> <a href="../../questions/65257333/svg-inside-h1-tag" class="question-hyperlink">Svg inside h1 tag</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">1</div></a> <a href="../../questions/65636048/how-does-a-screenreader-treat-the-utf-8-checkmark-character-in-a-td-of-an-html" class="question-hyperlink">how does a screenreader treat the utf-8 checkmark character in a td of an HTML table?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">3</div></a> <a href="../../questions/65999289/svg-logo-heading-and-web-accessibility" class="question-hyperlink">SVG logo - Heading and web accessibility</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>