在此关于 Anthology Adopt 指南中的无障碍访问功能的页面上，详细了解您的指南如何覆盖所有用户。
概述
这些建议是 Pendo 基于当前功能集提供的无障碍访问建议。本文档不用于证明或表明符合 WCAG 2.1 AA 无障碍访问标准或其他类似标准。Pendo 的指南无障碍访问功能旨在允许您构建无障碍访问指南，但 Pendo 不保证内容符合任何无障碍访问性标准。
网络内容无障碍访问可确保公平访问互联网。Pendo 指南为用户提供有关应用程序的重要信息和通信。指南无障碍访问功能可帮助所有用户查找您的 Pendo 指南并与之交互。
所有指南都会自动应用一些无障碍访问功能，如奖章和键盘导航的焦点和输入属性。其他功能需要在创建指南期间进行激活配置。创建指南时，可以在 Visual Design Studio 中设置自动对焦、ARIA 标签、替换文本、标题和 ARIA 角色等功能。无障碍访问指南中的某些要求（如颜色对比度、嵌入视频或音频的字幕以及可单击元素大小）需要由指南设计人员进行实施。
建议
指南激活
- 激活了奖章的指南更便于访问。这些指南比自动或目标元素指南更便于访问，因为它们为用户提供了触发它们的选项。
- 您应始终将奖章位置设置为“右内联”或“左内联”。 这会限制您可以在用户界面中放置奖章的位置，但可确保通过键盘导航按逻辑顺序导航到奖章。
指南创建
- 尽可能添加描述性替换文本或 ARIA 标签。这些信息由辅助技术读取，并为用户提供必要的上下文。
- ARIA 角色对话框、横幅和补充是最常见且对 Anthology Adopt 指南最有帮助的。
- 应始终选择自动对焦以提供最佳指南体验。
- 确认指南元素的颜色对比度符合指南主题中的 WCAG AA 标准。
- 将奖章大小调整为 24 像素，这是针对最小目标大小的 WCAG 2.2 AA 要求。
配置指南无障碍访问
在 Visual Design Studio 中指南的容器和 Building Block 设置中配置无障碍访问功能。如果元素具有可用的无障碍访问设置，则这些设置位于编辑模式的无障碍访问功能标签中。
在 Visual Design Studio 的主题设置中创建或编辑主题时，可以使用颜色对比度检查器。
可配置属性
以下是您可以在容器和 Building Block 设置中编辑的属性，可使指南更便于访问。列出的每个属性都包含可以对其进行编辑的位置。
- 颜色对比度。包含文本的元素的背景和字体颜色。
- alt（图像替换文本）。图像 Building Block。
- aria-label。容器、关闭按钮、按钮、奖章、文本 Building Block。
- aria-modal。启用背景时的容器。
- role。用于每个指南步骤的容器。
- title。视频 Building Block
- 自动对焦此步骤。用于每个指南步骤的容器。
不可配置的属性（自动应用）
- h2、h3、p（语义标题）。标题、副标题和段落文本块会自动分配给相应的标题或段落元素。
- aria-labelledby。在开放文本、是/否、多项选择、数字量表和 NPS 投票使用的两个元素之间创建关系。
- aria-describedby。在两个元素之间创建关系，由数字量表投票和 NPS 调查用于将量表中的第一个和最后一个数字与其文本说明连接起来。
- aria-expanded。自动应用于指南和资源中心的奖章。
- role - role="group"。自动应用于投票 Building Block 中的“是”/“否”按钮和单选按钮。
访问主题设置
1. 选择侧面板上的指南，然后选择管理主题。
2. 在排版或按钮区域中，选择铅笔图标进行编辑。
3. 编辑时会显示颜色对比度检查器。这将验证应用于指南的颜色选择是否符合 WCAG AA 4.5:1 或 WCAG AAA 7:1 对比度要求。当您更改背景和字体的颜色时，它会实时更新。如果不符合对比度要求，WCAG 标记将显示为红色。如果符合要求，WCAG 标记将显示为绿色。
编辑容器无障碍访问设置
选择指南中单个步骤的边缘以在 Visual Design Studio 中打开容器设置。
每个指南步骤都有唯一的设置用于控制该步骤的外观和行为。如果要创建多步骤无障碍访问指南，则必须为每个指南步骤配置“无障碍访问”标签。
容器无障碍访问设置
- ARIA 标签 - 无障碍访问名称。为整个指南容器设置 ARIA 标签。
- 角色。从可用角色（无角色、文章、横幅、补充、内容信息、对话框、表单、主页面、导航、演示和区域）的下拉菜单中选择 ARIA 角色。
- 自动对焦此步骤。将辅助技术焦点捕捉到指南上。
- ARIA 标签 - 关闭按钮。为默认关闭按钮设置 ARIA 标签，该按钮也可以在容器设置中进行切换。
编辑文本或按钮设置
在 Visual Design Studio 中，选择要编辑的元素的加号按钮。这会打开 Building Block 设置面板。
可以为文本和按钮 Building Block 配置 ARIA 标签。
文本 Building Block 块的语义 HTML
文本 Building Block 根据文本 Building Block 设置中选定的主题样式，自动在 HTML 中分配语义标题。
- 标题是 h2 元素
- 副标题是 h3 元素
- 段落是 p 元素
- 自定义会保留最后分配样式的语义标题（例如，将段落样式更改为自定义样式的文本块将保留为 p 元素）
编辑图像设置
选择图像 Building Block 可打开图像 Building Block 设置。可以为图像 Building Block 配置图像替换文本。替换文本是向图像添加无障碍访问文本的首选方法。ARIA 标签通常不与图像一起使用。
编辑视频设置
选择视频 Building Block 可打开视频 Building Block 设置。可以为视频 Building Block 配置标题。标题是为视频添加无障碍访问文本的首选方法。
编辑投票设置
各种投票 Building Block 具有可配置和不可配置设置的组合，使其实现无障碍访问。
选择投票响应字段可打开投票设置。投票中的文本和按钮元素具有 ARIA 标签字段。
ARIA-describedby、ARIA-labelledby 和小组角色会自动应用，以将投票响应与其各自的问题文本连接起来。
编辑奖章大小
奖章是用户可以在 Blackboard 中激活 Adopt 指南的方式之一。Anthology Adopt 奖章的默认大小为 14 像素。WCAG 2.2 AA 对最小目标大小的要求为 24 像素。
要更改奖章大小，请选择激活以打开激活设置。在奖章下，选择编辑设置。
在“样式”标签的大小字段中，可以在 8 像素到 300 像素的范围内调整奖章像素大小。当您更改字段中的数字时，奖章大小会实时更改。
图像缩放
WCAG 准则指出，内容应“在不丢失信息或功能，且无需在二维空间中滚动的情况下呈现”。指南容器会自动扩展图像 Building Block 以满足此要求。如果用户放大指南，图像会自动按照与容器宽度的比例进行缩放，并且图像不会被截断或添加水平滚动条。
全宽图像最佳实践
默认情况下，Pendo 指南容器的外边缘周围有 40 像素的填充，以间隔开指南内容并且更便于进行指南设计。填充设置为 100% 的图像会保持在 40 像素填充默认值内。负边距可用于将图像展开到容器的整个宽度。图像缩放会在用户放大或缩小时自动调整图像以匹配容器宽度。
全宽边距设置
所有值均为负数
- 左边距 -40 像素
- 右边距 -40 像素
- 如果已更改指南容器填充设置，请将负边距与容器填充值匹配
如果使用自定义填充和边距来创造性地将图像 Building Block 调整到开箱即用的 Building Block 放置不支持的位置，则图像缩放可能会扭曲这些图像的呈现和放置。在不同缩放级别检查指南，看看您的自定义设置是否干扰了自动图像缩放。
焦点
焦点状态可帮助用户无需鼠标或触摸板便可使用应用。焦点状态可以显示为元素周围的圆环，具体取决于 CSS 样式。Chrome 83+ 版本使您可以为应用中的焦点元素设置样式。您可能会注意到浏览器在单击这些元素或使用 Tab 键浏览页面时添加了焦点状态，例如元素周围的轮廓。
HTML 标记 - 输入
奖章在 HTML 中使用 input 标记。它们可能会继承在 CSS 样式中指定给 input 的任何属性。在添加无障碍访问功能之前，奖章使用了 img 标记。以下是使用 Chrome 浏览器的开发工具检查的资源中心奖章示例：
<input type=”image” id=”pendo-image-badge-ID" src=”image-URL” data-_pendo-image-1 class=“_pendo-image _pendo-badge-image _pendo-resource-center-badge-image" style=“display: block; height: 56px; width: auto; box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0px; float: none; vertical-align: baseline;”>
自动对焦
自动对焦此步骤会将辅助技术的焦点捕捉在指南步骤上，直到被忽略为止。此设置在容器设置中为每个指南步骤进行配置。
ARIA 标签、替换文本和标题
ARIA 标签、替换文本和标题用于标识用户界面中未以无障碍访问方式描述的元素。辅助功能工具以不同的方式使用这些属性。例如，屏幕阅读器可以向用户大声朗读 ARIA 标签。ARIA 标签指的是文本和按钮 Building Block，替换文本会应用于图像 Building Block，而标题则用于视频 Building Block。以下是使用 Chrome 浏览器的开发工具检查的 ARIA 标签：
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
ARIA 标签、替换文本和标题将添加到每个单独的 Building Block 中。
Guide ARIA 角色
ARIA 角色用于标识辅助技术的元素，以便为用户提供适当的帮助。角色在 ARIA 角色模型中定义，具有特定的用途。例如，标识交互式元素的小部件和记录页面内容组织结构的小部件（通常不是交互式的）有着不同的角色。
角色是为每个单独的指南步骤进行设置的。
<div id=“pendo-guide-container" data-editing-id=“f3db5a53-a87a-49b3-949f-e14f9e0eaf" class=“class=“_pendo-guide-container-styles" aria-model=“false” aria-label=“New user walkthrough” role=“dialog” style=“border: 1px solid rgb(187, 187, 187); background-color: rgb(255, 255, 255); border-radius: 0px; box-shadow: rgb(136, 136, 136) 0px 0px 20px 0px; display: block; position: relative; float: none; vertical-align: baseline; padding: 40px;”>...</div>
可用角色
- 无角色
- 文章
- 横幅
- 补充
- 内容信息
- 对话框
- 表单
- 主页面
- 导航
- 演示
- 区域
W3C 建议在将内容发布给用户后，不要因用户行为或随时间推移而更改角色。平台和辅助设备通常没有允许逐渐更新角色的 API。辅助技术看到的第一个角色通常处于缓存状态，不会更新。如果需要更改已发布指南的 ARIA 角色，请克隆指南、更改角色、发布更新的指南并禁用以前的版本。克隆指南会生成新 ID，并且辅助设备将会缓存新的指南内容。
