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
>> >
>> > -----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 <(512)%20206-9315> fax: 512.206.9264
> <(512)%20206-9264> http://www.tsbvi.edu/
> "We shape our tools and thereafter our tools shape us." McLuhan, 1964
>



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