WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

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

From: Sonja Weckenmann
Date: Sun, May 21 2017 3:59AM
Subject: Font Icons with title / aria-label fail 1.3.1?
No previous message | Next message →

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?

Thanks a lot.
Sonja

From: Patrick H. Lauke
Date: Sun, May 21 2017 4:25AM
Subject: Re: Font Icons with title / aria-label fail 1.3.1?
← Previous message | Next message →

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

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: Sonja Weckenmann
Date: Sun, May 21 2017 4:54AM
Subject: Re: Font Icons with title / aria-label fail 1.3.1?
← Previous message | Next message →

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?

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

From: Patrick H. Lauke
Date: Sun, May 21 2017 4:58AM
Subject: Re: Font Icons with title / aria-label fail 1.3.1?
← Previous message | Next message →

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

From: Sonja Weckenmann
Date: Sun, May 21 2017 5:26AM
Subject: Re: Font Icons with title / aria-label fail 1.3.1?
← Previous message | No next message

Am 21.05.2017 um 12:58 schrieb Patrick H. Lauke:
> 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.

I thought it might be important to look at the content with CSS turned
off because people might apply alternate style sheets.

But I'm happy with your explanation, just wanted to make shure that I
don't miss something.

Thanks a lot.
s.

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