WebAIM - Web Accessibility In Mind

E-mail List Archives

font icon links, focus, and Title element

for

From: Joseph Sherman
Date: May 24, 2017 8:39AM

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