为什么应该测试无 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 智能小助手）公众号二维码

办公AI智能小助手