WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Sonja Weckenmann
Date: May 21, 2017 5:26AM

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