aria-label与aria-labelledby的行为差异及实际使用问题

我有一个包含多个下拉列表按钮的工具栏，部分按钮使用<label>显示文本，部分使用<img>显示图标。两类按钮均通过aria-labelledby关联带有title属性的外层div。测试发现，NVDA、Narrator等屏幕阅读器在图片按钮场景下能正常识别aria-labelledby，但在label按钮场景下无法识别。切换为aria-label可解决该问题，但由于初始构建内容时标题文本未知，此方案存在局限性。

Label按钮问题代码示例 #

<button name="dd-selected-button" type="button" class="dd-selected" aria-haspopup="listbox" aria-expanded="false" aria-controls="dd-options-ID_1694283703078" aria-labelledby="fontSizeDropDown">
  <label class="dd-selected-text">10</label>
</button>

图片按钮正常代码示例 #

<button name="dd-selected-button" type="button" class="dd-selected" aria-haspopup="listbox" aria-expanded="false" aria-controls="dd-options-ID_1694283703042" aria-labelledby="fontDropDown">
   <img class="dd-selected-image" src="../images/fonts/arial.png">
</button>

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