0

I have created a chat in HTML5 and I included WAI-ARIA roles and attributes to the HTML code in order to inform screen reader users about new messages. Next, I show the code that I have:

<ul id="conversation" class="conversation" aria-relevant="all" role="log" aria-live="polite">
  <li role="listitem">One element</li>
  <li role="listitem">Two element</li>
</ul>

Screen readers such as: NVDA, JAWS or Talkback reads new messages without problems. However, VoiceOver does not read them fine. Most of messages are read by VoiceOver; but, messages which are equal are not read by VoiceOver. For example, if another li element is added to the ul and this li element contains the text 'one element', the same text as the first element, the screen reader does not read it.

I do not know if it is a code problem or it is a problem related to the VoiceOver. Do you have any suggestion to solve it?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
user3696680
  • 1
  • 1

1 Answers1

0

This is a well known problem with VO. The way I do this is to have two areas and then cycle between the two deleting the content in the one while adding new content to the other and then flipping this behavior. This ensures that the content is always read on all screen readers.

One more thing: if you use this technique, you will want aria-relevant="additions" to ensure that the deletions are not read.

unobf
  • 7,158
  • 1
  • 23
  • 36