WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: font icon links, focus, and Title element

for

From: Swift, Daniel P.
Date: May 24, 2017 10:07AM

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