WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: icon font links lack visual keyboard focus

for

From: Jim Allan
Date: Jun 23, 2017 2:52PM

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



--
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