I am working on fixing a bug for a frontend built using Fluent UI. I have a ChoiceGroup in which I have rendered two div tags each having text. I want the screen reader to read both the texts when the first div is chosen. The only way I can narrate both text is by having them inside the same div but then I cannot style them the way I want to style them.
Similar question but related to Bootstrap: Adding aria-label to text elements
So you have something like this?
<div>
text1
</div>
<div>
text2
</div>
What do you mean by "chosen" in "when the first div is chosen"? Is it an interactive element?
In my previous answer that you alluded to, all the elements to be read were contained in a parent container. It was a <button> in that case.
Normally, if you want all the text to be read, then the focus needs to move to the parent element so that all the child elements will be read, so you'd need a parent <div> and the focus would have to move to it.
<div>
<div>
text1
</div>
<div>
text2
</div>
</div>
Alternatively, for interactive elements, you can have aria-labelledby (or aria-describedby, depending on the nature of the second <div>) to have an element's text announced with another element. Something like this:
<div id="new1" aria-labelledby="new1 new2">
text1
</div>
<div id="new2">
text2
</div>
However, using aria-labelledby directly on a <div> without a subsequent role is not really supported.
And when I said the "nature" of your second <div>, if the second div acts like an extension of the first text, then aria-labelledby (with two IDs) seems appropriate. But if the second text is more of a "further description" of the first element, then aria-described might be more appropriate.
<div aria-describedby="new2">
text1
</div>
<div id="new2">
text2
</div>
Without further details of your code, a more specific answer can't be given.
