近日，W3C 无障碍指南工作组发布了Web内容无障碍指南（WCAG）2.2 正式推荐标准：

Web Content Accessibility Guidelines (WCAG) 2.2

https://www.w3.org/TR/WCAG22/

 注：W3C 推荐标准

（W3C Recommendation）是基于广泛共识且获得W3C及其会员一致认可的技术规范，是W3C推荐广泛部署的Web标准，并依据《W3C免版税专利政策》免费开放给公众使用。

图：Web 内容无障碍指南（WCAG）2.2 正式推荐标准

与 WCAG 2.1 相比，WCAG 2.2 新增9项成功标准为视觉、行动和认知障碍用户改善无障碍可访问性，例如扩展了关于触摸输入的无障碍指南。同时，WCAG2.2中删除了成功标准4.1.1解析及其附注。另外，还在标准1.4.8视觉呈现和1.4.13文本间距中增加了附注，以更好地支持不同语言的可访问性。

新增的成功标准包括：

2.4.11 Focus Not Obscured (Minimum) (AA)

2.4.12 Focus Not Obscured (Enhanced) (AAA)

2.4.13 Focus Appearance (AAA)

2.5.7 Dragging Movements (AA)

2.5.8 Target Size (Minimum) (AA)

3.2.6 Consistent Help (A)

3.3.7 Redundant Entry (A)

3.3.8 Accessible Authentication (Minimum) (AA)

3.3.9 Accessible Authentication (Enhanced) (AAA)

以下是信息无障碍研究会无障碍专家对这些新增的成功标准的简单解析。

*注：以下中文翻译及解析均非W3C官方授权，如有错误或疑问，欢迎指出和交流。

 1. 新增2.4.11 Focus Not Obscured (Minimum) 不遮挡焦点（最小）(AA

解析：

这条标准要求的是，当某个UI组件被聚焦时，它至少是部分可见的。例如页面上的横幅、通知，不能导致某些页面内容始终完全被遮挡。

标准原文：

When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content.

NOTE 1

Where content in a configurable interface can be repositioned by the user, then only the initial positions of user-movable content are considered for testing and conformance of this Success Criterion.

NOTE 2

Content opened by the user may obscure the component receiving focus. If the user can reveal the focused component without advancing the keyboard focus, the component with focus is not considered hidden due to author-created content.

 2. 新增2.4.12 Focus Not Obscured (Enhanced)不遮挡焦点（加强）（AAA）

解析：

这是个AAA级标准，是2.4.11的增强条目。要求是被聚焦的UI组件完全可见，不能有任何遮挡。

标准原文：

When a user interface component receives keyboard focus, no part of the component is hidden by author-created content.

 3. 新增2.4.13 Focus Appearance焦点外观（AAA）

解析：

这条标准对焦点指示器的外观（聚焦和未聚焦时的样式差别）提出了较为具体的要求，包括最小面积（组件的2CSS像素厚的周长面积）和最小对比度（3:1）。但是，如果焦点指示器的颜色、大小是浏览器、读屏软件或其他用户代理自己生成的，或者开发者未自定义过焦点指示器的相关参数，则该条标准不适用。

标准原文：

When the keyboard focus indicator is visible, an area of the focus indicator meets all the following:

is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and

has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states.

Exceptions:

The focus indicator is determined by the user agent and cannot be adjusted by the author, or

The focus indicator and the indicator's background color are not modified by the author.

NOTE 1

What is perceived as the user interface component or sub-component (to determine enclosure or size) depends on its visual presentation. The visual presentation includes the component's visible content, border, and component-specific background. It does not include shadow and glow effects outside the component's content, background, or border.

NOTE 2

Examples of sub-components that may receive a focus indicator are menu items in an opened drop-down menu, or focusable cells in a grid.

NOTE 3

Contrast calculations can be based on colors defined within the technology (such as HTML, CSS and SVG). Pixels modified by user agent resolution enhancements and anti-aliasing can be ignored.

 4. 新增2.5.7 Dragging Movements 拖拽移动(AA)

解析：

对于必须依靠拖动才能完成的交互，必须提供一种单指针的替代交互形式，例如单击、双击、长按或基于路径的手势、输入精确数值等。需要注意的是，满足原有标准2.1.1和2.1.3的键盘等效形式并不等于自动满足本条标准。

标准原文：

All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author.

Note: This requirement applies to web content that interprets pointer actions (i.e. this does not apply to actions that are required to operate the user agent or assistive technology).

 5. 新增2.5.8 Target Size (Minimum) 目标尺寸（最小） (AA)

解析：

本条标准规定了指针输入的目标最小要满足24*24CSS像素，或者是目标周边满足24像素的范围内没有其他目标，或者页面上有可实现同一功能且满足此条件的控件，以及一些其他特殊的例外情况。

标准原文：

The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:

Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;

Equivalent: The function can be achieved through a different control on the same page that meets this criterion;

Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text;

User agent control: The size of the target is determined by the user agent and is not modified by the author;

Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.

Note: Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.

Note: For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed top to bottom, the line-height would be horizontal.

 6. 新增3.2.6 Consistent Help一致的帮助 (A)

解析：

对于在网页集里多个网页中重复出现的帮助信息，在每个页面上的位置都应是一样的，包括人员联系信息、联系方法、自助选项（常见问题、帮助页面）、全自动联系机制（聊天机器人）。

标准原文：

If a web page contains any of the following help mechanisms, and those mechanisms are repeated on multiple web pages within a set of web pages, they occur in the same relative order to other page content, unless a change is initiated by the user:

Human contact details;

Human contact mechanism;

Self-help option;

A fully automated contact mechanism.

Note: Help mechanisms may be provided directly on the page, or may be provided via a direct link to a different page containing the information.

Note: For this Success Criterion, the same relative order can be thought of as how the content is ordered when the page is serialized. The visual position of a help mechanism is likely to be consistent across pages for the same page variation (e.g., CSS break-point). The user can initiate a change, such as changing the page's zoom or orientation, which may trigger a different page variation. This criterion is concerned with relative order across pages displayed in the same page variation (e.g., same zoom level and orientation).

 7. 新增3.3.7 Redundant Entry 冗余条目(A)

解析：

当需要在一个流程的多个步骤中输入相同的信息，且用户在前面已经在填过或者提供过给用户时，应在后续的步骤中为用户自动填入这些相同的信息，或提供一个方式让用户能快速选择，除非重新输入信息是必要的，或者这些信息涉及安全校验，再或者由于其他原因已经失效。

标准原文：

Information previously entered by or provided to the user that is required to be entered again in the same process is either:

auto-populated, or

available for the user to select.

Except when:

re-entering the information is essential,

the information is required to ensure the security of the content, or

previously entered information is no longer valid.

 8. 新增3.3.8 Accessible Authentication (Minimum)可访问的身份验证（最小） (AA)

解析：

在身份验证过程中，任何步骤都不需要认知功能测试（例如记住密码或解决难题等），除非提供另一种非认知功能测试的身份验证方式，或有一种机制可以帮助用户完成测试（例如允许粘贴输入密码），者通过图片、音频、视频等形式识别其中的物体（各种物质事物），再或者是识别用户产品中曾经提供过的非文本内容（例如用户此前注册时提供的头像）。

标准原文：

A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:

Alternative：Another authentication method that does not rely on a cognitive function test.

Mechanism：A mechanism is available to assist the user in completing the cognitive function test.

Object Recognition：The cognitive function test is to recognize objects.

Personal Content：The cognitive function test is to identify non-text content the user provided to the website.

Note: "Object recognition" and "Personal content" may be represented by images, video, or audio.

Note: Examples of mechanisms that satisfy this criterion include:

1.support for password entry by password managers to reduce memory need, and

2.copy and paste to reduce the cognitive burden of re-typing.

 9. 新增3.3.9 Accessible Authentication (Enhanced) 可访问的身份验证（增强）(AAA)

解析：

与3.3.8相比，仅保留了提供另一种不依赖认知功能测试的身份验证方式，和有一种机制可以帮助用户完成认知功能测试两种例外。

标准原文：

A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:

Alternative：Another authentication method that does not rely on a cognitive function test.

Mechanism：A mechanism is available to assist the user in completing the cognitive function test.

关于更多WCAG相关标准，欢迎进一步参阅：

• WCAG 2 标准概述：https://www.w3.org/WAI/standards-guidelines/wcag/
• WCAG 2.2 有哪些更新：https://www.w3.org/WAI/standards-guidelines/wcag/new-in-22/
• 如何符合 WCAG 标准（快速参考）：https://www.w3.org/WAI/WCAG21/quickref/
• 
  
• 同时，W3C 正在编辑WCAG 3 规范（观看简介视频）。WCAG 3 将具有不同的架构、不同的一致性模型，并覆盖更广泛的范围。

*信息来源：W3C

*本文作者：王孟琦、杨骅