时间戳

首页 > 解决方案 > 什么是在可访问性方面使内容可点击的有效方法？

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

问题描述

我正在尝试制作一个最容易被描述为可访问的可点击引导媒体对象列表的小部件。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 设置为李标签？

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

标签： htmlbootstrap-4accessibilityclickable

解决方案

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

您可以通过将“更多信息”元素包装在一个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>

推荐阅读