用途
本技能用于在设计和开发面向用户的界面时落实无障碍要求。其依据是欧洲无障碍法案（EAA）：该法案要求面向欧盟市场的数字产品与服务符合 EN 301 549，而 EN 301 549 以 WCAG 2.2 Level AA 作为技术基线。资料明确指出这不是可选项，而是面向欧盟市场运营产品的法律要求。默认做法是始终按 WCAG 2.2 AA 构建，任何偏离都需要明确且有文档记录的理由；不应因时间压力或设计偏好而跳过无障碍要求。
WCAG 2.2 AA 将要求组织为四项原则：可感知（Perceivable）、可操作（Operable）、可理解（Understandable）、健壮（Robust）。
主要能力
可感知
用户必须能够感知所有内容和 UI 组件。
颜色对比度：普通文本（小于 18pt 或小于 14pt 粗体）最低 4.5:1，增强级（AAA）为 7:1；大号文本（大于等于 18pt 或大于等于 14pt 粗体）最低 3:1，增强级为 4.5:1；UI 组件和图形对象最低 3:1。资料建议在真实渲染页面上检查对比度，而非仅看设计规范，因为设计阶段的色板在真实文本落到真实背景、渐变和叠加层上后可能失真。禁用元素豁免：WCAG 1.4.3 明确将非活动 UI 组件排除在对比度要求之外，禁用按钮可以使用低对比度文本，这是有意且正确的，用于传达不可用状态。不得仅用颜色传达信息（例如仅用红色边框表示错误，应补充图标或文本标签）。资料还提出一条内部规则：对比度公式只衡量墨色与背景色，无法感知字重，因此调色板中最浅的可读颜色与字体层级中最轻的字重不应同时用于同一文本；承载说明文字、标签和辅助文本的弱化或次级色令牌，在正文默认字重为常规或细体时，字重至少为 500。该下限是内部规则，并非 WCAG 要求。
文本替代：每张有意义的图片都需要描述其内容或功能的替代文本；装饰性图片使用 alt="" 以便屏幕阅读器跳过；作为按钮使用的图标需要可访问标签，如 aria-label 或视觉隐藏文本；图表和数据可视化需要文本摘要或数据表替代。
字幕与转录：视频内容需要字幕；纯音频内容需要转录。
可操作
用户必须能够操作所有 UI 组件。
键盘导航：所有交互元素必须仅用键盘即可到达和操作；每个按钮、链接、输入框和控件必须能通过 Tab 获得焦点；焦点顺序必须遵循页面的视觉阅读顺序；不得存在键盘陷阱，用户必须能从任何组件导航离开；模态对话框在打开时必须将焦点限制在内部，关闭时将焦点返回触发元素。
焦点可见性：每个交互元素都需要可见的焦点指示器（WCAG 2.2 加强了焦点可见性要求）。资料给出最小示例：
/* Minimum: do not remove focus outline without a replacement */
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 2px;
}
绝不在未提供自定义焦点样式的情况下使用 outline: none。焦点环不是要消除的设计问题，而是导航工具。
触摸目标尺寸：触摸设备上的交互元素至少为 24×24px（WCAG 2.2），44×44px 是推荐舒适最小值（Apple HIG、Material Design）。小图标按钮即使视觉图标更小，也需要内边距达到该尺寸。
防癫痫触发：屏幕上任何内容闪烁不得超过每秒 3 次。
跳转链接：具有重复导航的页面必须提供“跳转到主要内容”链接作为第一个可聚焦元素，使键盘用户能在每个页面绕过导航。
可理解
用户必须能够理解内容以及 UI 的工作方式。
语言：在 <html> 元素上设置 lang 属性，例如 <html lang="fi"> 或 <html lang="en">；用不同语言标记的行内内容需在该元素上设置 lang。
标签与说明：每个表单输入必须有可见标签，而不仅是占位符（占位符在输入时消失）；必填字段必须被标示，不能仅依赖颜色，应添加星号和说明；错误消息必须通过 aria-describedby 与对应输入关联。
可预测性：外观相同的组件必须行为一致；导航必须在各页面出现在相同位置；打开新标签页或窗口必须提前告知。
错误识别：表单验证错误必须指出哪个字段失败；错误必须以文本描述，不能仅靠颜色或图标。
健壮
内容必须能被辅助技术可靠地解释。
语义化 HTML：为任务使用正确的 HTML 元素，语义可免费向屏幕阅读器传达角色、状态和结构。资料给出正误示例：
<!-- Correct -->
<button>Save</button>
<nav aria-label="Main navigation">...</nav>
<h1>Page title</h1>
<!-- Wrong — requires manual ARIA to replicate what the element provides natively -->
<div onclick="save()">Save</div>
<div class="nav">...</div>
<div class="heading">Page title</div>
ARIA——谨慎使用：ARIA 在原生元素不足时补充 HTML 语义，不能修复损坏的 HTML。规则是：没有 ARIA 好过错误的 ARIA，错误的 ARIA 会主动破坏屏幕阅读器输出。必需模式包括：无可见文本标签的组件使用 aria-label 或 aria-labelledby；开关、手风琴和下拉菜单使用 aria-expanded；动态内容更新（提示通知、搜索结果）使用 aria-live 区域；模态覆盖层使用 role="dialog" 与 aria-modal="true"；当前导航项使用 aria-current="page"。
状态消息：动态更新（成功提示、加载状态、错误计数）必须通过 aria-live 或 role="status" 向屏幕阅读器播报，除非焦点元素发生变化，否则它们不会被自动播报。
使用方式
资料以标准说明和审查清单的形式组织，未提供安装命令或代码调用方式。使用时可将其作为设计、构建或审查界面时的合规依据，并对照审查清单逐项检查。
适用场景
适用于设计、构建或审查任何面向用户的界面的无障碍工作，尤其是面向欧盟市场运营的数字产品与服务。
限制
资料未提供安装命令、运行环境、依赖项或具体工具调用方式。关于对比度检查，资料提到 dembrandt 引擎、get_findings / render_report 针对实时 DOM 运行并给出实际失败文本/背景对及测量比值，但标注为可选，且未提供具体使用步骤。字重下限为内部规则而非 WCAG 要求。禁用元素对比度豁免依据 WCAG 1.4.3。