WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: font icon links, focus, and Title element


From: Birkir R. Gunnarsson
Date: May 24, 2017 10:34AM

As long as the links have an accessible name when you browse to them
(by tab or in virtual mode) I believe the solution is sufficient for
screen reader users.
Yes, the accessible name of the link should be used in the list of
links feature, but most screen readers only consider the text inside
the link for that feature.
I believe that that "bug" or "feature" is the screen reader vendors
responsibility (after all, they clearly obtain the accessible name of
the link from the browser, as evidenced by the fact that users see it
when navigating the page by other means).

I would recommend keeping the font awesome icon in a span inside the
link (you could even use visually hidden span inside the same link in
lieu of a title attribute, if ou prefer).

On 5/24/17, Swift, Daniel P. < <EMAIL REMOVED> > wrote:
> To answer question 1, you should be able to add outline to the links ...
> that should cover your font-awesome icons. Your CSS should look something
> like a:focus{outline: 2px solid #F00}. Those are just arbitrary values.
> You also want to use a span with the font awesome classes. That should
> solve your title issue. Example:
> <a href="page.php" title="Send an email"><span class="fa
> fa-envelope"></span>[sounds like you are using icons only, no text]</a>
> Does that help?
> Dan Swift
> Web Technical Specialist
> Enterprise Services
> West Chester University
> 610.738.0589
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
> Of Joseph Sherman
> Sent: Wednesday, May 24, 2017 10:39 AM
> To: WebAIM Discussion List
> Subject: [WebAIM] font icon links, focus, and Title element
> We are using font icons for some links in our WordPress CMS. Due to legacy
> support I'm told we cannot yet use SVG. The icon plug-in does not allow for
> ARIA-label on the icon links. We have added <Title> element to each icon
> link <a>, but support seems varied, as it's not listed in the links list
> except in IE. See below. Also there is no visible focus or hover.
> Two questions:
> 1) Is there a way to add visible focus and hover to font icon links? It
> must be able to be done in the CMS without unique code for each font icon.
> 2) Is there a reason the <Title> on the font icon link isn't listed in the
> links list in browsers other than IE? Is it a browser bug?
> Please don't recommend getting rid of icon fonts, changing CMS, or using a
> different icon plug-in. I am stuck with what the web folks have chosen and
> need to make the best of it.
> <Title> attribute on <a> font icon: When navigating on page: Read by FF and
> NVDA; IE and NVDA; Chrome and NVDA; Read by FF and Jaws; IE and Jaws; Chrome
> and Jaws
> Listed in links list in IE and NVDA; IE and Jaws,
> Blank listed in Links list in FF and NVDA; Chrome and NVDA
> Skipped in Links list in FF and JAWS; Chrome and JAWS
> Thanks in Advance.
> Joseph
> > > http://webaim.org/discussion/archives
> > > > > >

Work hard. Have fun. Make history.