E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: icon font links lack visual keyboard focus

Number of posts in this thread: 4 (In chronological order)

From: Joseph Sherman
Date: Thu, Jun 22 2017 8:52AM
Subject: icon font links lack visual keyboard focus
No previous message | Next message →

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"></a>

Regards,
Joseph

From: Swift, Daniel P.
Date: Thu, Jun 22 2017 9:26AM
Subject: Re: icon font links lack visual keyboard focus
← Previous message | Next message →

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
610.738.0589

From: Gary Thompson
Date: Thu, Jun 22 2017 12:56PM
Subject: Re: icon font links lack visual keyboard focus
← Previous message | Next message →

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">
 Go to our Facebook page
</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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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"></a>

Regards,
Joseph

From: Jim Allan
Date: Fri, Jun 23 2017 2:52PM
Subject: Re: icon font links lack visual keyboard focus
← Previous message | No next message

The Low Vision Task Force has been exploring this issue

1. Using aria-hidden="true" on an icon font that AT should
ignorehttps://www.w3.org/WAI/GL/wiki/Using_aria-hidden%3Dtrue_on_an_icon_font_that_AT_should_ignore

2. Icon Font with an On-Screen Text
Alternativehttps://www.w3.org/WAI/GL/wiki/Icon_Font_with_an_On-Screen_Text_Alternative

3. Using aria-hidden="true" on Unicode characters that AT should
ignorehttps://www.w3.org/WAI/GL/wiki/Using_a_Decorative_Unicode_Character

4. Unicode Character with an On-Screen Text
Alternativehttps://www.w3.org/WAI/GL/wiki/Providing_an_On-Screen_Text_Alternative_for_an_Icon_Font

James' Icon Font Technique

We use role="img" on the element which has our icon fonts. This seems like
a good idea as it lets us write our font replacement selector to exclude
them i.e.

*:not([role="img"]) {

font-family: Comic Sans MS, Georgia,'Times New Roman',serif;

}

On Thu, Jun 22, 2017 at 1:56 PM, Gary Thompson < = EMAIL ADDRESS REMOVED = > wrote:

> 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">
> width:31px; height:31px; font-size:31px; line-height:31px;color:#353a3d;">
> Go to our Facebook page
> </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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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"> style="background-color:#ffffff; width:31px; height:31px; font-size:31px;
> line-height:31px;color:#353a3d;"></a>
>
> Regards,
> Joseph
> > > > >

--
Jim Allan, Accessibility Coordinator
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964