WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dropdown label issue

for

From: Jonathan Avila
Date: Dec 19, 2019 7:26AM

On IOS 13 you can use the Voice Control feature to find out if an accessible name is associated with the control. If you turn on Voice Control under Accessibility and say "Show names" it will show the accessible name of each field and label. If there is no accessible name it would just say the role such as "text" for inputs -- but doesn't show anything for select fields. For an input you would see the name twice -- once on the label once on the field if it was associated correctly. If the label was not associated you would see the name on the label but something like "text" for the text field. Unfortunately it doesn't seem to work right with select elements though.

Jonathan

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of allyssa jessicon
Sent: Wednesday, December 18, 2019 10:46 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Dropdown label issue

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


Yes, when reverse swiping the same occurs. i would like to know is it happening because the label is not programmatically associated to the dropdown control? and in which guideline will it come? how can i remediate this?

On 12/18/19, glen walker < <EMAIL REMOVED> > wrote:
> If you have a real <label> and it's associated with a real <select>
> via the FOR attribute, then when swiping right (assuming you're
> testing VoiceOver on iOS) the visible text for the label will not
> receive direct focus. The focus moves to the <select>.
>
> <label for="gifts">pick your gift</label> <select id="gifts">
> <option>car</option>
> <option>watch</option>
> <option>computer</option>
> <option>hug</option>
> </select>
>
> However, if your label is just text and you're associating the label
> with aria-labelledby or some other mechanism, then the text label
> *can* be focused separately from the <select>. That's not a
> violation. The <select> still has a proper label so 4.1.2 is ok. You
> just coded it to allow a separate voiceover "tab stop". Perhaps not a
> great user experience but not a violation.
>
> <p id="gift2s">pick your gift</p>
> <select aria-labelledby="gifts2">
> <option>car</option>
> <option>watch</option>
> <option>computer</option>
> <option>hug</option>
> </select>
>
>
> On Tue, Dec 17, 2019 at 10:28 PM allyssa jessicon
> < <EMAIL REMOVED> >
> wrote:
>
>> Suppose there is a dropdown with item lists 1,2,3 etc. there is a
>> visual text to indicate the dropdown name, lets take it as ‘Quantity'.
>> When I swipe right from the visual text/heading ‘Quantity', screen
>> reader is reading ‘Quantity' which is hidden and hopefully the label
>> of the dropdown, but when I swipe right again now screen reader is
>> reading dropdown list ant, is it a WCAG violation? Which SC is
>> covering this? Is it Labels or instructions? Any help would be
>> appreciated.
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
> > > archives at http://webaim.org/discussion/archives
> >