智利网络无障碍指南IWAC对网页在不同缩放场景下的表现做了详细规定，要求页面在用户调整缩放比例、系统级缩放设置变更时，依然能保持内容可读、交互元素可访问。如果要开发适配智利市场的无障碍合规项目，手动处理各种缩放场景的逻辑很容易出现遗漏，而用TypeScript封装对应的类型定义，可以让整个缩放相关的逻辑具备明确的约束，在编码阶段就能发现不符合IWAC规范的问题。
IWAC中页面缩放的核心规范要求
IWAC将页面缩放分为三个核心类别，第一类是用户主动缩放，指用户通过浏览器菜单、快捷键或者触控操作主动调整页面显示比例的行为，规范要求在用户主动缩放至200%时，页面所有内容依然不能出现水平滚动条，且文字、按钮等交互元素的尺寸不能小于44x44像素的触摸目标要求。第二类是系统级缩放，指用户调整操作系统整体的显示缩放比例，比如Windows系统中设置125%、150%缩放时，网页需要跟随系统设置自动适配，不能出现布局错乱或者内容溢出容器的情况。第三类是浏览器默认缩放，指浏览器自身针对高分辨率屏幕默认设置的缩放比例，IWAC要求这类缩放场景下，页面的默认定位、焦点顺序不能发生改变，无障碍阅读工具的定位精度不能下降。
这三类缩放场景都有对应的属性需要记录，比如缩放比例的触发来源、缩放前后的比例数值、是否触发了布局重排、当前缩放是否影响无障碍阅读器的的工作状态等。如果没有统一的类型约束，开发者可能会随意定义这些属性的格式，比如有的把缩放比例定义为字符串，有的定义为数字，有的遗漏了触发来源的字段，后续维护或者多人协作时就会出现逻辑冲突，也不符合IWAC的合规校验要求。
另外IWAC还要求页面缩放相关的事件需要可以被无障碍工具捕获，比如缩放比例变化时需要触发对应的自定义事件，事件参数中需要包含完整的缩放上下文信息。这意味着在类型定义中不仅需要包含缩放状态本身的类型，还需要包含缩放事件、缩放回调相关的类型，确保整个缩放逻辑链条都符合规范。
基础页面缩放类型定义的封装实现
首先我们可以封装缩放来源的枚举类型，对应IWAC划分的三类缩放场景，这样后续代码中可以直接使用枚举值，避免出现魔法字符串。TypeScript的枚举可以设置为字符串枚举，每个枚举值对应IWAC中明确的场景名称，方便后续和规范文档对照。
// 缩放来源枚举，对应IWAC的三类缩放场景
enum ZoomSource {
USER_ACTIVE = 'user_active',
SYSTEM_LEVEL = 'system_level',
BROWSER_DEFAULT = 'browser_default'
}
接下来封装核心的缩放状态类型，需要包含缩放比例、缩放来源、是否触发布局重排、是否影响无障碍阅读器这几个核心字段。缩放比例在IWAC中要求用百分比数值表示，比如100代表原始比例，200代表两倍缩放，所以类型中定义为number类型，同时可以添加注释说明数值的范围要求。是否触发布局重排和影响无障碍阅读器都是布尔值，对应IWAC中的合规要求。
// 页面缩放状态类型，对应IWAC的缩放状态规范
interface PageZoomState {
// 缩放比例，单位为百分比，100代表原始比例，最小值为100，最大值为500
ratio: number;
// 缩放触发的来源，对应上面的ZoomSource枚举
source: ZoomSource;
// 缩放是否触发了页面布局重排
triggerRelayout: boolean;
// 当前缩放状态是否影响无障碍阅读器的正常工作
affectA11yReader: boolean;
// 缩放发生的时间戳
timestamp: number;
}
这个基础类型已经覆盖了IWAC中对缩放状态的核心要求，但是还缺少对缩放事件的约束。IWAC要求缩放变化时需要派发事件，事件参数需要包含变化前后的缩放状态，所以我们可以再封装一个缩放变化事件的类型，包含两个PageZoomState类型的字段，分别表示变化前和变化后的状态。
// 页面缩放变化事件的类型，对应IWAC的事件规范
interface PageZoomChangeEvent {
// 缩放变化前的状态
prevState: PageZoomState;
// 缩放变化后的状态
currentState: PageZoomState;
}
进阶类型封装与业务场景适配
基础类型可以满足大部分场景的需求，但是实际业务中可能需要针对不同的缩放来源做更细化的约束，比如用户主动缩放场景下，还需要记录用户的操作方式，是通过快捷键、菜单还是触控操作实现的缩放。这时候可以使用TypeScript的类型合并和泛型来扩展类型，针对不同的ZoomSource给出更具体的定义。
// 用户主动缩放的额外信息类型
interface UserActiveZoomExtra {
// 用户的操作方式
operateMethod: 'shortcut' | 'menu' | 'touch';
// 是否触发了浏览器的缩放提示
showBrowserTip: boolean;
}
// 系统级缩放的额外信息类型
interface SystemLevelZoomExtra {
// 系统当前的缩放比例，比如125、150
systemRatio: number;
// 系统缩放是否由高分辨率屏幕触发
fromHighDpi: boolean;
}
// 带额外信息的页面缩放状态类型，使用泛型扩展
interface PageZoomStateWithExtra<T = Record<string, unknown>> extends PageZoomState {
extra?: T;
}
// 用户主动缩放的状态类型
type UserActiveZoomState = PageZoomStateWithExtra<UserActiveZoomExtra>;
// 系统级缩放的状态类型
type SystemLevelZoomState = PageZoomStateWithExtra<SystemLevelZoomExtra>;
这样在业务中如果明确知道当前缩放是用户主动触发的，就可以使用UserActiveZoomState类型，获得更完整的类型提示，避免使用不存在的字段。比如在处理用户主动缩放的回调时，可以直接拿到operateMethod字段，判断用户是通过哪种方式触发的缩放，进而做对应的逻辑处理，比如如果是触控操作触发的缩放，可以额外校验触摸目标的大小是否符合IWAC的44x44像素要求。
另外IWAC还要求页面需要支持缩放比例的查询和设置，所以我们需要封装对应的函数类型。比如查询当前缩放状态的函数，需要返回PageZoomState类型；设置页面缩放的函数，需要接收缩放比例和来源作为参数，并且返回设置是否成功的布尔值。我们可以把这些函数类型也封装到统一的类型定义中，确保整个缩放相关的API都符合规范。
// 缩放相关的工具函数类型集合
interface PageZoomUtils {
// 获取当前页面的缩放状态
getZoomState: () => PageZoomState;
// 设置页面缩放比例，返回是否设置成功
setZoomRatio: (ratio: number, source: ZoomSource) => boolean;
// 监听缩放变化事件
onZoomChange: (callback: (event: PageZoomChangeEvent) => void) => void;
// 移除缩放变化事件监听
offZoomChange: (callback: (event: PageZoomChangeEvent) => void) => void;
// 校验当前缩放状态是否符合IWAC规范
validateZoomState: (state: PageZoomState) => boolean;
}
在实际业务中使用这些类型定义时，可以配合IWAC的规范做运行时校验，比如在setZoomRatio函数中，先校验传入的ratio是否在100到500之间，source是否属于ZoomSource枚举，校验通过后再执行缩放逻辑，这样就能确保所有的缩放操作都符合智利网络无障碍指南的要求。如果是多人协作的项目，类型定义也可以作为规范文档的一部分，新成员接入时可以直接通过类型定义了解IWAC对页面缩放的所有要求，降低沟通成本。
TypeScriptIWAC页面缩放类型定义修改时间：2026-08-22 17:57:12