WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Dropdown label issue

for

From: glen walker
Date: Dec 18, 2019 11:20AM

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