Optimize for accesibility

[larsenwork]

I thought about doing something like this:

<a class="twitter-social">
  <svg viewbox="0 0 800 800" aria-labelledby="title" role="img">
    <title>Twitter logo</title>
    <path d="M679 239s-21 34-55 57c7 156-107 329-314 329-103 0-169-50-169-50s81 17 163-45c-83-5-103-77-103-77s23 6 50-2c-93-23-89-110-89-110s23 14 50 14c-84-65-34-148-34-148s76 107 228 116c-22-121 117-177 188-101 37-6 71-27 71-27s-12 41-49 61c30-2 63-17 63-17z"/>
  </svg>
</a>

[larsenwork]

Or maybe

<a class="social" aria-label="twitter">
  <svg viewbox="0 0 800 800" role="img">
    <path d="M679 239s-21 34-55 57c7 156-107 329-314 329-103 0-169-50-169-50s81 17 163-45c-83-5-103-77-103-77s23 6 50-2c-93-23-89-110-89-110s23 14 50 14c-84-65-34-148-34-148s76 107 228 116c-22-121 117-177 188-101 37-6 71-27 71-27s-12 41-49 61c30-2 63-17 63-17z"/>
  </svg>
</a>

[larsenwork]

https://github.com/jonathantneal/svg4everybody/issues/74

[larsenwork]

Ended up removing role="img". This is how screenreader on mac reads it:

<a class="social" aria-label="github">
  <svg viewbox="0 0 800 800"><path d="..."/></svg>
</a>

[larsenwork]

@fvsch any thoughts on the above ?

[fvsch]

Two things:

1. Text should describe the role that an icon (often a button or link) has, not the icon itself. So Twitter logo is out, Twitter is alright but not really specific, unless it's preceded by a Follow us on social media heading maybe. A personalized alternative text would be ideal, like [Our company or brand] on Twitter.
2. For what markup is best for exposing the alternative text to screen readers, I ran some tests a few months ago and <svg><title>Text</title>…</svg> worked well. (Doubling down with aria-labelledby was unnecessary in my tests, and by the way the way you used in the first comment is wrong, you need to reference an id attribute—which makes it a pain to use for designers and developers and just a Really Bad Idea, imo.) For icons inside links and buttons, I also found that <svg aria-label="Text">…</svg> worked well. Using role="img" didn’t seem to have any impact, and I don’t know if it’s a good idea to add it or not.

So I would recommend:

<a href="…" class="social">
  <svg viewBox="0 0 800 800">
    <title> [project name] on GitHub </title>
    <path d="…"/>
  </svg>
</a>

[larsenwork]

@fvsch cheers, the reason I choose to use aria-label over title was this article which states limited "title" support: https://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/ but I haven't been able to find any more recent articles about this.

Sticking to aria-label I could do something like this:

  <a aria-label="follow me on twitter">
    <svg viewBox="0 0 800 800">
      <path d="..."/>
    </svg>
  </a>

And then style it something like this (looping through a map)

[aria-label*="#{$social}"] {
      background: $color;
      &:focus,
      &:hover {
        background: darken($color,$darken);
      }
}

[fvsch]

Yeah support of the <title> element for inline SVG seems to have improved quite a bit.

Using aria-label is a decent option, but using the value in a CSS selector is an awful idea. If users of your code want to change the label to something more specific to their use case, and/or localize it, it would break the corresponding styles.

[larsenwork]

twitter is called twitter all over the world so not sure localisation is an issue but I get your point - I was just hard set on having a minimal markup;)
Have you seen any recent reports of svg <title> browser support - the latest I have been able to find is 2013 :/

[fvsch]

In October ran tests in latest NVDA, JAWS, and VoiceOver on Yosemite, and they all read the <title> element when it's inside the page. Including when using <use>:

<svg>
  <title>Alt text</title>
  <use xlink:href="url#symbol-id"></use>
</svg>

Results with aria-label were a bit mixed, it worked alright inside links and buttons (with one exception for button elements in JAWS+IE11), and didn't work for reading icons outside of links and buttons.

I also just ran a test with Narrator on Windows 10, on this page, the results are pretty bad overall. In Firefox aria-label works but not <title>, on IE11 it's the other way round, and on Edge nothing seems to be working.

[larsenwork]

Hmm... I guess those mixed results are the reasoning behind using the combination of aria-labelledby and title but it still doesn't work with voiceover in Firefox though...

<a href="...">
  <svg aria-labelledby="title">
    <title>Larsenwork on Twitter</title>
  </svg>
</a>

Safari VO reads "Visited, link, Larsenwork on Twitter"

Firefox VO reads "Visited, link"

[fvsch]

When testing screen readers, there is generally a reader+browser combination that is considered standard, and others and often not supported by screen readers and/or browsers. So "VoiceOver + Firefox" is irrelevant.

VoiceOver + Safari supports reading the <title> element, so that's a pass in my book. :)

By the way, your use of aria-labelledby is incorrect (you need to reference an id, not an element name).

[larsenwork]

Cheers, I've now updated the codepen example to just use the title element. https://github.com/larsenwork/social.svg.min/blob/164171b25542e9369f435c4621ef17ce2710bd76/codepen/codepen.html#L5

and similarly on my website

https://github.com/larsenwork/larsenwork.github.io/blob/master/src/index.html#L104

Closing this for now but should you stumble on more information then please share (you should write a medium article or something about it - updated info on this is really lacking online) :wink: