Question

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

我的第一个想法是将列表项元素内的所有内容包装在button元素中，并将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事件并输入，自定义活动/禁用类并设置li标签的tabIndex？

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

Answer 1

我看不出在按钮或链接中包含标题的意义。如果您有标题，它应该代表页面结构。

您可以通过将“更多信息”元素包装在<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>或链接中来轻松解决“问题”。键盘用户将能够集中按钮，鼠标用户将能够在按钮之间进行选择，或者单击整个列表元素包装。

{{1}}

Answer 2

这完全取决于您要遵循语义开发规则的程度，以及您是否打算支持为盲人和视障者启用的页面。

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

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

如果您确实想遵守规则，则不允许用户单击除按钮，输入字段和选择下拉菜单以外的元素。如果您为工作使用正确的元素，则视障人士使用的屏幕阅读器的效果会更好。

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

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

2 个答案: