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

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

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>标签中包含回退消息：

1
2
3


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

但<noscript>有关键限制：仅在浏览器中禁用脚本时呈现。当脚本启用但加载失败或运行时崩溃时无效。

要处理此类情况，可以使用服务器渲染的HTML或内容优先模板，即使水合/JS失败，页面仍能显示有意义的内容。

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

结论

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

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

无障碍设计关乎减少任何地方出现的障碍。有时，最大的障碍是假设JavaScript始终有效。