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