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

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

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

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

JavaScript可能失效的原因
渐进增强的实践
当页面绝对需要JavaScript时
结论

JavaScript可能失效的原因

在几乎每个网站都依赖JavaScript框架进行渲染和交互的世界里，考虑"无JS"体验可能听起来"无关紧要"。但JavaScript可能因多种原因失效。例如：

缓慢或不稳定的网络：低带宽地区的移动用户可能会遇到超时或脚本加载不完整的情况
浏览器扩展和拦截器：安全或隐私工具可能阻止或剥离脚本
辅助技术限制：一些用户禁用JavaScript浏览，或使用阻止脚本的旧版/专用浏览器（或严格的企业/校园政策）

很容易假设JavaScript总是可用，但这绝对不是保证。如果JavaScript失效，用户将面临不必要的障碍。我们无法总是预测它可能失效的原因，但我们可以让网站准备得更优雅地应对失效。

测试无JavaScript的网站是为了提高韧性和无障碍性。

渐进增强的实践

使用JavaScript时，你可能会想写这样的代码：

1

<span onclick="goToPage('/homepage')">Home page</span>

但<span>不是链接，默认不可键盘聚焦，如果JavaScript被禁用，它将无法工作。相反，你应该使用默认工作的语义化HTML，并仅在JS可用时增强它：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<!-- 无论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的情况下工作。例如：

1
2
3
4


<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以及用户可以做什么。这是一个例子：

1
2
3


<noscript>
  <p>This page requires JavaScript to function properly. Please enable JavaScript in your browser settings.</p>
</noscript>

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

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

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

结论

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

连接不可靠的用户从回退内容中受益
当脚本失效时，每个人都能从可预测、可靠的体验中受益

无障碍性是关于在任何出现障碍的地方减少障碍。有时，最大的障碍是假设JavaScript将始终工作。