Screen Reader is not reading the text in the aria-label attribute but its reading the text in the element

Question

I have the following html elements. The count is in span element and text is in DIV tag. When I hover on the count it is reading only the number and when I hover on the text of the DIV tag, it is reading only text. But I want the screen reader to read the complete text as '1 Document'. For that I kept 'aria-label' attribute with count and text for the parent DIV with class 'list-item'. But still its reading only text 'Document' but not the count as a whole.

<div class="list-item" title="documents" aria-label ="1 Document">
<span class="rt-count">1</span>
<div title="Documents" class="list-item-title" aria-labelledby="1 Document">Document</div>
</div>

The value of the aria-labelledby attribute should match the value of another HTML element's id attribute, so the way you have used it in your <div> is not correct. Generally, it's best not to try to over-engineer things for the sake of screen readers. Your outer div already contains the text "1 Document", so even without the aria-label attribute you've set on it that text should be picked up by screen readers. Is there a particular use case that means you need hovering over the text to cause a specific response? Remember many screen reader users will probably navigate via the keyboard. — Mark Hanna

Sabari Sabari · Accepted Answer · 2021-10-04T09:50:50

You better try like this

<div class="list-item" title="documents" aria-label ="1 Document">

<div title="Documents" class="list-item-title"><span class="rt-count">1</span> Document</div>
</div>

now you it can read on hovering of div text "1 Document"

Screen Reader is not reading the text in the aria-label attribute but its reading the text in the element

1 Answers