非role="list"直接子元素用role="listitem"及搜索结果列表无障碍问题咨询

嘿，我来帮你梳理这两个无障碍相关的问题——都是日常开发里很容易踩的坑，咱们一个个说清楚：

问题1：能否给非role="list"直接子级的元素设置role="listitem"？ #

答案是技术上可以，但无障碍语义上完全不推荐。

屏幕阅读器识别列表结构的核心逻辑是依赖「list（或原生<ul>/<ol>）作为父容器，直接包含listitem（或原生<li>）」的层级关系。如果一个listitem的父元素不是列表容器，屏幕阅读器根本不知道它属于哪个列表，只会把它当成普通的页面元素，完全丢失“列表项”的语义——比如不会播报“这是第X个列表项，共Y个”这类关键信息，对依赖屏幕阅读器的用户来说，这个元素就和普通的<div>没区别。

简单说：单独的listitem就像没有加入队伍的士兵，系统不知道它属于哪个编制，自然无法正确识别它的角色。

问题2：搜索结果被row div包裹，导致屏幕阅读器只识别1个列表项，怎么修复？ #

你遇到的问题本质是列表容器的直接子级不是列表项，而是中间的row容器，破坏了无障碍语义的层级关联。屏幕阅读器会把list的直接子级（也就是那个row）当成唯一的列表项，自然会播报“1/1个列表项”。

给你三个优先级从高到低的修复方案：

方案1：调整DOM结构，让listitem成为list的直接子级（最推荐）

把row的样式类直接加到listitem元素上，让list的直接子级就是listitem，既保留布局样式，又修复语义问题：

原来的错误结构（大概是这样）：

<div role="list">
  <div class="row">
    <div role="listitem">搜索结果1</div>
  </div>
  <div class="row">
    <div role="listitem">搜索结果2</div>
  </div>
</div>

改成正确结构：

<div role="list">
  <div role="listitem" class="row">
    搜索结果1
  </div>
  <div role="listitem" class="row">
    搜索结果2
  </div>
</div>

这样屏幕阅读器就能正确识别每个row是独立的列表项，播报类似“共2个列表项，当前是第1个”的信息。

方案2：用aria-owns强制关联列表和列表项（兜底方案）

如果因为布局框架限制，实在没法调整DOM结构（比如row必须作为list的直接子级），可以用aria-owns属性让列表容器明确“拥有”内部的列表项：

<div role="list" aria-owns="result1 result2">
  <div class="row">
    <div id="result1" role="listitem">搜索结果1</div>
  </div>
  <div class="row">
    <div id="result2" role="listitem">搜索结果2</div>
  </div>
</div>

aria-owns会告诉屏幕阅读器：“这个列表的列表项是指定ID的元素，哪怕它们不是我的直接子级”。不过这个方案是兜底用的，优先推荐调整DOM结构，因为原生层级的语义兼容性更好。

方案3：改用原生列表元素（最省心）

如果你的布局允许，直接用原生的<ul>/<ol>和<li>代替自定义role是最省心的——原生列表本身就自带完整的无障碍语义，不需要额外加role：

<ul>
  <li class="row">搜索结果1</li>
  <li class="row">搜索结果2</li>
</ul>

要是原生列表的默认样式（比如缩进、项目符号）影响布局，只需要用CSS去掉就行：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

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