WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL] Help troubleshooting some code

for

From: Mark Magennis
Date: Nov 19, 2020 6:31AM


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

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Lucy GRECO
Sent: 19 November 2020 01:00
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: [EXTERNAL] Re: [WebAIM] Help troubleshooting some code

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 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 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
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > archives at http://webaim.org/discussion/archives
> >