WebAIM - Web Accessibility In Mind

E-mail List Archives

icon font links lack visual keyboard focus

for

From: Joseph Sherman
Date: Jun 22, 2017 8:52AM

We have embedded icon fonts for many image links on our pages. I'm told we are using them instead of SVG because a lot of our visitors are using older versions of IE. Anyway, I was able to get them to add <Title> to the icon fonts so they have accessible names (I was told the icon font plug-in can't handle Aria-label).

However the icon fonts still do not have visual keyboard focus. Here is the current code, is there a way to add visual keyboard focus? Note we are using WordPress with Visual composer and some icon font plug-in so our hand code options may be limited.

<a class="ts-font-icons-link " href="http://www.facebook.com/****" title="Go to our Facebook page"><i class="ts-font-icon icon-facebook_ko" style="background-color:#ffffff; width:31px; height:31px; font-size:31px; line-height:31px;color:#353a3d;"></i></a>

Regards,
Joseph