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

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">

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/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">

• javascript
• html
• css
• wai-aria

4 Answers 4

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/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute

I had the same problem recently and during research, I found information about aria-activedescendant attribute: https://developer.mozilla/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute

In this case, every list element should have a unique id attr. When the list element is selected, its id should be provided to the aria-activedescendant attr of the focused parent.

<div tabindex="0" aria-activedescendant="Id1">
  <span>title1</span>
  <ul>
    <li class="selected" id="Id1">item1</li>
    <li id="Id2">item2</li>
    <li id="Id3">item3</li>
  </ul>
</div>

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

I don't think you should try to do that. Screen readers - especially the ones you have tested with - have intricate keybinds to allow users to navigate to, from, and between specific elements and then jump in and out of them.

Forcing a non standard behaviour for accessible technologies could create a frustrating experience for those users.

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

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

Avoid setting roles for lists, as they have these assigned by default. See here: https://www.w3/TR/html53/grouping-content.html#ref-for-allowed-aria-role-attribute-values%E2%91%A1%E2%91%A0

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?

I have tested using narrator and Screen Reader Simulator for Chrome with your jsfiddle. The expected behaviour, and what I have managed to reproduce, is what you are aiming for. Correct me if I am wrong?

First, I click tab and focus on the following piece of markup:

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

Which results in the screen reader returning

"title1, item1, item2, item3"

in quick succession. As I would expect.

I click tab again to focus on this piece of markup:

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

And the screen reader returns

"title 2, item1, item2, item3"

in quick succession. Again, as I would expect

Finally, I click tab again to set focus back to the first piece of markup and use the downarrow key. The screen reader returns

"Enter list. One of three. Bullet. Item 1"

I then click the downarrow key again to move to the second bullet.

"Two of three. Bullet. Item 2."

I click the downarrow key again.

"Three of three. Bullet. Item 3".

This behaviour is what I would expect and is - from what experience I have of passing two Double-A WCAG 2.1 assessments - the norm.

What behaviour are you expecting. Specifically, what is it you want your screen reader to return/say?

You could try adding tab index to those specific elements, but you should be careful when using it as it can lead to pages that can be really hard to navigate if you use values greater than 0. Heres a link for more detailed answer. https://developer.mozilla/en-US/docs/Web/HTML/Global_attributes/tabindex