单个列表项li内放置多个a链接是否符合无障碍可访问性规范？

合规性结论 #

单个列表项内插入多个链接本身完全符合WCAG可访问性规范，不存在结构层面的合规问题。VoiceOver播报「3个列表项」和实际存在6个可聚焦锚点的差异也不会直接造成认知障碍，视障用户普遍熟悉「单个列表条目包含多个独立操作」的交互模式。

避免认知混淆的必要优化 #

要消除潜在的理解问题，只需补充几个可访问性配置即可：

• 给右侧仅图标链接添加明确的可访问性标注：必须给图标链接加aria-label属性，属性值要同时说明操作类型和对应的条目内容，比如左侧链接文本是「项目A」，右侧图标是删除操作，就设置aria-label="删除项目A"，避免用户不知道图标对应的操作对象和用途。
• 可选增强：给每个<li>元素添加role="group"和aria-roledescription="条目，包含内容跳转和操作按钮"，这样屏幕阅读器在进入每个列表项时会提前播报条目属性，用户就会预知接下来会遇到两个交互元素，进一步降低认知成本。
• 交互层面如果希望减少tab触发次数，可以判断两个链接的关联度：如果两个链接的跳转目标完全独立，保留现有两个tab stop的设计即可；如果右侧操作是左侧内容的附属操作，也可以将两个功能合并到单个交互元素中，但这种方案会损失语义清晰度，更推荐保留分开的链接结构。

左右布局贴合的实现方案 #

给<li>设置flex布局即可满足需求，示例代码如下：

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px; /* 可按需调整左右两侧的间距 */
}
li > a:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
li > a:last-child {
  flex-shrink: 0;
  width: 24px; /* 按实际图标尺寸调整固定宽度 */
}

该方案下左侧链接长度不固定时会自动截断，右侧图标链接保持固定宽度，二者始终紧密贴合不会错位。

内容的提问来源于stack exchange，提问作者Marcin Mroczko