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

Javascript – React – announce that fact that a component is displayed

I have to make screen readers announce the fact that a section is displayed. This section is displayed based on a boolean value that is changed when the user clicks on a link.

This is how it is implemented so far:

 import { Row } from 'react-bootstrap';
    ...
    const [shouldDisplay, setShouldDisplay] = useState<boolean>(false);
    ...
    return(
     {!shouldDisplay && (
        <a href="somepage.com" onClick={setShouldDisplay(true)} />
      )}

      {shouldDisplay && (
        <Row>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        </Row>)}
    );

I have tried to add aria-live="polite" to the Row but the screen readers still don’t announce the fact that the new part with the lorem ipsum is displayed. It should announce "Lorem ipsum part is displayed" or at least "expanded" like the case when Collapse from react-bootstrap, with aria-expanded="true" is used. Is there a way to achieve this?

Tags:

2

Answers


  1. 0

    I think you are on the right track with aria-live:
    https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#live_regions

    Ideas:

    • Create aria-live attribute above the content that actually changes. Possibly the announcement does not happen the first time the content is rendered
    • Add a role attribute like in the docs
    • Simplify the code
      • Get rid of Row, maybe its causing this to fail
    const [shouldDisplay, setShouldDisplay] = useState<boolean>(false);
return (
  <div role="region" aria-live="polite">
    {!shouldDisplay && (
      <button onClick={() => setShouldDisplay(true)} />
    )}

    {shouldDisplay && (
        <p>Lorem ipsum dolor sit amet...</p>
    )}
  </div>
);
    Login or Signup to reply.
  2. 0

    try wrapping the Row in a div with aria label.

      {shouldDisplay && (
        <div aria-live="polite">
          {/* This region will be announced when the content changes */}
          <Row>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
              ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
          </Row>
        </div>
      )}

    Row is a functional component, and you cannot apply DOM attributes directly to it if it doesn’t accept those attributes as props.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search