为何Narrator在Chrome中将表单进度列表项误报为Heading 1？

以下是几种可行的修复方案：

1. 显式声明列表项角色 #

给每个<li>元素添加role="listitem"，强制屏幕阅读器识别其为列表项，覆盖浏览器的错误判断：

<li class="form-progress__list-item" data-form-progress-item="current" data-form-progress-page="1" role="listitem">
    <span class="visually-hidden">Current:</span>
    <span>Organisation details</span>
</li>

2. 修正CSS样式干扰 #

检查组件的CSS代码，避免给列表项设置类似一级标题的视觉样式（如超大字号、过重字体粗细），这类样式可能触发Chrome无障碍引擎的误判：

• 若.form-progress__list-item使用了font-size: 2rem、font-weight: 700这类接近h1的样式，适当调整到符合列表项的视觉层级。
• 若用伪元素（如:before）生成进度数字，给伪元素添加aria-hidden="true"，让辅助技术忽略该内容，避免干扰语义识别。

3. 利用ARIA明确角色描述 #

给列表项添加aria-roledescription="列表项"，直接告诉屏幕阅读器元素的正确角色：

<li class="form-progress__list-item" data-form-progress-item="current" data-form-progress-page="1" aria-roledescription="列表项">
    <span class="visually-hidden">Current:</span>
    <span>Organisation details</span>
</li>

4. 确保有序列表语义完整性 #

如果通过CSS移除了<ol>的默认列表样式（如list-style: none），需确保浏览器仍能识别其列表语义，避免因样式重置导致的语义丢失。

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