WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: icon font links lack visual keyboard focus


From: Swift, Daniel P.
Date: Jun 22, 2017 9:26AM

You need to use the selector with focus -- in your stylesheet, something like ts-font-icons-link:focus{/* styles here*/}. Note -- your inline styles may defeat this depending on what you are trying to accomplish.

Hope that helps!

Dan Swift
Senior Web Specialist
Enterprise Services
West Chester University

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Joseph Sherman
Sent: Thursday, June 22, 2017 10:52 AM
To: WebAIM Discussion List
Subject: [WebAIM] icon font links lack visual keyboard focus

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>