WebAIM - Web Accessibility In Mind

E-mail List Archives

Help troubleshooting some code

for

From: Lucy GRECO
Date: Nov 18, 2020 3:54PM

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