WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Switch Control Focus issues

for

From: Birkir R. Gunnarsson
Date: Nov 13, 2021 8:05AM

Technically you don't need aria-hidden="true" or role="presentation"
on the <span> (unless it has a CSS:content attribute with text). What
happens if you leave both of those out?


On 11/11/21, Jonathan C. Cohn < <EMAIL REMOVED> > wrote:
> Well, is the problem because of voiceover providing the focus ring? If so
> there is not much you can do about this. If not then only looking at CSS can
> give ideas about visual issues Though I believe icon fonts are frowned upon
> 'Especially with charactersin
>
> The ASCII range.
> Sent from my iPhone
>
>> On Nov 10, 2021, at 11:07 PM, Sudheer Babu < <EMAIL REMOVED> > wrote:
>>
>> Hi All,
>>
>> We have an element like below, where the modifier icon and the text are
>> inside an anchor tag
>> [image: image.png]
>>
>> The below code snippet is used and the focus works fine on all except iOS
>> voiceover and Switch control where the focus just goes to the text and
>> doesn't cover the entire element as shown in the above pic. This works
>> fine
>> on desktop and Android where the focus is on the entire element as in the
>> below pic:
>> [image: image.png]
>>
>> <a href="/xxxxx.html"
>> class="cmp-product-details-main__variations-size-anchor">
>> <span aria-hidden="true"
>> class="cmp-product-details-main__variations-size-short">L</span>
>> <span class="cmp-product-details-main__variations-size-title">Large</span>
>> </a>
>>
>> Can someone please suggest what needs to be done to get the focus on the
>> entire element on iOS for Voiceover and switch control.
>>
>> If we are trying to add role=presentation instead of aria-hidden=true for
>> the icons, the focus goes to individual elements on talkback.
>>
>> Appreciate the help!
>>
>> Thanks,
>> Sudheer
>> >> >> >> > > > > >


--
Work hard. Have fun. Make history.