3

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

enter image description here

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

enter image description here enter image description here

<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 completely */}
    <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 completely when there is no element with the id modal-label when the modal is opened?

this is my live code

yavgz
  • 275
  • 3
  • 17
  • 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 Chapman Mar 28 '22 at 14:38
  • @George this is my live code: https://codesandbox.io/s/nice-snow-rfuxpk?file=/src/App.js – yavgz Mar 28 '22 at 14:45
  • @George you can look my code working here: https://rfuxpk.csb.app/ – yavgz Mar 28 '22 at 15:33
  • @George this is my code,you can see in an browser https://jqdnpl.csb.app/ – yavgz Mar 28 '22 at 15:37
  • The text "I am a button" is attached to the button element, whereas your `aria-describedby` and `aria-labelledby` are attached to the modal. You seem to be expecting to hear the button's accessible name when you have focus on the modal, but voiceover is instead probably only reading the accessible name for the modal. I suspect that this is the source of your problem. – Josh Mar 28 '22 at 21:50
  • how can i solve it? if i delete "#aria-labelledby" everything is read out even the button text @Josh – yavgz Mar 29 '22 at 05:20
  • I would recommend removing the aria attributes from the modal. You may also want to look at how Bootstrap uses roles in their modal implementation. Notice that they have an inner div with a "document" role. I would recommend replicating that structure. You'll probably find that everything works after doing that. https://getbootstrap.com/docs/4.1/components/modal/ – Josh Mar 29 '22 at 14:12
  • 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 common workaround for VO dialog issues. Also, have you tried using an HTML5 `` - I understand this is now (March 2022) working across all major browsers (not IE, ofc). https://caniuse.com/dialog More on `` at https://www.stefanjudis.com/blog/a-look-at-the-dialog-elements-super-powers/ – brennanyoung Mar 31 '22 at 08:47

1 Answers1

4

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

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.org/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.

Josh
  • 3,872
  • 1
  • 12
  • 13