屏幕阅读器不是在阅读 aria-label 属性中的文本，而是在阅读元素中的文本

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>

Answer 1

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"