0
191
Views"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):
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).
<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?
1 answers
Answer question0
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.