Social and Nav links need accessibility attributes updated about ghostwriter HOT 3 CLOSED

Hey @dylanhthomas can please point to some resources about this ? Especially "title attributes shouldn't be used". Thanks for your contribution!

from ghostwriter.

Hi @jbub, more than happy to, and please let me know if you want to discuss further.

1 - title attributes:

https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/

TL;DR - title attributes are treated so inconsistently across browsers and devices that there is no way they can be counted on to always show content.
If you are using titles for accessibility, aria-label is the much better attribute to use since it is designed for that.

2 - icon hiding

I misspoke saying "without function"...the social icons are semantic, but the treatment I proposed still works.
FontAwesome has a pretty good write-up on this:
https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility

TL;DR - when using webfont icons, they should be aria-hidden="true" with their meaning conveyed using sr-only text or aria labels if they are semantic, and hidden if they are decorative.

3 - labeling

Because titles may or may not be processed (per 1), the social links in the header do not contain any always readable text. As such a screen reader may or may not announce "Facebook" in the current:

<a title="Facebook" href="{{ . }}" title="Facebook"><i class="fa fa-facebook"></i></a>

Whereas in the following options the Screen reader says "Facebook link":

aria-label on <a>:

<a href="{{ . }}" aria-label="Facebook"><i class="fa fa-facebook"></i></a>

screen reader only text inside <a> (.sr-only class exists in code base that hides visually, but not from screen readers)

<a href="{{ . }}"><i class="fa fa-facebook"></i><span class="sr-only">Facebook</span></a>

from ghostwriter.

Impressive summary, thank you very much.

from ghostwriter.