渐进增强：脚本失效时，页面仍然可用

网络不稳定、脚本加载失败、设备能力不同，都可能让某些前端功能暂时不可用。渐进增强的思路，是先让页面拥有完整的基础能力，再按环境增加体验。

本篇目标： 为一篇图文文章设计静态可读、交互可选的结构。

从语义和普通链接开始

标题使用正确层级，正文直接出现在文档中，导航拥有真实地址。图解可以先提供一个普通图片链接，脚本可用时再把它增强为弹窗放大。这样，增强失败不会让读者失去查看图片的路径。

<figure>
  <img src="diagram.png" alt="说明三个步骤关系的图解">
  <figcaption>
    三个步骤及其边界。
    <a href="diagram.png" data-view-image>查看大图</a>
  </figcaption>
</figure>

脚本绑定成功后可以阻止默认跳转并打开阅读工具；不支持相关能力时，普通链接继续工作。

能力检测比猜设备更直接

需要某个浏览器 API 时，先检测它是否存在，再决定是否启用增强。不要把“移动端”或某个浏览器名称当成能力的完整替代。

控制按钮也应在功能真正就绪后出现，避免让用户看到无法工作的控件。检测失败时保留合理的基础状态，而不是展示一个永远等待的加载动画。

状态不能只靠视觉表达

打开、选中、禁用和错误状态，除了颜色，也应有合适的文字或语义属性。模态框关闭后要恢复焦点，键盘用户应能找到与鼠标用户相同的操作。

对持续变化的内容，考虑是否真的需要向辅助技术播报。自动轮换不应不断打断阅读，用户主动切换时再提供简洁状态通常更合适。

给失败做一次完整演练

禁用脚本、阻止某个增强资源、让图片失败，再用键盘浏览。确认主要内容仍可读，普通链接仍可访问，表单不会在没有提示的情况下丢失输入。

渐进增强并不要求页面朴素到没有设计，而是把可用性放在最下面。精致的动画和阅读工具因此可以被安心地添加，也可以被安心地关闭。