WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Font Icons with title / aria-label fail 1.3.1?

for

From: Patrick H. Lauke
Date: May 21, 2017 4:58AM

On 21/05/2017 11:54, Sonja Weckenmann wrote:
>
>
> Am 21.05.2017 um 12:25 schrieb Patrick H. Lauke:
>> On 21/05/2017 10:59, Sonja Weckenmann wrote:
>>> Hallo,
>>>
>>> I think, Font Icons with title or aria-label meet Success Criterion
>>> 1.1.1. (even though it might be better to have a HTML text alternative
>>> that is offscreen positioned), right?
>>>
>>> I'm wondering if 1.3.1 fails when theres only a title or aria-label.
>>> - relating to the Test in "F87: Failure of Success Criterion 1.3.1 due
>>> to inserting non-decorative content by using :before and :after
>>> pseudo-elements and the 'content' property in CSS".
>>>
>>> It seems to me very strict.
>>>
>>> How would you rate?
>>
>> No, because the actual alternative content isn't inserted using the CSS,
>> but already present in the HTML. You're not generating the
>> title/aria-label/whatever via :before/:after
>>
>
> Yes, the content is present in the HTML and provided to assistive
> technologies - but not available when you turn off CSS?

With CSS turned off (for whatever reason), the visible icon won't be
there, but the actual content will still be in the HTML, so no.

Take something like <button aria-label="Close"><span
class="icon-close"></span></button> of whatever. Even if the actual CSS
generated icon is not visually shown, the aria-label is still present,
no? AT isn't reliant on the icon itself, but on the aria-label.

P

> Strictly speaking #3 of the Test in F87 is false?
>
> But seems to me, what more matters is that it is not generated via
> :before/:after.
>
> Thanks. Sonja
> > > > --
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