E-mail List Archives

Search E-mail List Archives for

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

From: Jim Homme
Date: Tue, Aug 01 2017 6:56AM
Subject: Font Awesome Icon Accessibility Help
No previous message | Next message →

Hi,
I am learning to work with Font Awesom icons as part of web development training. I want to learn to make them accessible now so I won't have to re-learn them correctly. Hope this makes sense. Can anyone please point me to information aboutmaking these accessible?

Thanks.

Jim

=========Jim Homme,
Team Lead and Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O

From: Patrick H. Lauke
Date: Tue, Aug 01 2017 7:38AM
Subject: Re: Font Awesome Icon Accessibility Help
← Previous message | Next message →

On 01/08/2017 13:56, Jim Homme wrote:
> Hi,
> I am learning to work with Font Awesom icons as part of web development training. I want to learn to make them accessible now so I won't have to re-learn them correctly. Hope this makes sense. Can anyone please point me to information aboutmaking these accessible?


While not perfect, the information on
http://fontawesome.io/accessibility/ might start you off in the right
direction. This is cribbed in part from the accessibility advice on
http://getbootstrap.com/components/#glyphicons-how-to-use (different
icon font system, same idea behind it though).

Of course there are gaps here - particularly when it comes to users who
may have their own font preferences set that override author-defined
fonts. Moving to SVG-based icon solutions is the more robust approach
here in most cases.

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Preast, Vanessa
Date: Tue, Aug 01 2017 7:48AM
Subject: Re: Font Awesome Icon Accessibility Help
← Previous message | Next message →

Are there some good, current resources on using SVG-based icons accessibly? Some of the resources I had found were old and seemed to suggest accessibility problems with SVG-based icons.

Also, what about using Unicode for icons?

Best,
Vanessa

From: Birkir R. Gunnarsson
Date: Tue, Aug 01 2017 7:51AM
Subject: Re: Font Awesome Icon Accessibility Help
← Previous message | Next message →

If the font is used on a focusable element (such as a link or a
button) make sure that element has an accessible name (place on the
focusable element, not on the fon awesome element).

Use eiher the title or aria-label attribute
e.g.
<button aria-label="search"><I class="fa fa-search"></I></button>
(the class name may not be 100% accurate, I don't have Font Awesome
open at the moment).

Make sur theaccessible name describes the action performed by the
control, not what it looks like.
For instance
<button aria-label="cross"><I class="fa fa-close"></I></button
is bad,, he accessible name should be "Close".
and if it is a right arrow link to continue, the accessible name
should be "continue", not "right arrow".

If you are using icons to communicate information, if you provide the
inforamiton in text also you don't have to do anything
Say you have an error icon, but you start all yor error messages with
the word "Error! " you are fine

If you do not, you need to assign the element with the font awesome
class as an image and give tit a text alterantive using ARIA:
<I role="img" aria-label="Error!" class="fa fa-error"></i>
(this works pretty well across browsers/a.t. combinations).

Make sure, if you identify a control visually only with an icon, that
the icon is not obscure or unclear, sometimes a text label is better.
The heart icon, e.g. means "like" on FAcebook but "add to favorites"
on may retail
website.

In this situation you should use a text label so users know what they
are about to do.
This is more of a usability concern than accessibility.
In general, try to standardize the way you use icons on your website
and also standardize the text alternatives so they are consistent.

And, yes, the font replacement is a problem, though not covered
directly by WCAG, it could be a usability issue. SVG is the long-term
solution, but just make sure you have as much info available in text
as possible and don't get too carried away by the awesomeness of icons
(they are pretty cool and they are useful io many users)





On 8/1/17, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> On 01/08/2017 13:56, Jim Homme wrote:
>> Hi,
>> I am learning to work with Font Awesom icons as part of web development
>> training. I want to learn to make them accessible now so I won't have to
>> re-learn them correctly. Hope this makes sense. Can anyone please point me
>> to information aboutmaking these accessible?
>
>
> While not perfect, the information on
> http://fontawesome.io/accessibility/ might start you off in the right
> direction. This is cribbed in part from the accessibility advice on
> http://getbootstrap.com/components/#glyphicons-how-to-use (different
> icon font system, same idea behind it though).
>
> Of course there are gaps here - particularly when it comes to users who
> may have their own font preferences set that override author-defined
> fonts. Moving to SVG-based icon solutions is the more robust approach
> here in most cases.
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >


--
Work hard. Have fun. Make history.

From: Jim Homme
Date: Tue, Aug 01 2017 12:45PM
Subject: Re: Font Awesome Icon Accessibility Help
← Previous message | No next message

Hi,
Full disclosure. I am working through the training at http://www.freecodecamp.org/. Basically, there is some sort of software that validates whether or not you write the code the way it thinks you should. My plan is to just get through the exercise or exercises, then go back and learn it accessibly. I will keep all of this stuff in mind and create some content and test it. I may end up showing it to the group to ensure that I understood this as well as I should. I will also try to understand what Patric says about SVG.

Thanks all.

Jim

=========Jim Homme,
Team Lead and Accessibility Consultant,
Bender HighTest Accessibility Team
Bender Consulting Services, Inc.,
412-787-8567,
= EMAIL ADDRESS REMOVED =
http://www.benderconsult.com/our%20services/hightest-accessible-technology-solutions
E+R=O

From: Birkir R. Gunnarsson<mailto: = EMAIL ADDRESS REMOVED = >
Sent: Tuesday, August 1, 2017 9:52 AM
To: WebAIM Discussion List<mailto: = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Font Awesome Icon Accessibility Help

If the font is used on a focusable element (such as a link or a
button) make sure that element has an accessible name (place on the
focusable element, not on the fon awesome element).

Use eiher the title or aria-label attribute
e.g.
<button aria-label="search"><I class="fa fa-search"></I></button>
(the class name may not be 100% accurate, I don't have Font Awesome
open at the moment).

Make sur theaccessible name describes the action performed by the
control, not what it looks like.
For instance
<button aria-label="cross"><I class="fa fa-close"></I></button
is bad,, he accessible name should be "Close".
and if it is a right arrow link to continue, the accessible name
should be "continue", not "right arrow".

If you are using icons to communicate information, if you provide the
inforamiton in text also you don't have to do anything
Say you have an error icon, but you start all yor error messages with
the word "Error! " you are fine

If you do not, you need to assign the element with the font awesome
class as an image and give tit a text alterantive using ARIA:
<I role="img" aria-label="Error!" class="fa fa-error"></i>
(this works pretty well across browsers/a.t. combinations).

Make sure, if you identify a control visually only with an icon, that
the icon is not obscure or unclear, sometimes a text label is better.
The heart icon, e.g. means "like" on FAcebook but "add to favorites"
on may retail
website.

In this situation you should use a text label so users know what they
are about to do.
This is more of a usability concern than accessibility.
In general, try to standardize the way you use icons on your website
and also standardize the text alternatives so they are consistent.

And, yes, the font replacement is a problem, though not covered
directly by WCAG, it could be a usability issue. SVG is the long-term
solution, but just make sure you have as much info available in text
as possible and don't get too carried away by the awesomeness of icons
(they are pretty cool and they are useful io many users)





On 8/1/17, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
> On 01/08/2017 13:56, Jim Homme wrote:
>> Hi,
>> I am learning to work with Font Awesom icons as part of web development
>> training. I want to learn to make them accessible now so I won't have to
>> re-learn them correctly. Hope this makes sense. Can anyone please point me
>> to information aboutmaking these accessible?
>
>
> While not perfect, the information on
> http://fontawesome.io/accessibility/ might start you off in the right
> direction. This is cribbed in part from the accessibility advice on
> http://getbootstrap.com/components/#glyphicons-how-to-use (different
> icon font system, same idea behind it though).
>
> Of course there are gaps here - particularly when it comes to users who
> may have their own font preferences set that override author-defined
> fonts. Moving to SVG-based icon solutions is the more robust approach
> here in most cases.
>
> P
> --
> Patrick H. Lauke
>
> www.splintered.co.uk<;http://www.splintered.co.uk>; | https://github.com/patrickhlauke
> http://flickr.com/photos/redux/ | http://redux.deviantart.com
> twitter: @patrick_h_lauke | skype: patrick_h_lauke
> > > > >


--
Work hard. Have fun. Make history.