Android TalkBack为何在设置role="dialog"和aria-modal="true"的Web模态框仍读背景内容？

在Android设备上使用TalkBack与网页交互时，即便模态对话框已正确设置role="dialog"和aria-modal="true"属性，TalkBack仍会读取对话框外的背景内容。该问题仅存在于Web环境，严重影响依赖屏幕阅读器用户的可访问性。

复现步骤 #

• 打开包含设置了role="dialog"和aria-modal="true"属性的模态对话框的网页
• 开启TalkBack功能
• 导航至模态对话框并使用TalkBack浏览内容
• 观察到TalkBack读取了对话框外的背景内容

预期行为 #

当网页模态对话框设置aria-modal="true"时，TalkBack应仅读取对话框内内容，禁止访问背景元素。

已尝试的解决方案 #

• 为背景内容设置aria-hidden="true"：激活模态框时，给所有对话框外元素添加aria-hidden="true"属性，可阻止TalkBack读取背景内容，但大型项目中需要大量DOM操作，维护成本高
• 为背景内容添加inert属性：给所有对话框外元素添加inert属性，可禁用背景内容的焦点与交互，该方案有效，但大型项目需大幅调整结构，且需要额外JavaScript polyfills保障浏览器兼容性

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