html - 具有多个 anchor 的单个列表项

Question

单个列表项中是否可以包含多个链接？

假设我需要像下面这样的代码:

<ul>
  <li><a href="#">link 1</a> <a href="#">link 2</a></li>
  <li><a href="#">link 3</a> <a href="#">link 4</a></li>
  <li><a href="#">link 5</a> <a href="#">link 6</a></li>
</ul>

使用 tab 浏览列表键，VoiceOver 读取到有一个 3 项列表(这是真的)。但浏览整个列表我需要使用 tab键 6 次，因为在每个 <li>有两个anchors .

如果视障人士听说有一个包含 3 项的列表，但浏览列表后发现实际上有 6 个 anchors，他们是否仍然可以访问？ ？

这会令人困惑吗？或者在一个 anchor 中插入两个 anchor <li>还好吗？

已编辑:

它应该是这样的。这就是为什么我插入了两个 anchors内单<li>

问题是左侧的链接长度不同，右侧的链接长度相同(假设它是“唯一的图标链接”)。

我唯一想到的就是像这个 fiddle 一样设计它的样式:

https://jsfiddle.net/n0azsq75/

但我想让左右触摸的链接拥抱在一起

Answer 1

列表项中几乎可以包含任何 HTML，因此您可能有大量的交互元素，因此列表项中可能有大量的制表位。这不存在(可访问性)问题。

可能存在的问题是使用列表的目的。如果您真正将事物分组为枚举的信息 block ，那么列表正是您想要使用的(无论是有序列表还是无序列表)。但是，如果您使用列表来获取特定布局(如 jsfiddle 示例中所示)，但并未真正将信息组合在一起，那么您需要使用 role="presentation" 删除列表的语义。 .

<ul role="presentation">
  <li></li>
  <li></li>
</ul>