css 文章列表中的“了解更多”链接-有没有一种方法可以在不失败WCAG的情况下包含它们？

piv4azn7 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(134)

我有一个文章列表，其中每个瓷砖链接到一个文章通过标题和CTA按钮。他们越来越标记为重复的链接在我的辅助功能检查。大多数CTA都有“了解更多”文本，偶尔会有“下载PDF”或“访问中心”等。

考虑到我正在处理的文章的数量，不可能为每一篇文章提供一个唯一的CTA。
我不想对屏幕阅读器隐藏CTA，因为它们偶尔会传达重要信息。

是否有一种可访问的方式：
1.链接在同一页面上，具有相同的文本选择，但指向不同的URL;和
1.在同一页面上有不同的文本替代项，但指向同一URL的链接？
下面是一个代码如何在我的网站上查找每个瓦片的示例。页面上有多个磁贴。

<div>
<a href="xyz"><h3>XYZ tile heading</h3></a>
<p>Summary text</p>
<a href="xyz"><span>Learn more button</span></a>
</div>

css

来源：https://stackoverflow.com/questions/76539480/learn-more-links-in-the-list-of-articles-is-there-a-way-to-include-them-with

1条答案

按热度按时间

kuhbmx9i1#

在标题文本和“了解更多”链接中添加ID。在您的示例代码中，链接ID可以在链接本身上，也可以在。我在下面的示例中将其放在链接上。
在“了解更多”链接上使用aria-labelledby，并将其指向两个新ID。

<div>
  <a href="xyz">
    <h3 id="newID1">XYZ tile heading</h3>
  </a>
  <p>Summary text</p>
  <a id="newID2" aria-labelledby="newID2 newID1" href="xyz">
    <span>Learn more button</span>
  </a>
</div>

赞(0）回复(0）举报 2023-06-25

我来回答

css 文章列表中的“了解更多”链接-有没有一种方法可以在不失败WCAG的情况下包含它们？

1条答案

相关问题

热门标签

最新问答