ARIA make reader read non-focused element content

Question

I have elements on a page which are "focusable" (buttons, elements with tabindex etc) and screen reader reads the content just fine.

However, I have some other elements that are not focusable (due to the fact there are lots of them - dropdown list results etc), so I don't want user to click tab countless times, but they are navigable through left/right/up/down keys, and they get CSS class "selected" (although some other element - their parent - is actually focused)

I want to make reader read those specific elements, with the class "selected". How do I do it?

(I tried applying attribute aria-label="read this" to them, but it didn't work; it works only if element is actually focused)

---

Here's more details to help you understand what I want to achieve:

<div tabindex="0" >
  <span>title1</span>
  <ul>
    <li class="selected">item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

<div tabindex="0">
  <span>title2</span>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

Here's the fiddle: https://jsfiddle.net/d5gbjst1/1/

You can tab back and forth between those 2 divs and any screen reader (I tried with Windows Narrator, NVDA and JAWS) will read "title1" and all the items for the first one and "title2" and all the items for the second, depending where the focus is.

Notice class "selected" on the first item in the first ul. Now, I browse with the up/down arrows through my ul lists, and class "selected" shifts from item to item accordingly. (That's the separate JS code, not included in this example for simplicity sake)

When the class "selected" is applied to the element, I want to force reader to read it. Is it possible at all?

---

Edit: I tried also adding attributes to ul and li, still no luck:

<ul role="list">
 <li role="listitem">

Answer 1

I had the same problem the other week, the solution I went with was to use aria-describedby and also aria-label to provide the extra info from around the page in the element that currently has focus.

In one case we change the content of aria-label to provide extra details only on the first time the element has focus.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute