html - 为什么我的屏幕阅读器会多次阅读行？

Question

我有一个像这样的 HTML 结构

<button ng-disabled="vm.updating" ng-click="doSomething()" class="something" type="submit" aria-label="average score">
  
<span ng hide="hideConditional()" class="font-white">score</span>
<span ng-show="showConditional()" class="font-white">
  <span class="grey"></span>
  <span>scoring</span>
</span>
</button>

当我打开屏幕阅读器时，它多次读取平均得分得分按钮，然后再次读取得分，但我只希望它读取我想要的任何文本写入按钮并忽略子元素文本，例如 span 内的所有内容或按钮下方的任何控件。但我无法忽略其余内容。

我尝试在每个 span 上使用 aria-hidden 但无济于事。

有人可以纠正我吗？我在这里错过了什么？如何让屏幕阅读器忽略 button 内元素的文本并使其只读取按钮本身设置的文本？

Answer 1

我用过:

<div class="" aria-hidden="true" role="presentation" > </div>

它对我来说效果很好。