Recommended "alt text" strategy

[jonathantneal]

Recommended "alt text" strategy

[fvsch]

I wrote a test, and ran it with VoiceOver on Yosemite, using default settings.
Test page: https://dl.dropboxusercontent.com/u/145744/accessible-svg-icon/test.html

I tested two situations, since they seem to differ quite a bit: when the SVG is in a button or link (results were similar in VoiceOver), and when it's in regular text flow.

Without a button or link, the SVG icon is generally not read. (Not read at all in Safari, read as "Image" but no alt text in Firefox.) The only way to get alternative text I found was with a visually hidden element (that must not be 0 by 0 pixels, or it won’t be read).

Inside a button or link, VoiceOver will do its best to read alt text. It will read:

• Neighboring text, including a visually hiddden <span>
• The aria-label if there is one
• The <title> element from the <symbol>

It will NOT read:

• The title attribute (at least not with default settings)
• The symbol’s <title> if we used aria-hidden="true" on the SVG icon

Finally, if we use both a <title> (with no aria-hidden="true") and an aria-label, the aria-label will take priority.

So my final recommendation would be:

Button with a single icon:
<button aria-label="Button label">
  <svg aria-hidden="true"><use xlink:href="..."></use></svg>
</button>

Button with an icon and visible label:
<button>
  <svg aria-hidden="true"><use xlink:href="..."></use></svg>
  Button label
</button>

[larsenwork]

@fvsch any reason not to use role="img" instead of aria-hidden="true" ?

[fvsch]

@larsenwork With role="img" screen readers might try to read the SVG image (especially if it happens to have a <text> element), and we’re already providing the relevant text either in context or as an aria-label on the parent. So I’m trying to avoid readings like "Button the actual label Image".

Of course if for whatever reason you’re trying to get screen readers to read the icon itself, you don’t want to use aria-hidden="true". In my latest tests, adding role="img" had no effect and I think it might be redundant with the <svg> element anyway. The one technique that had good results was using a title element:

<svg>
  <title>Alt text</title>
  <use xlink:href="…"></use>
</svg>

But I’ve seen contradictory results elsewhere, so I need to check my tests.

[jonathantneal]

I was testing this today and I needed aria-label for consistent results with role="img", so I will be updating the recommendation.

[sathomas]

@jonathantneal In a similar manner to pull request #108, you might want to maintain the aria-labelledby attribute for <use> elements. That would provide better support for code such as the following:

<symbol id="icon" aria-labelledby="icon-title" viewBox="0 0 65 65">
    <title id="icon-title" lang="en">icon</title>
    <path d="..."/>
</symbol>

(I had thought about including that in the PR, but decided to start more modestly.)

[fvsch]

@sathomas Is that supported in other screen readers beyond VoiceOver?

In my tests:

• VoiceOver read the <title> element from a used <symbol>, and didn’t the aria-labelledby attribute for that.
• JAWS and NVDA didn’t support it at all in used <symbol> elements, with or without aria-labelledby.

So aria-labelledby seems redundant and useless here.
Similarly for <title> as child of the <svg> element which is being read (rather than a separate <symbol>): supported in all 3 screen readers without aria-labelledby.