屏幕阅读器未读取aria-label属性内容仅读取元素内文本如何解决

• 父元素aria-label未生效的核心原因是：未对子元素的可访问性属性做处理，辅助技术默认会优先读取直接交互的子元素内容，忽略父容器的aria-label设置
• 你代码中list-item-title元素的aria-labelledby="1 Document"是错误用法：aria-labelledby的取值只能是页面内已存在的元素ID，不能直接填写文本内容，错误的属性设置反而提升了子元素的可访问性优先级，导致父容器的配置被覆盖

根据你的使用场景可选两种实现方式：

场景1：仅需要整体播报「1 Document」，不需要单独悬停计数、文本分别播报 #

给所有子元素添加aria-hidden="true"，让辅助技术忽略子元素内容，直接读取父容器的aria-label：

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

场景2：保留单独悬停计数报「1」、悬停文本报「Document」的能力，同时悬停整个父容器播报完整内容 #

给父容器添加role="group"明确告知辅助技术这是一个组合控件，同时删除子元素错误的aria-labelledby配置：

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

你也可以用aria-labelledby关联两个子元素ID实现同样效果，不需要重复写文本内容：

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

内容的提问来源于stack exchange，提问作者user3142386