如何使用 Thymeleaf 向链接添加 aria 标签以实现可访问性？

Question

我正在努力提高使用 Thymeleaf（版本 3.0.11.RELEASE）的网页的可访问性，并希望向超链接添加 aria-label 属性。给我一个解析错误的代码片段的当前版本看起来像：

<dd th:each="facet : ${facetField.values}">
  <a th:with="facetParams=|${facetField.name.replace('_facet', '')}=&quot;${facet.name}&quot;|"
     th:href="@{${path}(c=${page.size}, fq=${facetParam})}${snapshotUrlParams}${collection}|"
     th:aria-label="the ${facet.name} facet in the ${collection} collection has ${facet.count} hits"
     th:text="${facet.name.toUpperCase()}" />
  <span class="facetCount" aria-hidden="true" th:text="|(${#numbers.formatInteger(facet.count, 0, 'COMMA')})|" />
</dd>

解析器不喜欢 th:aria-label 行。我也尝试过 th:attr="aria-label=...etc..."。我可能使用了错误的语法或字符来指定我的字符串。我已经经历了几次迭代；我要么收到解析错误，要么参数不会扩展为实际值，这正是我希望发生的情况。任何帮助将不胜感激！

Answer 1

不确定你尝试了什么，但这对我有用：

th:attr="aria-label=|the ${facet.name} facet in the ${collection} collection has ${facet.count} hits|"

完整的看起来像这样（尽管我没有测试你的其余属性）。

<dd th:each="facet : ${facetField.values}">
  <a th:with="facetParams=|${facetField.name.replace('_facet', '')}=&quot;${facet.name}&quot;|"
     th:href="@{${path}(c=${page.size}, fq=${facetParam})}${snapshotUrlParams}${collection}|"
     th:attr="aria-label=|the ${facet.name} facet in the ${collection} collection has ${facet.count} hits|"
     th:text="${facet.name.toUpperCase()}" />
  <span class="facetCount" aria-hidden="true" th:text="|(${#numbers.formatInteger(facet.count, 0, 'COMMA')})|" />
</dd>