WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons and Pseudo-elements

for

From: Patrick H. Lauke
Date: Apr 13, 2016 12:04PM

On 13/04/2016 18:51, Joseph Sherman wrote:
> I read that guide, but it's not correct. In the section on "If an
> icon represents an interactive element", it relies on the Title
> attribute to provide an accessible alternative name for the element.
> In my testing, the screen reader just says "link" and does not read
> the Title when: using JAWS and the "H" key; or having NVDA or JAWS
> list the elements; or when on a Mac using VoiceOver.

According to the Name Computation algorithm, title should be taken into
account (as a last resort) to provide an accessible name
https://www.w3.org/TR/wai-aria/roles#textalternativecomputation - it
could be argued that AT that do not use/expose title are not quite
following the recommended algorithm.

Of course, there are more elegant ways of providing the extra label,
such as using actual aria-label, or using the same approach as in the
previous section of that guide, namely the visually hidden content.

I may push for an expanded explanation/suggestion in that guide, to
cover some alternatives.

P

>
>
> Joseph
>
>
>
> -----Original Message----- From: WebAIM-Forum
> [mailto: <EMAIL REMOVED> ] On Behalf Of Caitlin
> Geier Sent: Wednesday, April 13, 2016 12:56 PM To: WebAIM Discussion
> List Subject: Re: [WebAIM] Font Icons and Pseudo-elements
>
>
>
> FontAwesome (one of the most popular icon font libraries) just
> released a guide for using icon fonts accessibly -
> http://fontawesome.io/accessibility/
>
>
>
> I find icon fonts to be quite useful - they're easy to implement and
> manage, and you don't have to have a designer slaving away to create
> custom images / icons to represent something. That being said, it's
> often better to just use text. In the application I'm working on, we
> mostly use them as decoration (aria-hidden=true).
> > subscription, visit http://list.webaim.org/ List archives at
> http://webaim.org/discussion/archives > <EMAIL REMOVED>
>

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