E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 2 (In chronological order)

From: Raghavendra G
Date: Tue, May 05 2020 2:58AM
Subject: WebAIM-Forum Digest, GAAD Event
No previous message | Next message →

Dear All,

There is an interesting Accessibility Virtual sessions for Global
Accessibility Awareness Day on 21st May 2020. If anyone is interested
please register by clicking on the below link.

helloA11Y is yet again proud to announce the GAAD event on 21 of May
2020 – the third Thursday in May. Keeping the social distancing in
mind, we are planning
to conduct this event online with speakers across the globe sharing
their a11y ideas, thoughts and experiences with everyone who cares for
inclusivity.


https://www.helloa11y.com/

Raghu


On 5/4/20, = EMAIL ADDRESS REMOVED =
< = EMAIL ADDRESS REMOVED = > wrote:
> Send WebAIM-Forum mailing list submissions to
> = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
> You can reach the person managing the list at
> = EMAIL ADDRESS REMOVED =
>
> When replying, please edit your Subject line so it is more specific
> than "Re: Contents of WebAIM-Forum digest..."
>

From: Shannon Urban
Date: Wed, May 20 2020 9:47AM
Subject: Re: WebAIM-Forum Digest, Vol 182, Issue 21
← Previous message | No next message

Re: Tab panels not reading on Android '

@Joe Humbert - Chrome on Android devices.



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

> Send WebAIM-Forum mailing list submissions to
> = EMAIL ADDRESS 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 ADDRESS REMOVED =
>
> You can reach the person managing the list at
> = EMAIL ADDRESS 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 ADDRESS REMOVED = )
>
>
>
> ---------- Forwarded message ----------
> From: glen walker < = EMAIL ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Jonathan Cohn
> Sent: Tuesday, 19 May 2020 11:51 AM
> To: WebAIM Discussion List < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
> To: = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: "'WebAIM Discussion List'" < = EMAIL ADDRESS 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 ADDRESS REMOVED = > On Behalf Of
> Shannon Urban
> Sent: Tuesday, May 19, 2020 11:37 AM
> To: = EMAIL ADDRESS 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
> >
>
> > > > >