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:36PM

Also,
For low vision folks, make sure that you set a background color on your
icon fonts. You don't want them vanishing if a user changes the background
color of the page to the same color as your icon font.

On Wed, May 24, 2017 at 1:27 PM, Jim Allan < <EMAIL REMOVED> > wrote:

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