I'm trying to get the voiceover to read only the aria-describedby, but it reads it this way ("I am a button" is not read):

Whereas if there is an element with id aria-describedby="modal-label" defined. the element with id aria-labelledby="modal-desc" is read pletely ("I am a button" is read).

<div
 id="modal"
 role="dialog"
 aria-labelledby="modal-label"
 aria-describedby="modal-desc"
 tabIndex={0}
 className="modal"
>

{*/  {children} */}

  <div>
    {/* If no exists this div, modal-desc is not read pletely */}
    <div id="modal-label">this is the title</div>

    <div id="modal-desc">
      <div>this is a descripcion</div>
      <div>
        <div>
          <button>I am a button</button>
        </div>
      </div>
    </div>
  </div>
 </div> 

How can I make the aria-describedby be read pletely when there is no element with the id modal-label when the modal is opened?

this is my live code

I'm trying to get the voiceover to read only the aria-describedby, but it reads it this way ("I am a button" is not read):

Whereas if there is an element with id aria-describedby="modal-label" defined. the element with id aria-labelledby="modal-desc" is read pletely ("I am a button" is read).

<div
 id="modal"
 role="dialog"
 aria-labelledby="modal-label"
 aria-describedby="modal-desc"
 tabIndex={0}
 className="modal"
>

{*/  {children} */}

  <div>
    {/* If no exists this div, modal-desc is not read pletely */}
    <div id="modal-label">this is the title</div>

    <div id="modal-desc">
      <div>this is a descripcion</div>
      <div>
        <div>
          <button>I am a button</button>
        </div>
      </div>
    </div>
  </div>
 </div> 

How can I make the aria-describedby be read pletely when there is no element with the id modal-label when the modal is opened?

this is my live code

• javascript
• accessibility

• Could you post a CodePen example of your code so I can test it live in a browser? I can't see any reason why aria-describedby shouldn't work if the element referred to by aria-labelledby isn't present, but as I stated in my answer to your last question, it may be that the modal content isn't in the DOM (including the #modal-desc) when the screen reader processes the modal announcement. Would be much easier if I could see your example working in the browser to give more info. – George Commented Mar 28, 2022 at 14:38
• @George this is my live code: codesandbox.io/s/nice-snow-rfuxpk?file=/src/App.js – yavgz Commented Mar 28, 2022 at 14:45
• @George you can look my code working here: rfuxpk.csb.app – yavgz Commented Mar 28, 2022 at 15:33
• @George this is my code,you can see in an browser jqdnpl.csb.app – yavgz Commented Mar 28, 2022 at 15:37
• 1 It does seem to be a bug, but I would be surprised if putting an operable element (the button) inside something pointed to from aria-describedby would work without hitches. Do you need to include the button in the description? As @Josh suggests putting a document role inside a modal is a mon workaround for VO dialog issues. Also, have you tried using an HTML5 <dialog> - I understand this is now (March 2022) working across all major browsers (not IE, ofc). caniuse./dialog More on <dialog> at stefanjudis./blog/a-look-at-the-dialog-elements-super-powers – brennanyoung Commented Mar 31, 2022 at 8:47

1 Answer 1

Your generated HTML should resemble something like this:

<div id="modal" class="modal" role="dialog" aria-labelledby="modal-label" aria-describedby="modal-desc" tabindex="-1">

    <!-- {children} -->

    <div role="document">
        <div id="modal-label">this is the title</div>

        <div>
            <div id="modal-desc">this is a description</div>
            <div>
                <div>
                    <button>I am a button</button>
                </div>
            </div>
        </div>
    </div>
</div>

It's worth noting that when both aria-describedby and aria-labelledby are both present, aria-labelledby seems to take precedence in the accessible name putation.

Additionally, your original example had the ariadescribedby element containing a button, which may cause problems.

Note: The aria-describedby content should only be a text string. https://developer.mozilla/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby

Depending on your screen reader and/or browser, you may get different behavior, but aria-labelledby would typically be read first, and then aria-decribedby may or may not be read afterwards, depending on the implementation.

aria-decribedby also may or may not be read on focus, depending on the implementation.

You should also pay special attention to the limitations voiceover has in supporting aria-describedby, as this might be preventing you from getting the exact behavior that you're looking for.

At the end of the day, aria-describedby may not end up being the right tool, if it's important information that everyone needs to understand to make sense of the content.