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

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