什么是在可访问性方面使内容可点击的有效方法？

Question

我正在尝试制作一个最容易被描述为可访问的可点击引导媒体对象列表的小部件。 https://getbootstrap.com/docs/4.3/components/media-object/#media-list原代码将js点击事件绑定到列表项元素本身。

我的第一个想法是将列表项元素中的所有内容包装在一个按钮元素中，并将我的点击事件附加到按钮上。这为列表项提供了焦点，并按照我的意愿行事。但后来我读到，在按钮标签中包含 div 或 h 标签是一种不好的做法。

<ul class="list-unstyled">
  <li class="media" onclick="myFunction">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      More info
    </div>
  </li>
</ul>

VS

<ul class="list-unstyled">
  <li>
    <button type="button" class="media" onclick="myFunction" disabled="isDisabled()">
      <img src="..." class="mr-3" alt="...">
      <div class="media-body">
        <h5 class="mt-0 mb-1">List-based media object</h5>
      More info
      </div>
    </button>
  </li>
</ul>

所以此时还有另一种方法可以使用语义 html 使整个列表项行可点击，或者是添加角色 = 按钮、空格键的 onkeypress 事件和输入、自定义活动/禁用类和设置的最佳选择tabIndex 到 li 标签？

编辑：也许另一种思考设计的方式是使用此组件https://getbootstrap.com/docs/4.3/components/list-group/#links-and-buttons。基本上，我要维护的设计是一堆可点击的行，其中每行包含一个图像和几行短文本。

Answer 1

我没有看到在按钮或链接中设置标题的意义。如果你有一个标题，它应该代表页面结构。

您可以通过将“更多信息”元素包装在button 或链接中来轻松解决您的“问题”。键盘用户将能够聚焦按钮，鼠标用户将能够在按钮或单击整个列表元素包装器之间进行选择。

<ul class="list-unstyled">
  <li class="media" onclick="myFunction">
    <img src="..." class="mr-3" alt="...">
    <div class="media-body">
      <h5 class="mt-0 mb-1">List-based media object</h5>
      <button title="More info about List-based media object">More info</button>
    </div>
  </li>
</ul>

Answer 2

这完全取决于您希望遵循语义开发规则的程度以及您是否计划支持为盲人和视障人士启用的页面。

<a> 应始终用于从一个页面导航到另一个页面。

<button> 和 <input type="button> 只能用于提交表单或用于屏幕上的活动，例如打开和关闭对话框等。

如果你真的想遵守规则，那么允许用户点击按钮、输入字段和选择下拉菜单以外的元素是不受欢迎的。如果您使用正确的元素来完成工作，那些视障人士使用的屏幕阅读器会做得更好。

此外，不要在没有充分理由的情况下将 DOM 放入元素中。它只会增加混乱。