Question 305534 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Screen reader is not reading out div text

I have chat application written in react. So when user receives a message from chatbot the screen reader should automatically read out the message when component is rendered and only if the message is equal to some specific text.
Here is the current code I have.

import React, { Component } from 'react';

class SomeComponent extends Component {
  render() {
    const { text } = this.props;

    return (
      <div>
        <div aria-live={text === 'some text' ? 'polite' : 'off'}>
          {text}
        </div>
      </div>
    );
  }
}

export default SomeComponent;

I tried using the aria-live but it didn’t work.
I am using NVDA as screen reader.

Tags:

2

Answers


  1. 0

    For dynamic content update, aria-relevant has to be used with aria-live

     <div
      aria-live={text === 'some text' ? 'polite' : 'off'}
      aria-relevant='additions'
    >
      {text}
 </div>
    Login or Signup to reply.
  2. 0

    There are a couple things that might be happening. First, some context about ARIA live regions.

    1. They do not announce their contents when they are first added to a page, only when the content of the region changes after their initial load
    2. The main purpose of aria-live="off" is to disable announcements for elements with an implicit live region role (such as role="alert"), not toggle announcements on and off
    3. Since live regions only update when their content changes, you cannot have one read the same message multiple times (I think) without setting the content to '' and then to your message
    4. Live regions do not have to be visible on the page, and often are not

    Given that, a some thoughts about your issue.

    • If your component is nested within other React components that are unmounting and remounting your live region, then it would conflict with point #1 above. Can you move the live region to the root of the document, hide it visually, leave aria-live="polite" without toggling the value, and only update the content when it needs to be announced?
    • If you still need a copy of the text to be visible on the page where you originally placed this component, then split it out into two components:
      1. One live region at the root that only updates when you want the text to be read aloud
      2. A separate, visually rendered component that is not a live region that updates with every text change you want visually rendered
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search