正确的链接使用

Question

我有一个列出详细页面链接的页面。这些链接采用卡片的格式。

此卡片有图像，标题，视图按钮和保存按钮。

+-----------------+
|                 |
|      IMAGE      |
|                 |
+-----------------+
|     HEADING     |
+-----------------+
| VIEW | SAVE |   |
+-----------------+

目前，图像，标题和视图按钮都是A标签，链接到该项目的详细视图。保存按钮是一个button元素，它触发JS中的一个函数来保存列表项。保存按钮右侧还有一些空格，需要可点击并将用户带到详细信息页面。

我的SEO部门建议只有一个元素链接。我看到了几种不同的方法来解决这个问题，但它们都有缺点。

1. 我可以只选择视图按钮来应用链接，因为它拥有最有效的语义。但是，这会导致用户体验下降，因为他们无法再单击卡上的任何位置以进入详细视图。
2. 我可以将整个元素包装在A标签中，然后在保存按钮上执行event.stopPropagation（我们不希望将它们推进到详细信息页面）。这有几个问题。第一个是A标签不应该包裹块元素（卡中的许多元素是）。第二个是event.stopPoropagation有点臭，可能会导致一些意想不到的行为。
3. 我可以采取混合方法，使视图链接一个A标签，并将一个onClick事件应用到卡div。然后我需要将event.stopPropagation添加到保存按钮。

我对这些方法中的任何一种都不太满意，但想知道其他人是否遇到过这种情况以及如何解决这些问题。

Answer 1

您的选项＃3出了什么问题？使视图成为<a>和保存<button>。对于屏幕阅读器和仅限键盘的用户，他们可以选择“查看”链接或“保存”按钮并执行各自的操作。然后为卡的其余部分添加一个单击处理程序，以允许鼠标用户单击卡上的任何位置。您可能想要为卡片的点击部分设置CSS cursor:pointer，以便鼠标用户可以直观地了解他们可以点击的位置。

我不会在卡片的可点击部分设置tabindex="0"，因为键盘用户不需要到达卡片的那一部分，因为他们已经可以访问View链接。

也许是这样的：

<div onclick="myclick()" style="cursor:pointer"> <!-- card container -->
  <img>
  <h2></h2>
  <a>view</a>
  <button>save</button>
</div>

这应该使整个卡片可以点击，但由于<button>（和<a>）位于容器的“顶部”，因此当他们被选中时，他们的处理程序应该运行而不是<div>的点击处理程序。但我没有对此进行测试以确认。

我知道将链接嵌套在一个链接（<a><button></a>）中是无效的html，反之亦然（<button><a></button>），但我认为你可以在一个可点击的区域嵌套一个按钮/链接。

但请记住，屏幕阅读器用户还可以显示包含页面上所有链接或所有按钮的对话框，因此您需要将其他屏幕阅读器文本与“视图”和“保存”元素相关联。如果页面上有多张卡片，屏幕阅读器对话框将只显示“查看”，“保存”，“查看”，“保存”，“查看”，“保存”等，并且不会非常有用。他们不知道View / Save属于哪张卡片。您可以使用aria-label或aria-labelledby提供其他屏幕阅读器文本。就个人而言，我会使用aria-labelledby，以便您可以指向您的标题作为链接和按钮的附加文本。像这样的东西：

<span id='viewtext' style="display:none">View</span>
<span id='savetext' style="display:none">Save</span>

<div onclick="myclick()" style="cursor:pointer"> <!-- first card -->
  <img>
  <h2 id='card1'></h2>
  <a aria-labelledby="viewtext card1" >view</a>
  <button aria-labelledby="savetext card1">save</button>
</div>

<div onclick="myclick()" style="cursor:pointer"> <!-- second card -->
  <img>
  <h2 id='card2'></h2>
  <a aria-labelledby="viewtext card2" >view</a>
  <button aria-labelledby="savetext card2">save</button>
</div>

我遗漏了很多细节，比如造型，锚的href等等，但希望你能得到这个想法。请注意，元素可以隐藏，仍然在aria-labelledby中引用。

Answer 2

如果按钮处于绝对底部，就像卡底部没有空间那么我会做这样的事情。

不确定卡的末端是否有空间。然后这种方法将无法工作，因为按钮下方的区域将无法点击

Answer 3

如果您使用这样的布局怎么办？

+-------------+
|             |
|    IMAGE    |
|             |
+-------------+
|   HEADING   |
+-------------+
|     VIEW    |
+-------------+
|     SAVE    |
+-------------+

您可以在a链接中包装图像，标题和“视图”按钮，并省略“保存”按钮。

我知道它不是很整洁，但可能是一种解决方法......