无障碍测试失败：noscript文本未在ARIA地标中，如何合规解决？

关于<noscript role="generic">的可行性 #

role="generic"的作用是覆盖元素默认语义，让它成为无特定含义的容器，但它不属于ARIA地标角色，完全无法解决「未包含在ARIA地标中」的测试报错。不过添加这个角色不会给屏幕阅读器用户带来糟糕体验，只是属于无效操作。

两种解决方案分析 #

1. 用<dialog>包裹提示文本 #

这个方案可行，且体验更优：

• <dialog>默认带有dialog的ARIA角色，属于标准地标区域，能直接满足无障碍测试的规则要求；
• 必须给<dialog>添加open属性，否则原生dialog默认隐藏，JS禁用时用户看不到提示：

Interesting

Please ensure Javascript is enabled for purposes of.....

``` - 屏幕阅读器会识别这是对话框类的重要提示，用户能快速感知到这是页面关键信息，语义和体验都更精准。

2. 将提示移入<header>标签 #

这个方案能通过无障碍测试，但语义合理性稍弱：

• <header>作为页面级头部时，默认带有banner地标角色，符合测试规则；
• 但<header>通常用于放置页面logo、导航等固定头部内容，把JS禁用提示放在这里，可能会让用户混淆提示用途，语义精准度不如<dialog>。如果你的页面头部本身就有放置通知类内容的设计，这个方案可以考虑。

更规范的推荐方案 #

最合理的做法是先把提示文本放回<noscript>标签（它是专门用于JS禁用场景Interesting的语义化标签，之前直接暴露在body里的写法不规范），再给<noscript>添加通用地标角色：

<noscript role="region" aria-label="JavaScript禁用提示">
  Please ensure Javascript is enabled for purposes of.....
</noscript>

role="region"是通用地标角色，配合aria-label明确说明区域用途，既符合WCAG规则，又保留了<noscript>的语义，是最优解。

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