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

Question

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

我的第一个想法是将列表项元素内的所有内容包装在按钮元素中，并将我的点击事件附加到按钮。这为列表项提供了焦点，并按照我希望的方式进行操作。但后来我读到，在按钮标签中包含 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，或者我最好的选择是为空格键添加 role=button、onkeypress 事件并输入，自定义 active/disabled 类，并将tabIndex设置为li标签?

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

Answer 1

我看不出在按钮或 link 中设置标题有什么意义。如果你有一个标题，它应该代表页面结构。

您可以通过将 "More info" 元素包装在 button 或 link 中轻松解决您的 "problem"。键盘用户将能够聚焦按钮，而鼠标用户将能够在按钮或单击整个列表元素包装器之间进行选择。

<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> 只能用于提交表单或用于屏幕上的活动，例如打开和关闭对话框等。

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

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

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

What is a valid way to make a row on content clickable in terms of accessibility?

html

accessibility

clickable

bootstrap-4