动态切换input的combobox角色适配NVDA无障碍访问问题

问题本质 #

NVDA这类屏幕阅读器会在元素首次渲染时缓存其ARIA角色和属性，后续仅修改DOM属性（比如动态添加/移除role="combobox"）时，默认不会主动重新读取这些信息——因为没有触发对应的无障碍事件通知，所以它会一直沿用初始的缓存数据。

需求可实现的解决方案 #

要让NVDA识别角色变化，必须在修改属性后触发辅助技术的重新扫描，有两种可行方式：

1. 手动触发无障碍事件 #

修改role属性后，发送change事件（表单元素的标准事件）或者DOMAttrModified事件，通知NVDA更新元素信息：

const input = document.querySelector('input[type="text"]');
// 设置combobox角色
input.setAttribute('role', 'combobox');
// 触发事件通知辅助技术
input.dispatchEvent(new Event('change', { bubbles: true }));

2. 利用aria-live区域强制扫描 #

在页面中添加一个隐藏的aria-live区域，当角色变化时更新该区域内容，强制NVDA重新扫描相关元素：

<!-- 页面中添加隐藏的live区域 -->
<div aria-live="polite" aria-atomic="true" style="position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;"></div>

const liveRegion = document.querySelector('[aria-live="polite"]');
const input = document.querySelector('input[type="text"]');

// 修改角色
input.setAttribute('role', 'combobox');
// 更新live区域触发扫描
liveRegion.textContent = '自动完成列表已展开';

更规范的替代方案（不推荐动态切换role） #

其实按照WAI-ARIA规范，combobox角色应该始终绑定在输入框上，列表的展开/折叠状态用aria-expanded属性控制，而不是动态添加/移除角色：

<!-- 始终保留combobox角色，用aria-expanded控制状态 -->
<input type="text" role="combobox" aria-expanded="false" aria-controls="autocomplete-list">
<div id="autocomplete-list" class="dropdown" role="listbox">...</div>

这种方式完全符合无障碍标准，NVDA能稳定识别状态变化，也避免了动态切换角色带来的兼容性问题。客户要求的“仅在列表展开时设置role”是对规范的误解——combobox代表的是该输入框具备下拉选择的能力，无论列表是否展开都应该保留，aria-expanded才是用来告知用户当前列表是否可见的属性。

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