使用div实现嵌套列表项时，如何让屏幕阅读器正确识别全部列表项？

你遇到的核心问题是ARIA列表角色的层级关联规则：role="list"只会将直接子元素识别为列表项的上下文容器，你当前的结构里，role="list"的直接子是两个普通div，屏幕阅读器会把这两个当成列表项，而它们内部的role="listitem"因为不是role="list"的直接子元素，所以不会被上层列表关联，自然只识别到2个项。

两种解决方案： #

1. 不需要视觉分组的情况

直接把所有role="listitem"作为role="list"的直接子元素，结构如下：

<div role="list">
    <div role="listitem"></div>
    <div role="listitem"></div>
    <div role="listitem"></div>
    <div role="listitem"></div>
</div>

这样屏幕阅读器会直接识别到4个列表项，符合你的需求。

2. 需要视觉分组（嵌套布局）的情况

如果必须保留分组结构，要使用嵌套列表的ARIA语义：外层是role="list"，分组的div需要加上role="listitem"，同时在这个分组div内部再添加role="list"，把里面的项作为这个内层列表的直接子元素。结构如下：

<div role="list">
    <div role="listitem">
        <div role="list">
            <div role="listitem"></div>
            <div role="listitem"></div>
        </div>
    </div>
    <div role="listitem">
        <div role="list">
            <div role="listitem"></div>
            <div role="listitem"></div>
        </div>
    </div>
</div>

这种结构下，屏幕阅读器会识别为一个包含2个顶级项的列表，每个顶级项内部又有一个包含2个项的子列表，总项数还是4个，同时保留了你的分组布局。

关于role="listitem"和role="group"的说明 #

• role="listitem"的作用是标记某个元素是列表的项，但它必须是role="list"（或原生<ul>/<ol>）的直接子元素，才能被正确关联到对应的列表。脱离这个层级关系的role="listitem"不会被上层列表识别。
• role="group"是用于分组表单控件或语义上相关的元素（比如一组单选按钮），它不属于列表语义体系，所以用来处理列表分组是无效的。

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