WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: font icon links, focus, and Title element

for

From: Birkir R. Gunnarsson
Date: May 24, 2017 10:34AM

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