WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: font icon links, focus, and Title element

for

From: Jim Allan
Date: May 24, 2017 12:27PM

Icon fonts are a concern of the Low Vision Task Force. One of our members
created a test page of various methods of creating and labelling icon
fonts. Perhaps you will find it helpful
https://alastairc.ac/tests/css-icons/


On Wed, May 24, 2017 at 11:34 AM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> As long as the links have an accessible name when you browse to them
> (by tab or in virtual mode) I believe the solution is sufficient for
> screen reader users.
> Yes, the accessible name of the link should be used in the list of
> links feature, but most screen readers only consider the text inside
> the link for that feature.
> I believe that that "bug" or "feature" is the screen reader vendors
> responsibility (after all, they clearly obtain the accessible name of
> the link from the browser, as evidenced by the fact that users see it
> when navigating the page by other means).
>
> I would recommend keeping the font awesome icon in a span inside the
> link (you could even use visually hidden span inside the same link in
> lieu of a title attribute, if ou prefer).
>
>
>
> On 5/24/17, Swift, Daniel P. < <EMAIL REMOVED> > wrote:
> > To answer question 1, you should be able to add outline to the links ...
> > that should cover your font-awesome icons. Your CSS should look
> something
> > like a:focus{outline: 2px solid #F00}. Those are just arbitrary values.
> > You also want to use a span with the font awesome classes. That should
> > solve your title issue. Example:
> >
> > <a href="page.php" title="Send an email"><span class="fa
> > fa-envelope"></span>[sounds like you are using icons only, no text]</a>
> >
> > Does that help?
> >
> > Dan Swift
> > Web Technical Specialist
> > Enterprise Services
> > West Chester University
> > 610.738.0589
> >
> > -----Original Message-----
> > From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf
> > Of Joseph Sherman
> > Sent: Wednesday, May 24, 2017 10:39 AM
> > To: WebAIM Discussion List
> > Subject: [WebAIM] font icon links, focus, and Title element
> >
> > We are using font icons for some links in our WordPress CMS. Due to
> legacy
> > support I'm told we cannot yet use SVG. The icon plug-in does not allow
> for
> > ARIA-label on the icon links. We have added <Title> element to each icon
> > link <a>, but support seems varied, as it's not listed in the links list
> > except in IE. See below. Also there is no visible focus or hover.
> >
> > Two questions:
> >
> >
> > 1) Is there a way to add visible focus and hover to font icon links? It
> > must be able to be done in the CMS without unique code for each font
> icon.
> >
> > 2) Is there a reason the <Title> on the font icon link isn't listed in
> the
> > links list in browsers other than IE? Is it a browser bug?
> >
> > Please don't recommend getting rid of icon fonts, changing CMS, or using
> a
> > different icon plug-in. I am stuck with what the web folks have chosen
> and
> > need to make the best of it.
> >
> >
> > <Title> attribute on <a> font icon: When navigating on page: Read by FF
> and
> > NVDA; IE and NVDA; Chrome and NVDA; Read by FF and Jaws; IE and Jaws;
> Chrome
> > and Jaws
> >
> > Listed in links list in IE and NVDA; IE and Jaws,
> >
> > Blank listed in Links list in FF and NVDA; Chrome and NVDA
> >
> > Skipped in Links list in FF and JAWS; Chrome and JAWS
> >
> > Thanks in Advance.
> > Joseph
> >
> > > > > archives at
> > http://webaim.org/discussion/archives
> > > > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >



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