创建无障碍的自适应表单 creating-accessible-adaptive-forms

Adobe 建议使用现代、可扩展的数据捕获核心组件,以创建新的自适应表单将自适应表单添加到 AEM Sites 页面。这些组件代表有关创建自适应表单的重大改进,确保实现令人印象深刻的用户体验。本文介绍了使用基础组件创作自适应表单的旧方法。

简介 introduction

可访问的表单是每个人都能使用的表单,包括有特殊需求的用户。 自适应Forms包括多种特性和功能,可增强具有不同功能的用户的可用性。 将辅助功能构建到自适应表单中不仅可以使内容具有尽可能广泛的受众,而且在要求遵守辅助功能标准的地理位置提供文档时,这也是一项要求。 AEM Forms帮助表单开发人员符合辅助功能标准。

在创作自适应表单时,作者应考虑以下几点来创建无障碍的自适应表单:

  • 使用辅助功能名称和描述检查器(ANDI)辅助功能测试工具检查表单
  • 为表单控件提供适当的标签
  • 为图像提供等效文本
  • 提供足够的颜色对比度
  • 确保可使用键盘访问表单控件

先决条件

您需要辅助工具,例如 可访问的名称和描述检查器(ANDI)为修复辅助功能相关问题而开发的自适应表单主题 创建无障碍的自适应表单。

下载并安装辅助功能测试工具

可访问的名称和描述检查器(ANDI)工具可帮助您识别和修复Web内容中与辅助功能兼容性相关的问题。 它是美国国土安全部Trusted Tester v5准则中推荐的工具。 它由美国社会保障管理​部开发,用于检查Section 508对Web内容的符合性。 该工具:

  • 帮助检测网页上​的辅助功能问题
  • 提供改进辅助功能的建议​。
  • 检测键盘辅助功能和颜色对比度问题
  • 明确标识符合标准的屏幕阅读器内容

ANDI可与所有主要的Internet浏览器配合使用。 看, ANDI的文档 有关配置和使用工具的详细说明。

下载并安装Ultramarine-Access主题

Ultraminary-Accessible主题是参考主题。 它有助于演示如何在自适应表单中修复颜色对比度和其他与辅助功能相关的问题。 Adobe建议您根据组织批准的样式为生产环境创建自定义主题。 执行以下步骤以将主题上传到AEM实例:

  1. 下载主题包。
  2. 导航到 Experience Manager > 导航 导航 > Forms 在您的AEM实例上。
  3. 选择 创建 > 文件上传. 选择并上传x Ultramarine-Accessible-Theme.zip文件。 它会将主题上传到您的AEM实例。

使自适应表单可访问

您应该关注四个关键方面:键盘导航、颜色对比度、有意义的图像替换文本以及使自适应表单可访问的表单控件的相应标签。 执行以下步骤可访问您现有的自适应表单:

1.应用易访问的主题并执行其他修复

将Ultraminary-Accessible主题应用于您现有的自适应表单。 要应用主题,请执行以下操作:

  1. 打开自适应表单进行编辑。
  2. 选择组件并选择父级图标。 在上下文菜单中,选择 自适应表单容器 然后选择配置图标。
  3. 在属性浏览器中选择Ultramarine-Accessible主题,然后选择 保存 图标。
  4. 刷新浏览器窗口。 主题将应用于自适应表单。

应用辅助主题后,请执行以下列出的其他修复。 这些修复是对辅助功能主题中涵盖的辅助功能修复的补充:

  1. 在自适应表单中为徽标图像添加有意义的替换文本。

    为自适应表单模板的页眉和页脚组件中的图像提供有意义的替换文本。 修复模板并使用它创建自适应表单时,自适应表单会继承应用于模板页眉和页脚的所有辅助功能相关修复。 对于现有的自适应表单,在自适应表单级别进行更改。 对自适应表单模板所做的更改不会自动流向现有的自适应表单。

  2. 将包含表单名称的标题组件添加到自适应表单。 如果窗体设计指定了公司名称,则还要为公司名称添加单独的标题组件。

    大多数辅助工具可告知用户内容的层级,以帮助用户了解网页的结构。 为自适应表单上的组织名称和表单名称文本设置不同的标题级别,为这些文本提供层次结构。 此外,使用每个面板和部分前具有相应标题级别的文本组件来创建层级。

    如何应用标题样式

  3. 根据辅助功能标准更改页脚背景颜色以使用相应的对比度,以提高文本的可见性和可读性。 您可以使用ANDI查找表单中的颜色对比度问题。 此外,请勿使用非常小的字体。 小字体很难阅读。

  4. 将现有自适应表单中的开关和图像选择组件替换为选择(单选)组件。

  5. 将现有自适应表单中的数字步进器组件替换为数字框组件。

  6. 将日期输入字段替换为日期选取器字段。

  7. 设置日期选取器组件的显示、验证和编辑模式。 此外,设置自定义验证错误消息。 例如,您指定的日期无效。 正确的日期格式为YYYY-MM-DD。

  8. 为日期选取器组件设置自定义辅助功能文本。 例如,输入您的出生日期。 屏幕阅读器阅读这些自定义辅助功能文本。

  9. 对自适应表单组件使用简短描述而不是详细说明。 较长的描述会添加帮助按钮。 确保自适应没有任何帮助按钮。

  10. 向表的所有只读单元格添加自定义辅助功能文本。 另外,禁用表的所有只读单元格。

  11. 删除自适应表单中的潦草签名字段(如果有)。 配置自适应表单以使用Adobe Sign实现无缝的数字签名体验。

2.为表单控件提供适当的标签 provide-proper-labels-for-form-controls

组件的标签或标题可标识表单组件所表示的内容。 例如,文本“名字”会告诉用户必须在文本字段中输入其名字。 为便于屏幕阅读器访问,标签以编程方式与表单组件关联。 或者,表单控件配置有附加的可访问性信息。

屏幕阅读器感知到的标签不需要与可视字幕相同。 在某些情况下,您可能希望更详细地了解此控件的用途。 对于表单中的每个字段对象,可使用辅助功能选项指定屏幕阅读器标注的内容以标识特定表单字段。

要使用“辅助功能”选项,请执行以下步骤:

  1. 选择组件并选择 cmppr .
  2. 单击 辅助功能 在侧栏中选择所需的辅助功能选项。

表单组件中的辅助功能选项 accessibility-options-in-form-components

表单组件中的辅助功能选项

自定文本 表单作者在辅助功能选项自定义文本字段中提供内容。 辅助技术(如屏幕阅读器)使用此自定义文本。 在大多数情况下,使用“标题”设置是最佳选项。 考虑仅在无法使用标题或简短描述时创建自定义屏幕Reader文本。

简短描述 对于大多数组件,当用户将指针悬停在组件上时,会在运行时显示简短描述。 您可以在帮助内容选项下的简短描述字段中设置此选项。

标题 使用此选项可让AEM Forms使用与表单字段关联的可视标签作为屏幕阅读器文本。

名称 可以在“绑定”选项卡的“名称”字段中指定值。 名称不能包含任何空格。

选择“无”会导致表单对象在已发布的表单中没有名称。 不建议对表单控件使用“无”设置。

NOTE
  • 单选按钮和复选框只能有两个辅助功能选项,即“自定义文本”和“标题”。
  • 对于基于XFA的自适应表单,辅助功能选项继承自XDP中设置的辅助功能选项。 XDP中的工具提示映射到简短描述,而标题映射到标题。 其他选项按原样工作。

3.为图像提供等效文本 provide-text-equivalents-for-images

图像有助于提高某些用户的理解。 但是,对于使用屏幕阅读器的用户,图像会降低表单的辅助功能。 如果选择使用图像,请为所有图像提供文本描述。

确保文本在表单中描述了对象及其用途。 屏幕阅读器在遇到图像时读取此替换文本。 图像必须始终指定替换文本。

选择图像组件并选择 cmppr . 在侧栏中的属性下方,指定图像的替换文本。

图像的替换文本

4.提供足够的颜色对比度 provide-sufficient-color-contrast

辅助功能设计涉及考虑有关颜色使用的其他准则。 表单作者可以使用颜色通过突出显示各种表单组件来改善表单的外观。 但是,如果颜色使用不当,可能会使表单难以或由能力不同的人阅读。

视力障碍用户依靠文本和背景之间的高对比度来阅读数字内容。 如果没有足够的对比度,对于某些用户来说,表单可能会变得很难(如果不是不可能的话)阅读。

建议使用默认字体和背景颜色 — 白色背景上的黑色内容。 如果更改默认颜色,请在浅色背景颜色上选择深色前景色,或反之。

请参阅 创建自适应表单的自定义主题,以了解有关更改自适应表单的颜色对比度和主题的更多信息。

5.确保表单控件可使用键盘 ensure-that-form-controls-are-keyboard-accessible

仅使用键盘或等效输入设备即可完全填充可访问的表单。 行动不便或视力不佳的用户可能别无选择,只能使用键盘,而许多使用鼠标的用户更喜欢使用键盘输入。 通过允许使用各种输入方法,您不仅可以创建无障碍表单,还可以创建更适合所有用户偏好的表单。

AEM Forms中提供了以下键盘快捷键。

操作
键盘快捷键
在表单中向前移动光标
选项卡
在表单中向后移动光标
Shift+Tab键
移到下一个面板
Alt+向右键
移到上一个面板
Alt+向左键
在表单中重置填写的数据
Alt+R
提交表单
Alt+S

此外,还有各种键盘快捷键可用于 日期选取器 自适应Forms中的组件。 要启用快捷键,请选择 日期选取器 组件和选择 配置 以打开属性。 在 模式 部分,使用选择显示图案 类型图案 下拉列表。 保存属性以启用快捷键 日期选取器 组件。

以下键盘快捷键可用于自适应Forms中的日期选取器组件:

操作
键盘快捷键
  • 当选项卡焦点突出显示日历图标时,显示日期选取器组件选项
  • 当选项卡焦点突出显示某个选项时,执行单击事件
空格或Enter
隐藏日期选取器组件选项
Esc
  • 在日期选取器组件中可用的选项中向前移动光标。
  • 在日期输入字段处于活动状态时将选项卡焦点设置为日历图标
选项卡
在日期选取器组件中可用的选项之间向后移动光标
Shift+Tab键
  • 当选项卡焦点突出显示日期输入字段时显示日期选取器组件选项
  • 在日期选取器组件中可用的日历中向下移动光标
向下箭头
在日期选取器组件中可用的日历中向上移动光标
向上箭头键
在日期选取器组件中可用的日历中向后移动光标
左箭头
在日期选取器组件中可用的日历中向前移动光标
向右箭头
对日历中右导航箭头和左导航箭头之间的标题执行操作
Shift +向上键
执行向右导航箭头图标的操作 右箭头 在日历中可用
Shift +向左键
执行向左导航箭头图标的操作 左箭头 在日历中可用
Shift +向右键

使用辅助功能工具查找剩余的辅助功能问题

辅助功能名称和描述检查器(ANDI)可帮助您在自适应表单中识别和修复与辅助功能符合性相关的问题。 要使用ANDI工具查找自适应表单中的辅助功能问题,请执行以下操作:

  1. 在预览模式下打开自适应表单。
  2. 单击已添加书签的ANDI工具图标。 ANDI工具可分析自适应表单并显示辅助功能问题。 有关如何使用该工具的详细信息,请参阅 ANDI的文档.
  3. 审查和修复ANDI报告的问题。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2