WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: icon font links lack visual keyboard focus

for

From: Gary Thompson
Date: Jun 22, 2017 12:56PM

Could you add the icon title as text to the link and then visually hide the text? That should leave the text physically in the markup and should give the link recognizable content so that it falls into the natural focus order. Something like:

<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> <span class="sr-only">Go to our Facebook page</span>
</a>

CSS example from Bootstrap's .sr-only:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}

Hope that helps,

Gary


From: "Joseph Sherman" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Thursday, June 22, 2017 10:52:28 AM
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>

Regards,
Joseph