为什么应该测试无 JavaScript 的页面

当开发者考虑无障碍访问时，讨论通常围绕屏幕阅读器、语义化 HTML、颜色对比度或键盘导航展开。这些确实都非常重要。

但还有一个较少被讨论的领域需要考虑：网站在没有 JavaScript 时的表现。

以下是本文将要涵盖的内容：

• 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>标签中包含一个回退消息，解释页面为什么需要 JavaScript 以及用户可以做什么。以下是一个例子：

<noscript>  <p>此页面需要JavaScript才能正常运行。请在浏览器设置中启用JavaScript。</p></noscript>

但<noscript>有一个关键限制：它仅在浏览器中禁用脚本时渲染。当脚本已启用但加载失败或在运行时崩溃时（如 CDN 中断、CSP 阻止、MIME/type=module 不匹配或语法错误），它没有帮助。

为了处理这种情况，你可以使用服务器渲染的 HTML 或内容优先模板，这样即使水合/JS 失败，页面仍然显示有意义的内容。

通过添加回退方案，你可以确保用户不会疑惑网站是否已损坏。即使 JavaScript 是必需的，你仍然可以通过承认依赖关系并提供替代方案来使体验可访问。

结论

无 JavaScript 测试不是为了支持每一个可能的边缘情况。它是为了构建有韧性、可访问和包容的网站。

• 连接不可靠的用户从回退内容中受益

• 当脚本失效时，每个人都能从可预测、可靠的体验中受益

无障碍访问是关于在任何出现障碍的地方减少障碍。有时候，最大的障碍是假设 JavaScript 将始终工作。更多精彩内容 请关注我的个人公众号 公众号（办公 AI 智能小助手）对网络安全、黑客技术感兴趣的朋友可以关注我的安全公众号（网络安全技术点滴分享）

公众号二维码

办公AI智能小助手

公众号二维码

网络安全技术点滴分享