NVDA浏览模式焦点未定位至列表项的无障碍问题求助

问题现象 #

• NVDA浏览模式下，焦点直接跳转到<li>内部的<p>容器中的文档名称，无法定位到列表项本身
• 期望屏幕阅读器能正确播报“列表项1/2”这类位置标识

原始代码示例 #

<ul style="
        margin: 0px;
        padding: 0px;
    ">
    <li class="attachmentsContainerStyle-319" style="
        text-align: unset;
    " role="listitem" aria-setsize="2" aria-posinset="1">Screenshot 2023-01-09 at 4.34.36 PM_2023-01-12T17:10:00.6072590Z.png</li>
    <li class="attachmentsContainerStyle-319" role="listitem" aria-setsize="2" aria-posinset="2">
        <p class="attachmentStyle-320">
            <i data-icon-name="TextDocument" aria-hidden="true" class="attachmentIconStyle-365"></i> 
            Screenshot 2023-01-09 at 4.34.36 PM_2023-01-12T17:10:47.4149896Z.png
        </p>
        <div>
            <button type="button" class="ms-Link jaIaction-366" aria-disabled="false">
                <i data-icon-name="Download" aria-hidden="true" class="jaIactioIcon-367"></i>Download
            </button>
            <button type="button" class="ms-Link jaIaction2-368" aria-disabled="false">
                <i data-icon-name="Delete" aria-hidden="true" class="jaIactioIcon-367"></i>Delete
            </button>
        </div>
    </li>
</ul>

问题原因 #

1. 原生<li>元素本身自带listitem语义，额外添加role="listitem"属于冗余属性，反而可能干扰屏幕阅读器的语义识别逻辑
2. 列表项内部的<p>块级元素，在NVDA浏览模式下会被优先识别为可聚焦内容节点，导致跳过了列表项的语义层级
3. 虽然配置了aria-setsize和aria-posinset，但因为列表项的语义被弱化，这些位置属性没有被正确关联播报

修复方案 #

1. 移除冗余ARIA属性：删掉所有<li>上的role="listitem"，依赖原生<li>的语义即可
2. 强化列表项可聚焦性：给<li>添加tabindex="-1"，让它能在浏览模式下被焦点定位到，同时不会加入Tab键的焦点循环（不影响正常交互）
3. 保持列表结构完整性：确保<ul>保持原生列表语义，不要通过CSS或其他属性破坏其默认角色

修复后的代码示例 #

<ul style="
        margin: 0px;
        padding: 0px;
    ">
    <li class="attachmentsContainerStyle-319" style="
        text-align: unset;
    " aria-setsize="2" aria-posinset="1">
        Screenshot 2023-01-09 at 4.34.36 PM_2023-01-12T17:10:00.6072590Z.png
    </li>
    <li class="attachmentsContainerStyle-319" aria-setsize="2" aria-posinset="2" tabindex="-1">
        <p class="attachmentStyle-320">
            <i data-icon-name="TextDocument" aria-hidden="true" class="attachmentIconStyle-365"></i> 
            Screenshot 2023-01-09 at 4.34.36 PM_2023-01-12T17:10:47.4149896Z.png
        </p>
        <div>
            <button type="button" class="ms-Link jaIaction-366" aria-disabled="false">
                <i data-icon-name="Download" aria-hidden="true" class="jaIactioIcon-367"></i>Download
            </button>
            <button type="button" class="ms-Link jaIaction2-368" aria-disabled="false">
                <i data-icon-name="Delete" aria-hidden="true" class="jaIactioIcon-367"></i>Delete
            </button>
        </div>
    </li>
</ul>

效果说明 #

修复后，NVDA浏览模式会正确定位到每个列表项，同时播报“列表项1/2”“列表项2/2”的位置信息，焦点不会直接跳转到内部的<p>元素，保证了无障碍语义的完整性。

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