WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Trying to Understand 2.5.3

for

From: Birkir R. Gunnarsson
Date: Sep 3, 2019 10:31AM

One point of clarification, this SC does not cover situations where
controls are visuall labeled with an icon but no text, e.g. a search
button labeled with a magnifying glass icon.
The following code could represent button labeled with a Font Awesome
icon, its aria-label text can be anything you like since there is no
visible text on the button.

<button aria-label="search"><I class="fa fa-search"></I></button>

I filed a WCAG 2.1 issue expressing concerns about this, since these
are the widgets that need to be operable by screen readers and speech
recognition software.

This SC does not apply to divs or spans unless those form the basis of
an operabl component (such as a link, dropdown or text input).

The following would violate 2.5.3
<label for="fn">First name</label>
<input type="text" id="fn" aria-label="your name">
(this would also be stupid UI of course)



On 9/3/19, Patrick H. Lauke < <EMAIL REMOVED> > wrote:
> 2.5.3 applies to user interface components (buttons, form controls,
> links, etc).
>
> These have an accessible name (what is conveyed by, say, AT when they
> receive focus).
>
> This SC wants to ensure that if there's any visible text that also acts
> as a visual label for that control (which may well be a properly
> associated label element, or the text content of the button, or
> whatever), that the accessible name still contains that text, so that
> speech users know how they can invoke that particular control.
>
> <button>Press me</button> would be valid, as "Press me" is both the
> visible text, and in the absence of anything else that's also the
> accessible name.
>
> <button aria-label="Press me for more information">Press me</button>
> would also be valid. The aria-label here overrides the visible text, but
> the accessible name still includes "Press me".
>
> <button aria-label="For more information, press me and find out">Press
> me</button> is valid - although there's other text in the accessible
> name provided by the aria-label, it does still contain "press me" in
> that exact order (doesn't matter if there's text before/after it)
>
> <button aria-label="Press the button">Press me</button> fails as the
> accessible name does not contain "press me".
>
> Everything else you mention (adding aria-labelledby to a label, adding
> alt to things, doing stuff with divs and spans) is all
> irrelevant/nothing to do with 2.5.3
>
> P
>
> On 03/09/2019 16:30, JP Jamous wrote:
>> Hi folks,
>>
>>
>>
>> As I am reading WCAG 2.1, I am really struggling with 2.5.3 Label in
>> Name.
>> Here are the questions I have.
>>
>>
>>
>> 1. Does aria-labelledby have to be used even on <label>?
>> 2. Does this success criterion suggest that we have to add alt and
>> title attributes to any HTML element? I had developers in the past use
>> alt
>> attributes on an anchor tag, which is improper markup.
>> 3. Does 2.5.3 target elements that are divs and spans by ensuring that
>> they have a role and aria-label with the visible text embedded?
>>
>>
>>
>>
>>
>> I think what I am lacking to understand this success criterion is some
>> markup to go along with it. Any help will be much appreciated.
>>
>>
>>
>>
>>
>>
>>
>> --------------------
>>
>> JP Jamous
>>
>> Senior Digital Accessibility Engineer
>>
>> <mailto: <EMAIL REMOVED> > E-Mail Me | <http://linkedin.com/in/JPJamous>;
>> Join
>> My LinkedIn Network
>>
>> --------------------
>>
>>
>>
>>
>>
>> >> >> >> >>
>
>
> --
> 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.