E-mail List Archives
Thread: Font Icons in Safari
Number of posts in this thread: 5 (In chronological order)
From: Joseph Sherman
Date: Fri, Feb 19 2016 9:08AM
Subject: Font Icons in Safari
No previous message | Next message →
We are now using font icons for header and footer image links (like logos, twitter, facebook, etc). Since they are not images, they do not any ALT. They do have Titles. On Windows and iOS, they work fine- JAWS and NVDA read the Title and link. On Mac and Android, VoiceOver/Talkback only says "link", and does not read the Title or url so the user has no idea what the link is for.
Is this a VoiceOver bug? Is there an attribute like ALT for font icons?
Joseph
From: Patrick H. Lauke
Date: Fri, Feb 19 2016 9:14AM
Subject: Re: Font Icons in Safari
← Previous message | Next message →
On 19/02/2016 16:08, Joseph Sherman wrote:
> We are now using font icons for header and footer image links (like logos, twitter, facebook, etc). Since they are not images, they do not any ALT. They do have Titles. On Windows and iOS, they work fine- JAWS and NVDA read the Title and link. On Mac and Android, VoiceOver/Talkback only says "link", and does not read the Title or url so the user has no idea what the link is for.
>
> Is this a VoiceOver bug? Is there an attribute like ALT for font icons?
Not tested, but I suspect this is more to do with verbosity settings.
More fundamentally though, I'd suggest moving away from font icons:
- https://speakerdeck.com/ninjanails/death-to-icon-fonts
- http://blog.cloudfour.com/seriously-dont-use-icon-fonts/
Consider using SVG instead.
If you *must* still use font icons, I'd suggest making the actual
element that hosts the font icon invisible to assistive tech (using
aria-hidden="true") and adding visually hidden, yet accessible, HTML
text. See for instance the accessibility callout on
http://getbootstrap.com/components/#glyphicons-how-to-use and the
approaches shown in the "Examples" that follow.
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Jonathan Avila
Date: Fri, Feb 19 2016 11:46AM
Subject: Re: Font Icons in Safari
← Previous message | Next message →
> Is this a VoiceOver bug? Is there an attribute like ALT for font icons?
My guess is that aria-label would be better supported on links than the title attribute. It should be placed on the link and not on the span within the link.
Jonathan
Jonathan Avila
Chief Accessibility Officer
SSB BART Group
= EMAIL ADDRESS REMOVED =
703.637.8957 (o)
Follow us: Facebook | Twitter | LinkedIn | Blog | Newsletter
From: Paul J. Adam
Date: Fri, Feb 19 2016 1:01PM
Subject: Re: Font Icons in Safari
← Previous message | Next message →
There's also CSS4 Alt text for Generated Content working in iOS 9 and OS X 10.11 http://pauljadam.com/demos/css4altgeneratedcontent.html <http://pauljadam.com/demos/css4altgeneratedcontent.html>;.
Paul J. Adam
Accessibility Evangelist
www.deque.com
> On Feb 19, 2016, at 10:08 AM, Joseph Sherman < = EMAIL ADDRESS REMOVED = > wrote:
>
> We are now using font icons for header and footer image links (like logos, twitter, facebook, etc). Since they are not images, they do not any ALT. They do have Titles. On Windows and iOS, they work fine- JAWS and NVDA read the Title and link. On Mac and Android, VoiceOver/Talkback only says "link", and does not read the Title or url so the user has no idea what the link is for.
>
> Is this a VoiceOver bug? Is there an attribute like ALT for font icons?
>
>
> Joseph
>
> > > >
From: _mallory
Date: Mon, Feb 22 2016 5:44AM
Subject: Re: Font Icons in Safari
← Previous message | No next message
On Fri, Feb 19, 2016 at 04:14:32PM +0000, Patrick H. Lauke wrote:
> Consider using SVG instead.
Note that to use SVG and have any hope of title or desc tags actually
getting read out means adding a bunch of aria-describedbys and ids
for cross-browser, cross-AT support. I discovered in testing that
referencing a <title> tag that's elsewhere in the page also doesn't
seem to read out no matter what I do.
For this reason, even if I use SVGs, I still aria-hide them and have
text next to them. Ideally onscreen for stupids like me who aren't hip
enough to happen to recognise every new social-media logo out there
and need to know where the heck the link is going to take me, but
if the Graphics Overlords have made Their ruling, offscreen text.
I recently fought the unbelieveably iconned ico-moon font creator
and wish I had had a handy guide to tell me what all those things
were supposed to do instead of wasting a half hour tearing my hair
out and wondering why I had to be born so dumb.
_mallory