E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: font icon links, focus, and Title element

Number of posts in this thread: 5 (In chronological order)

From: Joseph Sherman
Date: Wed, May 24 2017 8:39AM
Subject: font icon links, focus, and Title element
No previous message | Next message →

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

From: Swift, Daniel P.
Date: Wed, May 24 2017 10:07AM
Subject: Re: font icon links, focus, and Title element
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Wed, May 24 2017 10:34AM
Subject: Re: font icon links, focus, and Title element
← Previous message | Next message →

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 ADDRESS 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"> fa-envelope">[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
>
>

From: Jim Allan
Date: Wed, May 24 2017 12:27PM
Subject: Re: font icon links, focus, and Title element
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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"> > fa-envelope">[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
> >
> >

From: Jim Allan
Date: Wed, May 24 2017 12:36PM
Subject: Re: font icon links, focus, and Title element
← Previous message | No next message

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 ADDRESS 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 ADDRESS 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 ADDRESS 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">> > fa-envelope">[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
>> >
>> >