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

为什么应该测试无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将始终工作。