WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Help troubleshooting some code

for

From: Birkir R. Gunnarsson
Date: Nov 18, 2020 4:14PM

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
> > > > >


--
Work hard. Have fun. Make history.