WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL]Why does NVDA concatenate React tabs into a single element?

for

From: Jonathan Cohn
Date: May 20, 2020 11:25AM


If you don't want to listen to us about if this is how NVDA users expect your layout, then please join the nvda group at groups.io <http://groups.io/>; and ask them to review the patterns you are looking into and if they feel they understand what you are attempting to do.
There are over 1300 NVDA users on that list some of whom are quite vocal.
Jonathan


> On May 19, 2020, at 2:50 PM, Mark Magennis < <EMAIL REMOVED> > wrote:
>
> So I guess what you're all saying is, this is the way NVDA works with this CSS and users can cope with it and get around it? It seems avoidable though and I do think it would be preferable if this didn't happen. I'll talk to my devs and see if they can use alternative CSS.
>
> Thanks guys.
>
> MArk
>
> Mark Magennis
> Skillsoft | mobile: +353 87 60 60 162
> Accessibility Specialist
>
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Murphy, Sean
> Sent: 19 May 2020 03:00
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [EXTERNAL] 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
>> >
> > > > > > >