CODEWITHSUNDEEP
javascriptaccessibility
yavgz
yavgz

Reputation: 369

"aria-describedby" is not fully read unless there is an "aria-labelledby"

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

Upvotes: 3

Views: 4846

Answers (1)

Josh
Josh

Reputation: 4332

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.

Upvotes: 5

Related Questions