是否可以将整个“卡片”包装在 <a> 标签中？

Question

在我的网站上，我有“卡片”，每张卡片都有许多元素（图像、文本、日期等）。这有点像 Twitter 中的推特卡片：

我希望整张卡片都是可点击的（应该是另一个页面的链接）。

目前，我将顶级元素作为<a>标签并使用aria-label，aria-describedby因此屏幕阅读器可以正确读取它。

<a
   href="/some-url"
   aria-label="Honda VFR. Price: $10,000. Kilometers: 10,000. Listed yesterday."
   aria-describedby="description-1"
   >
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/1983_Honda_Interceptor_VF750F.jpg/300px-1983_Honda_Interceptor_VF750F.jpg" alt="Honda VFR picture" height="100" />

  <p>Honda VFR</p>

  <div>
    <p>$10,000</p>
    <p>Kms: 10,000</p>
    <p>Date listed: yesterday</p>
    <p id="description-1">This bike is pretty great and a lot of other details go here</p>
  </div>
</a>

我考虑过这样做，aria-labelledby="title-id-1 price-id-1 distance-id-1"但我发现通过明确地创建一个摘要句子，它读起来更好。

我依赖于屏幕阅读器将忽略<a>标签内的所有内容（如果我有aria-label）这一事实。这是一个安全的赌注吗？

这一切似乎有点奇怪，但我想知道是否有任何具体原因我不应该这样做。

不幸的是，设计要求整个卡片都是可点击的，所以只制作特定部分的链接不是一种选择。

另一种选择是使用 div、aria 这样的角色和 JavaScript，这感觉像是在错误的方向上迈出了一步。

任何帮助深表感谢。

jsbin：https ://output.jsbin.com/kusawu

Answer 1

这可能不再是你需要依赖 JavaScript 的事情了。从 HTML5 开始，这是完全有效的：

<a href="http://example.com">
  <div>
     anything
  </div>
</a>

来源：CSS-tricks