WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Switch Control Focus issues

for

From: Jonathan C. Cohn
Date: Nov 11, 2021 6:21AM

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