Angular 屏幕阅读器的可选文本、aria标签、角度

我正在做一些无障碍的工作。我在页面上有一个产品信息网格。网格不是用桌子布置的。当NVDA屏幕阅读器在网格中移动时，它会读取产品的特征，但它们和产品（列标题）并没有关联，所以很容易混淆。我正在尝试向网格中的p标签添加一个aria标签属性，并向其中添加product title变量，这样屏幕阅读器就可以读取并且更加清晰（不仅仅是p标签之间的单词或数字）。每个单元格都有标签（“等级库标题”）和一个值

角度视图当前如下所示：

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

{{dict（'material'）}
{{product.material}

屏幕阅读器显示“材料”“钢”

我正在尝试将aria标签添加到p标签中，这样屏幕阅读器就会读到“Barn material”“steel”，除非下面的标签不起作用

<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>

{{{dict（'material'）}
{{{product.material}

---

我如何做到这一点，使NVDA屏幕阅读器能够读取我在有角度的html/视图中使用类似于aria标签属性的p标签上的变量，而不是p标签之间的变量？

能否提供一个更完整的示例（理想情况下是小提琴）？如果这是一个网格（即使它是由div组成的），最好在列标题和行标题上使用

aria labelledby

，以创建您想要的可访问名称。我还假设每个

都是这里的一列？我担心，如果没有更多的背景知识，很难给出最好的建议。第二个例子中不起作用的地方，你只提到它不起作用，但很难理解为什么，因为你有模板变量。