屏幕阅读器的替代文本，aria标签，Angular

编程问答 2022-08-13

问题描述

我正在Angular中进行一些可访问性工作。我在页面上有一个产品信息网格。网格未与表格一起布置。 NVDA屏幕阅读器在网格中移动时，它会读取产品的特征，但它们与产品（列标题）没有关联，因此很混乱。我正在尝试做一些事情，例如向网格中的p标签添加aria-label属性，并向其中添加产品title变量，这样屏幕阅读器便会读取它并且更加清晰（不仅仅是p之间的单词或数字标签）。每个单元格都有标签（“ spec-title”）和一个值。

当前Angular视图如下：

<div class="specification">
  <p class="copy spec-title">{{dict('material')}}</p>
  <p class="copy">{{product.material}}</p>
</div>

屏幕阅读器读取“材料”“钢”

我正尝试在p标签上添加aria标签，以便屏幕阅读器读取“谷仓材质”“钢”，但以下内容不起作用

<div class="specification">
  <p class="copy spec-title" aria-label="{{product.title}} {{dict('material')}}">{{dict('material')}}</p>
  <p class="copy" aria-label="{{product.material}}">{{product.material}}</p>
</div>

如何做到这一点，以便NVDA屏幕阅读器读取在Angular html / view中带有aria-label属性的东西（而不是p标记之间的东西）的p变量上的变量？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

accessibilityaccessibilityangularangularnvdascreen-readers