inline SVG - best alternative to "alt" tag normally used for < img > SEO?

html optimization seo search-engine
Joe picture Joe · Nov 14, 2012 · Viewed 8.8k times · Source

Say I were to swap out an <img> within my main site header to use SVG instead. Normally I would depend on the <img>'s alt tag.

Is the SVG <title> the best replacement method for "alt" with this type of changeover? 

<svg role="img" aria-label="title + description here]">
  <title>[title here]</title>
  <desc>[long description here]</desc>
  ...
</svg>

Answer

Kraken picture Kraken · Mar 25, 2014

I have studied 508 quite a bit over the years. For the tiny bit of overhead it will cost you to create an alternative text attribute to the svg image, it really isn't worth skipping it. Keep in mind that all screen readers are different, and so are their users. SVG has a lot of capability to harness, but we aren't there yet. Yes, Google will index the text in your image, but if you care about non-sighted users being able to access your content across the board, you should throw in an alt tag. It is literally the bottom rung of accessibility features. There is no sense in letting the low hanging fruit rot on the vine.

Related questions

What is the purpose of the "role" attribute in HTML?

I keep seeing role attributes in some people's work. I use it too, but I'm not sure about its effect. For example: <header id="header" role="banner"> Header stuff in here </header> Or: <section id="…

Read More
Which "href" value should I use for JavaScript links, "#" or "javascript:void(0)"?

The following are two methods of building a link that has the sole purpose of running JavaScript code. Which is better, in terms of functionality, page load speed, validation purposes, etc.? or function myJsFunc() { alert("myJsFunc"); } <a href="javascript:…

Read More
How do I position one image on top of another in HTML?

I'm a beginner at rails programming, attempting to show many images on a page. Some images are to lay on top of others. To make it simple, say I want a blue square, with a red square in the upper …

Read More