为什么应该测试无JavaScript的页面
当开发者考虑无障碍设计时，讨论通常围绕屏幕阅读器、语义化HTML、颜色对比度或键盘导航。这些确实非常重要。
以下是本文将要涵盖的内容：
- JavaScript可能失效的原因
- 渐进增强的实践方法
- 当页面必须依赖JavaScript时的处理方案
- 总结
JavaScript可能失效的原因
在几乎所有网站都依赖JavaScript框架进行渲染和交互的时代，考虑"无JS"体验可能听起来"无关紧要"。但JavaScript可能因多种原因失效：
- 缓慢或不稳定的网络：低带宽地区的移动用户可能会遇到超时或脚本加载不完整的情况
- 浏览器扩展和拦截器：安全或隐私工具可能阻止或剥离脚本
- 辅助技术限制：部分用户禁用JavaScript浏览，或使用阻止脚本的旧版/专用浏览器（或严格的企业/校园策略）
我们很容易假设JavaScript始终可用，但这绝非必然。如果JavaScript失效，用户将面临不必要的障碍。虽然无法总是预测失效原因，但我们可以让网站以更优雅的方式应对故障。
测试无JavaScript的网站是为了提高韧性和可访问性。
渐进增强的实践
使用JavaScript时，可能会忍不住编写这样的代码：
<span onclick="goToPage('/homepage')">Home page</span>
但<span>不是链接，默认不可键盘聚焦，且在JavaScript禁用时无法工作。相反，应该使用默认即可工作的语义化HTML，仅在JS可用时进行增强：
<!-- 有无JS均可工作，并被辅助技术识别为链接 -->
<a href="/homepage" id="home-link">Home page</a><script>// 渐进增强：仅在JS加载时拦截const link = document.getElementById('home-link');link?.addEventListener('click', (e) => {// 如果使用客户端路由，取消注释以防止整页重载：// e.preventDefault();// router.push('/homepage'); // 或 history.pushState(...) 等});
</script>
这种方式下，用户默认获得真正的链接和键盘可访问性，而SPA路由（或其他增强功能）仅在脚本运行时生效。
提交按钮只有在位于具有真实action（和服务器端处理/验证）的<form>内时才能在无JS情况下工作：
<form action="/contact" method="post" novalidate><label>Message <textarea name="message" required></textarea></label><button type="submit">Send</button>
</form>
注意无JS时，内置浏览器验证可能有限——因此务必在此类情况下始终进行服务器端验证。
当页面必须依赖JavaScript
并非所有功能都能在没有JavaScript的情况下实现。复杂的Web应用可能依赖脚本才能运行。
这种情况下，可以创建简单页面告知用户页面无法正常工作的原因。
Google的无JavaScript页面就是很好的现实案例。如果在Chrome中禁用JavaScript并导航到Google，会看到页面提示用户需要开启JavaScript才能访问。
当脚本失效时，Google不是让用户面对空白页面，而是告知无法访问的原因。但请注意，Google的消息仅在JavaScript被禁用时显示。如果JS只是加载失败，<noscript>消息不会出现。
像Google这样的"无JavaScript"页面或简单的"正在加载交互式仪表板（需要JavaScript）"消息比沉默更友好。可以在<noscript>标签内包含回退消息：
<noscript><p>本页面需要JavaScript才能正常运行。请在浏览器设置中启用JavaScript。</p>
</noscript>
但<noscript>有个关键限制：它仅在浏览器中禁用脚本时渲染。当脚本已启用但加载失败或运行时崩溃时（如CDN故障、CSP阻止、MIME/type=module不匹配或语法错误），它无法提供帮助。
为处理此类情况，可以使用服务器端渲染的HTML或内容优先模板，这样即使水合/JS失败，页面仍能显示有意义的内容。
通过添加回退方案，可以确保用户不会疑惑网站是否已损坏。即使JavaScript必不可少，通过承认依赖关系并提供替代方案，仍然可以使体验更具可访问性。
总结
无JavaScript测试不是为了支持所有可能的边缘情况，而是为了构建具有韧性、可访问性和包容性的网站。
- 网络连接不可靠的用户能从回退内容中受益
- 当脚本失效时，所有人都能从可预测、可靠的体验中受益
无障碍设计旨在减少任何地方出现的障碍。而有时候，最大的障碍就是假设JavaScript总能正常工作。
更多精彩内容 请关注我的个人公众号 公众号（办公AI智能小助手）
公众号二维码
