E-mail List Archives

Search E-mail List Archives for

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

From: Lucy GRECO
Date: Wed, Nov 18 2020 3:54PM
Subject: Help troubleshooting some code
No previous message | Next message →

Hello:

We are working with a vendor and have found a strange behavior in the way
something is behaving, and I was hoping someone could help us find out why
it's doing what it is.

This is part of a live chat implementation. In the below sample of code,
the text (chat history, in the paragraph tags) is being read out by the
screenreader as one large block of text, when it should be showing up as
separate lines of text. The text is not contained inside an ARIA live
region or alert. This is happening when using arrow navigation and also
when reading all from the beginning of the history.

Does anyone know what might be going on here?

Sample Code

<div class="conversation-container" aria-label="chat">
<div class="message-block-container">
<div class="message-block">
<div class="message-container">
<div class="message-group" role="group" aria-label="messages from
you">
<p class="visitor-message">Here is my chat</p>
<p class="visitor-message">it is very chatty</p>
<p class="visitor-message">isn't it?</p>
</div>
</div>
</div>
</div>
</div>

Thanks,
Lucy

Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces

From: Weston Thayer
Date: Wed, Nov 18 2020 4:13PM
Subject: Re: Help troubleshooting some code
← Previous message | Next message →

What screen reader and browser combination are you using? I tested NVDA
2020.3 and Firefox 81 with https://output.jsbin.com/vufaropijo and was able
to press the down arrow to reach each line individually. Factory NVDA
settings.

Weston Thayer
https://assistivlabs.com

On Wed, Nov 18, 2020 at 2:55 PM Lucy GRECO < = EMAIL ADDRESS REMOVED = > wrote:

> Hello:
>
> We are working with a vendor and have found a strange behavior in the way
> something is behaving, and I was hoping someone could help us find out why
> it's doing what it is.
>
> This is part of a live chat implementation. In the below sample of code,
> the text (chat history, in the paragraph tags) is being read out by the
> screenreader as one large block of text, when it should be showing up as
> separate lines of text. The text is not contained inside an ARIA live
> region or alert. This is happening when using arrow navigation and also
> when reading all from the beginning of the history.
>
> Does anyone know what might be going on here?
>
> Sample Code
>
> <div class="conversation-container" aria-label="chat">
> <div class="message-block-container">
> <div class="message-block">
> <div class="message-container">
> <div class="message-group" role="group" aria-label="messages from
> you">
> <p class="visitor-message">Here is my chat</p>
> <p class="visitor-message">it is very chatty</p>
> <p class="visitor-message">isn't it?</p>
> </div>
> </div>
> </div>
> </div>
> </div>
>
> Thanks,
> Lucy
>
> Lucia Greco
> Web Accessibility Evangelist
> IST - Architecture, Platforms, and Integration
> University of California, Berkeley
> (510) 289-6008 skype: lucia1-greco
> http://webaccess.berkeley.edu
> Follow me on twitter @accessaces
> > > > >

From: Birkir R. Gunnarsson
Date: Wed, Nov 18 2020 4:14PM
Subject: Re: Help troubleshooting some code
← Previous message | Next message →

I would remove role="group" and aria-label from the div and see if the
behavior changes. It shouldn't change it in theory but I also think
this grouping is not necessary and it may be triggering something. Are
you usre there is no live region on one of the divs further up in the
document hierarchy?

On 11/18/20, Lucy GRECO < = EMAIL ADDRESS REMOVED = > wrote:
> Hello:
>
> We are working with a vendor and have found a strange behavior in the way
> something is behaving, and I was hoping someone could help us find out why
> it's doing what it is.
>
> This is part of a live chat implementation. In the below sample of code,
> the text (chat history, in the paragraph tags) is being read out by the
> screenreader as one large block of text, when it should be showing up as
> separate lines of text. The text is not contained inside an ARIA live
> region or alert. This is happening when using arrow navigation and also
> when reading all from the beginning of the history.
>
> Does anyone know what might be going on here?
>
> Sample Code
>
> <div class="conversation-container" aria-label="chat">
> <div class="message-block-container">
> <div class="message-block">
> <div class="message-container">
> <div class="message-group" role="group" aria-label="messages from
> you">
> <p class="visitor-message">Here is my chat</p>
> <p class="visitor-message">it is very chatty</p>
> <p class="visitor-message">isn't it?</p>
> </div>
> </div>
> </div>
> </div>
> </div>
>
> Thanks,
> Lucy
>
> Lucia Greco
> Web Accessibility Evangelist
> IST - Architecture, Platforms, and Integration
> University of California, Berkeley
> (510) 289-6008 skype: lucia1-greco
> http://webaccess.berkeley.edu
> Follow me on twitter @accessaces
> > > > >


--
Work hard. Have fun. Make history.

From: Lucy GRECO
Date: Wed, Nov 18 2020 5:59PM
Subject: Re: Help troubleshooting some code
← Previous message | Next message →

hello: i was able to here the same results with both aws and nvda. in
firefox. and yes berker i asked already to have the group removed and when
we did so loackaly it made no difference. as ar as the screenreader is
concerned it is one block and if it does not have punctuation it even runs
the words together so if the messages are step one do this
step step 2 move
and step three that is all it will read like this
step one dothisstep 2 then do thatstep three that is the end
no line spacing or other wize
Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces



On Wed, Nov 18, 2020 at 3:14 PM Birkir R. Gunnarsson <
= EMAIL ADDRESS REMOVED = > wrote:

> I would remove role="group" and aria-label from the div and see if the
> behavior changes. It shouldn't change it in theory but I also think
> this grouping is not necessary and it may be triggering something. Are
> you usre there is no live region on one of the divs further up in the
> document hierarchy?
>
> On 11/18/20, Lucy GRECO < = EMAIL ADDRESS REMOVED = > wrote:
> > Hello:
> >
> > We are working with a vendor and have found a strange behavior in the way
> > something is behaving, and I was hoping someone could help us find out
> why
> > it's doing what it is.
> >
> > This is part of a live chat implementation. In the below sample of code,
> > the text (chat history, in the paragraph tags) is being read out by the
> > screenreader as one large block of text, when it should be showing up as
> > separate lines of text. The text is not contained inside an ARIA live
> > region or alert. This is happening when using arrow navigation and also
> > when reading all from the beginning of the history.
> >
> > Does anyone know what might be going on here?
> >
> > Sample Code
> >
> > <div class="conversation-container" aria-label="chat">
> > <div class="message-block-container">
> > <div class="message-block">
> > <div class="message-container">
> > <div class="message-group" role="group" aria-label="messages from
> > you">
> > <p class="visitor-message">Here is my chat</p>
> > <p class="visitor-message">it is very chatty</p>
> > <p class="visitor-message">isn't it?</p>
> > </div>
> > </div>
> > </div>
> > </div>
> > </div>
> >
> > Thanks,
> > Lucy
> >
> > Lucia Greco
> > Web Accessibility Evangelist
> > IST - Architecture, Platforms, and Integration
> > University of California, Berkeley
> > (510) 289-6008 skype: lucia1-greco
> > http://webaccess.berkeley.edu
> > Follow me on twitter @accessaces
> > > > > > > > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > > >

From: Weston Thayer
Date: Wed, Nov 18 2020 6:09PM
Subject: Re: Help troubleshooting some code
← Previous message | Next message →

Interesting, thanks for checking. I'm happy to dig in with MSAI for Windows
<https://accessibilityinsights.io/docs/en/windows/overview/> if you're able
to share a live webpage (feel free to send me a personal email if you can't
share publicly).

On Wed, Nov 18, 2020 at 5:00 PM Lucy GRECO < = EMAIL ADDRESS REMOVED = > wrote:

> hello: i was able to here the same results with both aws and nvda. in
> firefox. and yes berker i asked already to have the group removed and when
> we did so loackaly it made no difference. as ar as the screenreader is
> concerned it is one block and if it does not have punctuation it even runs
> the words together so if the messages are step one do this
> step step 2 move
> and step three that is all it will read like this
> step one dothisstep 2 then do thatstep three that is the end
> no line spacing or other wize
> Lucia Greco
> Web Accessibility Evangelist
> IST - Architecture, Platforms, and Integration
> University of California, Berkeley
> (510) 289-6008 skype: lucia1-greco
> http://webaccess.berkeley.edu
> Follow me on twitter @accessaces
>
>
>
> On Wed, Nov 18, 2020 at 3:14 PM Birkir R. Gunnarsson <
> = EMAIL ADDRESS REMOVED = > wrote:
>
> > I would remove role="group" and aria-label from the div and see if the
> > behavior changes. It shouldn't change it in theory but I also think
> > this grouping is not necessary and it may be triggering something. Are
> > you usre there is no live region on one of the divs further up in the
> > document hierarchy?
> >
> > On 11/18/20, Lucy GRECO < = EMAIL ADDRESS REMOVED = > wrote:
> > > Hello:
> > >
> > > We are working with a vendor and have found a strange behavior in the
> way
> > > something is behaving, and I was hoping someone could help us find out
> > why
> > > it's doing what it is.
> > >
> > > This is part of a live chat implementation. In the below sample of
> code,
> > > the text (chat history, in the paragraph tags) is being read out by the
> > > screenreader as one large block of text, when it should be showing up
> as
> > > separate lines of text. The text is not contained inside an ARIA live
> > > region or alert. This is happening when using arrow navigation and also
> > > when reading all from the beginning of the history.
> > >
> > > Does anyone know what might be going on here?
> > >
> > > Sample Code
> > >
> > > <div class="conversation-container" aria-label="chat">
> > > <div class="message-block-container">
> > > <div class="message-block">
> > > <div class="message-container">
> > > <div class="message-group" role="group" aria-label="messages
> from
> > > you">
> > > <p class="visitor-message">Here is my chat</p>
> > > <p class="visitor-message">it is very chatty</p>
> > > <p class="visitor-message">isn't it?</p>
> > > </div>
> > > </div>
> > > </div>
> > > </div>
> > > </div>
> > >
> > > Thanks,
> > > Lucy
> > >
> > > Lucia Greco
> > > Web Accessibility Evangelist
> > > IST - Architecture, Platforms, and Integration
> > > University of California, Berkeley
> > > (510) 289-6008 skype: lucia1-greco
> > > http://webaccess.berkeley.edu
> > > Follow me on twitter @accessaces
> > > > > > > > > > > > > > >
> >
> >
> > --
> > Work hard. Have fun. Make history.
> > > > > > > > > >
> > > > >

From: Steve Green
Date: Wed, Nov 18 2020 11:21PM
Subject: Re: Help troubleshooting some code
← Previous message | Next message →

The paragraphs are all read separately for me using JAWS 2019 and NVDA 2019.3.1 with Chrome 87 and Firefox 65 and 82.

I would look at all the styles that are being applied to the <p class="visitor-message"> elements. In a situation like this, I typically turn off all the CSS rules and see if the problem goes away. If it does, I reintroduce the rules until I find the one(s) that cause the problem. It doesn't matter if the visual appearance of the content goes completely wrong while you are doing this.

For instance, the style "display:inline" would cause this problem. It won't be the cause in this case because all the text would appear on one line, which I assume it doesn't. However, other styles might cause the same behaviour.

Steve Green
Managing Director
Test Partners Ltd

From: Mark Magennis
Date: Thu, Nov 19 2020 6:31AM
Subject: Re: [EXTERNAL] Help troubleshooting some code
← Previous message | No next message

Hi Lucy,

I would look at the CSS if I were you. I'm surprised to hear that you get the same results in both NVDA and Jaws because I was gong to suggest that it may be because NVDA reads block level elements (<div style="display: block";> or <div style="display: inline-block";>) as a single utterance when screen layout mode is enabled. Screen layout mode is enabled by default in NVDA and can be toggled by pressing NVDA+V, but most users do not turn it off or even know about it.

Here's an example bit of code that illustrates this and how to fix it without changing the HTML. If you load this code in Firefox and use NVDA to arrow through it you'll see a button and two pieces of text read twice. In one version the button and texts are concatenated together and in the other they are read separately. The only difference is the different CCS that's applied in each case. They both read exactly the same using Jaws though.

<html>
<head>
<meta charset="utf-8" />
<header><title>Test page - Block vs Flex</title></header>
<style>
@media(min-width:468px){
.container-1{display:inline-block;}
.container-2{display:flex;}
}
.container-1 div, .container-2 div{
border:1px #ccc solid;
padding:10px;
}
.element-1{display:inline-block;}
.element-2{display:inline-block;}
.element-3{display:inline-block;}
.element-4{
flex:2;
order:1;}
.element-5{
flex:2;
order:2;}
.element-6{
flex:2;
order:3;}
</style>
</head>
<body>

<h2>Block level layout</h2>
<div class="container-1">
<div class="element-1">
<button>Previous</button>
</div>
<div class="element-2">
<span>Some text</span>
</div>
<div class="element-3">
<button>Next</button>
</div>
</div>
<h2>Flex layout</h2>
<div class="container-2">
<div class="element-4">
<button>Previous</button>
</div>
<div class="element-5">
<span>Some text</span>
</div>
<div class="element-6">
<button>Next</button>
</div>
</div>
</body>
</html>


Regards,
Mark