WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: WebAIM-Forum Digest, Vol 182, Issue 21

for

From: Shannon Urban
Date: May 20, 2020 9:47AM

Re: Tab panels not reading on Android '

@Joe Humbert - Chrome on Android devices.



On Tue, May 19, 2020 at 1:00 PM < <EMAIL REMOVED> >
wrote:

> Send WebAIM-Forum mailing list submissions to
> <EMAIL REMOVED>
>
> To subscribe or unsubscribe via the World Wide Web, visit
> http://list.webaim.org/mailman/listinfo/webaim-forum
> or, via email, send a message with subject or body 'help' to
> <EMAIL REMOVED>
>
> You can reach the person managing the list at
> <EMAIL REMOVED>
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of WebAIM-Forum digest..."
> Today's Topics:
>
> 1. Re: Why does NVDA concatenate React tabs into a single
> element? (glen walker)
> 2. Re: Why does NVDA concatenate React tabs into a single
> element? (Jonathan Cohn)
> 3. Re: Why does NVDA concatenate React tabs into a single
> element? (Murphy, Sean)
> 4. Tab panels not reading on Android (Shannon Urban)
> 5. Re: Tab panels not reading on Android ( <EMAIL REMOVED> )
>
>
>
> ---------- Forwarded message ----------
> From: glen walker < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Cc:
> Bcc:
> Date: Mon, 18 May 2020 16:31:38 -0600
> Subject: Re: [WebAIM] Why does NVDA concatenate React tabs into a single
> element?
> display: inline-block
>
> The following example is read the same way, all elements are read at the
> same time when using the down arrow with NVDA.
>
> <style>
> li {display:inline-block;}
> </style>
>
> <ul>
> <li>alpha</li>
> <li>beta</li>
> <li>gamma</li>
> </ul>
>
> I get similar behavior with other elements when using the down arrow with
> NVDA. Several elements are read at the same time. I guess this is
> expected behavior. I've heard it before but just ignored it. I knew there
> was a reason but didn't have enough incentive to look it up.
>
> <button>alpha</button>
> <br>
> <button>beta</button>
> <button>gamma</button>
> <br>
>
> The alpha button is read by itself but the beta and gamma buttons are read
> as one line when using the down arrow. The buttons are essentially inline,
> just like the list items when using inline-block.
>
> I don't think it's a problem in your scenario. I can tab (key) to the tab
> widget and use the left/right arrow keys with NVDA running and it switches
> tabs. The fact that it reads all the tabs as one line when using the down
> arrow is ok.
>
>
> On Mon, May 18, 2020 at 10:09 AM Mark Magennis <
> <EMAIL REMOVED> >
> wrote:
>
> > Dear all,
> >
> > I have a problem with a tab bar . If I arrow into it using NVDA/Firefox
> > the three tabs are read as a single element. It seems to be related to a
> > class="react-tabs__tab" on the <li role="tab"> because the addition of
> that
> > class seems to cause Firefox to remove one of the listitem's children
> from
> > the accessibility tree. In a tab bar without this class, each tab node
> has
> > two children - a statictext bullet and a text leaf containing the text of
> > the list item. NVDA reads each tab as a separate element. But the
> addition
> > of class="react-tabs__tab" to the <li role="listitem"> seems to cause
> > Firefox to remove the bullet from the tree and NVDA concatenates all tabs
> > into one element. The class definition is:
> >
> > :global(.react-tabs__tab) {
> > position: relative;
> > display: inline-block; /* Include border-bottom width */
> > padding: var(--space16) var(--space24) calc(var(--space16) - 5px)
> > var(--space24);
> > font-size: var(--font18);
> > font-weight: 700;
> > color: var(--lightNeutralColor);
> > text-transform: uppercase;
> > letter-spacing: 0.5px;
> > list-style: none;
> > cursor: pointer;
> > outline: 1px solid transparent;
> > }
> > Disabling list-style or display has no effect.
> >
> > I've looked at this in Chrome and I see that it removes the bullet child
> > from a listitem in the accessibility tree when you add the tab role to
> the
> > <li>s, but NVDA still reads the tabs as separate elements, so it doesn't
> > seem to be just the existence of that bullet.
> >
> > At this point I'm a bit stumped. Can anyone suggest a possible solution
> or
> > further avenue for investigation?
> >
> > If you want to see the full source, you can access Skillsoft's whole
> > eLearning library for free for 60 days during Covid-19. Go to
> > skillsoft.com, follow the Free Access link, fill in your name, email,
> and
> > company name and select Get Access. You'll get an email with a link for
> > setting a password and logging in. Once you are in, and have got past the
> > short onboarding where you get to select your areas of interest, tab to
> any
> > course on the home page and launch it. Arrow down to the tab bar
> containing
> > Content, Overview and Resources tabs and see what happens.
> >
> > I appreciate any help anyone can give me on this.
> >
> > Mark
> >
> > Mark Magennis
> > Skillsoft | mobile: +353 87 60 60 162
> > Accessibility Specialist
> > [cid:image001.jpg@01D62D31.80FA67F0]<http://www.skillsoft.com/>;
> >
> > > > > > > > > >
>
>
>
>
> ---------- Forwarded message ----------
> From: Jonathan Cohn < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Cc:
> Bcc:
> Date: Mon, 18 May 2020 21:50:52 -0400
> Subject: Re: [WebAIM] Why does NVDA concatenate React tabs into a single
> element?
> This is called screen layout mode and can be adjusted in the Browse mode
> settings. JAWS also has a setting that is more likely to keep multiple
> object on the same line as a single phrase, though the default between NVDA
> and Jaws are different.
>
> > On May 18, 2020, at 6:31 PM, glen walker < <EMAIL REMOVED> > wrote:
> >
> > display: inline-block
> >
> > The following example is read the same way, all elements are read at the
> > same time when using the down arrow with NVDA.
> >
> > <style>
> > li {display:inline-block;}
> > </style>
> >
> > <ul>
> > <li>alpha</li>
> > <li>beta</li>
> > <li>gamma</li>
> > </ul>
> >
> > I get similar behavior with other elements when using the down arrow with
> > NVDA. Several elements are read at the same time. I guess this is
> > expected behavior. I've heard it before but just ignored it. I knew
> there
> > was a reason but didn't have enough incentive to look it up.
> >
> > <button>alpha</button>
> > <br>
> > <button>beta</button>
> > <button>gamma</button>
> > <br>
> >
> > The alpha button is read by itself but the beta and gamma buttons are
> read
> > as one line when using the down arrow. The buttons are essentially
> inline,
> > just like the list items when using inline-block.
> >
> > I don't think it's a problem in your scenario. I can tab (key) to the
> tab
> > widget and use the left/right arrow keys with NVDA running and it
> switches
> > tabs. The fact that it reads all the tabs as one line when using the
> down
> > arrow is ok.
> >
> >
> > On Mon, May 18, 2020 at 10:09 AM Mark Magennis <
> <EMAIL REMOVED> >
> > wrote:
> >
> >> Dear all,
> >>
> >> I have a problem with a tab bar . If I arrow into it using NVDA/Firefox
> >> the three tabs are read as a single element. It seems to be related to a
> >> class="react-tabs__tab" on the <li role="tab"> because the addition of
> that
> >> class seems to cause Firefox to remove one of the listitem's children
> from
> >> the accessibility tree. In a tab bar without this class, each tab node
> has
> >> two children - a statictext bullet and a text leaf containing the text
> of
> >> the list item. NVDA reads each tab as a separate element. But the
> addition
> >> of class="react-tabs__tab" to the <li role="listitem"> seems to cause
> >> Firefox to remove the bullet from the tree and NVDA concatenates all
> tabs
> >> into one element. The class definition is:
> >>
> >> :global(.react-tabs__tab) {
> >> position: relative;
> >> display: inline-block; /* Include border-bottom width */
> >> padding: var(--space16) var(--space24) calc(var(--space16) - 5px)
> >> var(--space24);
> >> font-size: var(--font18);
> >> font-weight: 700;
> >> color: var(--lightNeutralColor);
> >> text-transform: uppercase;
> >> letter-spacing: 0.5px;
> >> list-style: none;
> >> cursor: pointer;
> >> outline: 1px solid transparent;
> >> }
> >> Disabling list-style or display has no effect.
> >>
> >> I've looked at this in Chrome and I see that it removes the bullet child
> >> from a listitem in the accessibility tree when you add the tab role to
> the
> >> <li>s, but NVDA still reads the tabs as separate elements, so it doesn't
> >> seem to be just the existence of that bullet.
> >>
> >> At this point I'm a bit stumped. Can anyone suggest a possible solution
> or
> >> further avenue for investigation?
> >>
> >> If you want to see the full source, you can access Skillsoft's whole
> >> eLearning library for free for 60 days during Covid-19. Go to
> >> skillsoft.com, follow the Free Access link, fill in your name, email,
> and
> >> company name and select Get Access. You'll get an email with a link for
> >> setting a password and logging in. Once you are in, and have got past
> the
> >> short onboarding where you get to select your areas of interest, tab to
> any
> >> course on the home page and launch it. Arrow down to the tab bar
> containing
> >> Content, Overview and Resources tabs and see what happens.
> >>
> >> I appreciate any help anyone can give me on this.
> >>
> >> Mark
> >>
> >> Mark Magennis
> >> Skillsoft | mobile: +353 87 60 60 162
> >> Accessibility Specialist
> >> [cid:image001.jpg@01D62D31.80FA67F0]<http://www.skillsoft.com/>;
> >>
> >> > >> > >> > >> > >>
> > > > > > > > >
>
>
>
>
> ---------- Forwarded message ----------
> From: "Murphy, Sean" < <EMAIL REMOVED> >
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Cc:
> Bcc:
> Date: Tue, 19 May 2020 02:00:24 +0000
> Subject: Re: [WebAIM] Why does NVDA concatenate React tabs into a single
> element?
> Thanks for this, as I was going to outline the same. Each screen reader
> has slight differences in this space on the different platforms.
>
>
>
>
> Sean Murphy | Digital System specialist (Accessibility)
> Telstra Digital Channels | Digital Systems
> Mobile: 0405 129 739 | Desk: (02) 9866-7917
> Digital Systems Launch Page
> Accessibility Single source of Truth
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Jonathan Cohn
> Sent: Tuesday, 19 May 2020 11:51 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Why does NVDA concatenate React tabs into a single
> element?
>
> [External Email] This email was sent from outside the organisation – be
> cautious, particularly with links and attachments.
>
> This is called screen layout mode and can be adjusted in the Browse mode
> settings. JAWS also has a setting that is more likely to keep multiple
> object on the same line as a single phrase, though the default between NVDA
> and Jaws are different.
>
> > On May 18, 2020, at 6:31 PM, glen walker < <EMAIL REMOVED> > wrote:
> >
> > display: inline-block
> >
> > The following example is read the same way, all elements are read at
> > the same time when using the down arrow with NVDA.
> >
> > <style>
> > li {display:inline-block;}
> > </style>
> >
> > <ul>
> > <li>alpha</li>
> > <li>beta</li>
> > <li>gamma</li>
> > </ul>
> >
> > I get similar behavior with other elements when using the down arrow
> > with NVDA. Several elements are read at the same time. I guess this
> > is expected behavior. I've heard it before but just ignored it. I
> > knew there was a reason but didn't have enough incentive to look it up.
> >
> > <button>alpha</button>
> > <br>
> > <button>beta</button>
> > <button>gamma</button>
> > <br>
> >
> > The alpha button is read by itself but the beta and gamma buttons are
> > read as one line when using the down arrow. The buttons are
> > essentially inline, just like the list items when using inline-block.
> >
> > I don't think it's a problem in your scenario. I can tab (key) to the
> > tab widget and use the left/right arrow keys with NVDA running and it
> > switches tabs. The fact that it reads all the tabs as one line when
> > using the down arrow is ok.
> >
> >
> > On Mon, May 18, 2020 at 10:09 AM Mark Magennis
> > < <EMAIL REMOVED> >
> > wrote:
> >
> >> Dear all,
> >>
> >> I have a problem with a tab bar . If I arrow into it using
> >> NVDA/Firefox the three tabs are read as a single element. It seems to
> >> be related to a class="react-tabs__tab" on the <li role="tab">
> >> because the addition of that class seems to cause Firefox to remove
> >> one of the listitem's children from the accessibility tree. In a tab
> >> bar without this class, each tab node has two children - a statictext
> >> bullet and a text leaf containing the text of the list item. NVDA
> >> reads each tab as a separate element. But the addition of
> >> class="react-tabs__tab" to the <li role="listitem"> seems to cause
> >> Firefox to remove the bullet from the tree and NVDA concatenates all
> tabs into one element. The class definition is:
> >>
> >> :global(.react-tabs__tab) {
> >> position: relative;
> >> display: inline-block; /* Include border-bottom width */
> >> padding: var(--space16) var(--space24) calc(var(--space16) - 5px)
> >> var(--space24);
> >> font-size: var(--font18);
> >> font-weight: 700;
> >> color: var(--lightNeutralColor);
> >> text-transform: uppercase;
> >> letter-spacing: 0.5px;
> >> list-style: none;
> >> cursor: pointer;
> >> outline: 1px solid transparent;
> >> }
> >> Disabling list-style or display has no effect.
> >>
> >> I've looked at this in Chrome and I see that it removes the bullet
> >> child from a listitem in the accessibility tree when you add the tab
> >> role to the <li>s, but NVDA still reads the tabs as separate
> >> elements, so it doesn't seem to be just the existence of that bullet.
> >>
> >> At this point I'm a bit stumped. Can anyone suggest a possible
> >> solution or further avenue for investigation?
> >>
> >> If you want to see the full source, you can access Skillsoft's whole
> >> eLearning library for free for 60 days during Covid-19. Go to
> >> skillsoft.com, follow the Free Access link, fill in your name, email,
> >> and company name and select Get Access. You'll get an email with a
> >> link for setting a password and logging in. Once you are in, and have
> >> got past the short onboarding where you get to select your areas of
> >> interest, tab to any course on the home page and launch it. Arrow
> >> down to the tab bar containing Content, Overview and Resources tabs and
> see what happens.
> >>
> >> I appreciate any help anyone can give me on this.
> >>
> >> Mark
> >>
> >> Mark Magennis
> >> Skillsoft | mobile: +353 87 60 60 162 Accessibility Specialist
> >> [cid:image001.jpg@01D62D31.80FA67F0]<http://www.skillsoft.com/>;
> >>
> >> > >> > >> archives at http://webaim.org/discussion/archives
> >> > >>
> > > > > > archives at http://webaim.org/discussion/archives
> > >
> > > at http://webaim.org/discussion/archives
> >
>
>
> ---------- Forwarded message ----------
> From: Shannon Urban < <EMAIL REMOVED> >
> To: <EMAIL REMOVED>
> Cc:
> Bcc:
> Date: Tue, 19 May 2020 10:36:57 -0500
> Subject: [WebAIM] Tab panels not reading on Android
> We support Talkback on Android (not a native app, but using browser on an
> Android device) and are struggling with it reading our Tab Panels. I found
> this link:
> https://a11y-guidelines.orange.com/mobile_EN/criteria-android.htm
> <https://a11y-guidelines.orange.com/mobile_EN/criteria-android.html> but
> my
> devs say this doesn't support HTML and that it's for native android
> components. I haven't been able to find any other solutions. Does anyone
> here have any recommendations for getting Talkback to read our Tab panels?
>
> Thanks!
>
>
>
>
> ---------- Forwarded message ----------
> From: < <EMAIL REMOVED> >
> To: "'WebAIM Discussion List'" < <EMAIL REMOVED> >
> Cc:
> Bcc:
> Date: Tue, 19 May 2020 12:12:35 -0400
> Subject: Re: [WebAIM] Tab panels not reading on Android
> What web browser are you trying to target on Android? Chrome? Firefox? I
> will do some research.
>
> Thankx,
> Joe Humbert
> Accessibility Champion
> Android & iOS Accessibility Novice
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of
> Shannon Urban
> Sent: Tuesday, May 19, 2020 11:37 AM
> To: <EMAIL REMOVED>
> Subject: [WebAIM] Tab panels not reading on Android
>
> We support Talkback on Android (not a native app, but using browser on an
> Android device) and are struggling with it reading our Tab Panels. I found
> this link:
> https://a11y-guidelines.orange.com/mobile_EN/criteria-android.htm
> <https://a11y-guidelines.orange.com/mobile_EN/criteria-android.html> but
> my
> devs say this doesn't support HTML and that it's for native android
> components. I haven't been able to find any other solutions. Does anyone
> here have any recommendations for getting Talkback to read our Tab panels?
>
> Thanks!
> > > at
> http://webaim.org/discussion/archives
> >
>
> > > > >