创建可访问的自适应表单

简介

可访问的表单是每个人都可以使用的表单,包括有特殊需要的用户。 Adaptive Forms包含许多特性和功能,它们增强了不同功能的用户的可用性。 将辅助功能构建到自适应表单中不仅允许对内容进行尽可能最广的受众,而且,在需要遵守辅助功能标准的地区提供文档时,还要求这样做。 AEM Forms帮助表单开发人员遵守辅助功能标准。

在创作自适应表单时,作者应考虑以下几点以创建可访问的自适应表单:

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

先决条件

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

下载和安装辅助工具测试工具

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

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

ANDI可与所有主要的因特网浏览器一起使用。 有关配置和使用该工具的详细说明,请参见ANDI的文档

下载并安装Ultramarine-Accessible主题

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

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

使自适应表单可访问

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

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

将“超级海洋辅助功能”主题应用于现有的自适应表单。 要应用主题,请执行以下操作:

  1. 打开自适应表单进行编辑。
  2. 选择一个组件,然后点按父图标。 在上下文菜单中,点按​自适应表单容器,然后点按配置图标。
  3. 在属性浏览器中选择“超级海洋可访问”主题,然后点按​保存​图标。
  4. 刷新浏览器窗口。 主题将应用于自适应表单。

应用辅助主题后,请执行以下列出的其他修复。 这些修复除了辅助主题中涵盖的辅助功能修复之外,还包括:

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

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

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

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

    如何应用标题样式

  3. 根据辅助工具标准更改页脚背景颜色以使用适当的对比度,以提高文本的可见性和可读性。 您可以使用ANDI在表单中查找颜色对比度问题。 另外,不要使用非常小的字体。 小字体很难读。

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

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

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

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

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

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

  10. 将自定义辅助工具文本添加到表的所有只读单元格。 此外,禁用表的所有只读单元格。

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

2.为表单控件提供适当的标签

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

屏幕阅读器所感知到的标签不一定与可视字幕相同。 在某些情况下,您可能希望更具体地说明控件的用途。 对于表单中的每个字段对象,可使用辅助功能选项指定屏幕阅读器宣布的用于标识特定表单字段的内容。

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

  1. 选择一个组件,然后点按cmppr
  2. 单击侧栏中的​辅助功能​以选择所需的辅助功能选项。

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

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

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

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

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

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

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

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

3.为图像提供对等文本

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

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

选择图像组件,然后点按cmppr。 在提要栏中的“属性”下,为图像指定替代文本。

图像的替代文本

4.提供足够的颜色对比度

辅助工具设计涉及考虑有关颜色使用的其他准则。 表单作者可以通过突出显示各种表单组件,使用颜色来改进表单的外观。 然而,颜色的不当使用可能使不同能力的人很难或无法阅读某种形式。

患有视觉障碍的用户依靠文本与背景之间的高对比度来阅读数字内容。 如果没有足够的对比度,某个表单可能会变得难以阅读,甚至不可能阅读。

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

有关更改自适应表单的颜色对比度和主题的详细信息,请参阅为自适应表单创建自定义主题

5.确保表单控件可通过键盘访问

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

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

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

此外,Adaptive Forms中的​日期选取器​组件还有各种键盘快捷键。 要启用快捷键,请点按​日期选取器​组件,然后点按配置以打开属性。 在​图案​部分中,使用​类型​和​图案​下拉列表选择显示图案。 保存属性以启用​日期选取器​组件的快捷键的使用。

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

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

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

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

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

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now