正确使用链接

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"，因为键盘用户不需要进入卡的那部分，因为他们已经可以访问“查看”链接

也许是这样的：

<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>），但是我认为您可以嵌套按钮/可点击区域中的链接。

但是请记住，屏幕阅读器用户还可以显示一个对话框，其中包含页面上的所有链接或所有按钮，因此您需要将其他屏幕阅读器文本与“查看”和“保存”相关联元素。如果页面上有多个卡，则屏幕阅读器对话框将仅显示“查看”，“保存”，“查看”，“保存”，“查看”，“保存”等，并不会很有帮助。他们也不知道“查看/保存”属于哪个卡。您可以使用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链接中包装图像，标题和“查看”按钮，而省去“保存”按钮。

我知道这并不是很整洁，但是可以解决...