配置RTE以生成无障碍站点

注意

AEM 6.4已结束扩展支持，本文档将不再更新。 有关更多详细信息，请参阅 技术支助期. 查找支持的版本 此处.

AEM同时支持以下两项：

  • 标准辅助功能，包括图像的替代文本
  • 以及在使用富文本编辑器(RTE)的组件创建内容时可访问的其他功能
注意

内容作者在向页面添加内容时，可以使用RTE的功能来提供辅助功能信息。 这可以包括通过标题和段落元素添加结构性信息。

您可以 通过配置RTE插件配置和自定义这些功能 的子菜单。 例如， paraformat 插件允许您添加其他块级语义元素，包括扩展基本标题级别以外支持的标题级别数 H1, H2 和 H3 默认提供。

RTE可在触屏优化UI和经典UI中的各种组件中使用。 但是，使用RTE的主要组件是 文本 组件。

的 文本 AEM中的组件同时适用于触屏UI和经典UI。 下图显示了启用了一系列插件的富文本编辑器，包括 paraformat:

  • 的 文本 触屏UI中的组件：

    触屏UI中全屏模式的文本组件(RTE)。

  • 的 文本 组件：

    经典UI中文本组件的编辑对话框(RTE)。

注意

经典UI和触屏UI中可用的RTE功能之间存在差异。 有关更多详细信息，请参阅

配置插件功能

有关配置RTE的完整说明，请参阅 配置富文本编辑器 页面。 这涵盖所有问题，包括关键步骤：

通过在相应的 rtePlugins CRXDE Lite的子分支（请参阅下图），您可以激活该插件的所有功能或特定功能。

CRXDE Lite显示了rtePlugin示例。

示例 — 指定RTE选择字段中可用的段落格式

新的语义块格式可通过以下方式供选择：

  1. 根据RTE，确定并导航到 配置位置.

  2. 启用“段落”选择字段;by 激活插件.

  3. 在“段落”选择字段中指定要使用的格式.

  4. 然后，内容作者可以从RTE的选择字段中使用段落格式。 可以访问它们：

    段落(Pilcrow)图标。

    • 使用 格式 字段（下拉选择器）。

RTE中通过段落格式选项提供的结构元素，为开发无障碍内容提供了良好的基础。 内容作者不能使用RTE设置字体大小、颜色或其他相关属性的格式，从而阻止创建内联格式。 相反，他们必须选择相应的结构元素（如标题），并使用从“样式”选项中选择的全局样式。 这可确保清晰的标记，为使用自己的样式表和正确结构化内容进行浏览的用户提供更多选项。

使用源编辑功能

在某些情况下，内容作者会发现需要检查和调整使用RTE创建的HTML源代码。 例如，在RTE中创建的一段内容可能需要额外的标记，以确保符合WCAG 2.0。这可以通过 源编辑 选项。 您可以指定 sourceedit 功能 misctools 插件.

注意

使用 sourceedit 功能。 键入错误和/或不受支持的功能可能会引发更多问题。

添加对其他HTML元素和属性的支持

要进一步扩展AEM的辅助功能，可以基于RTE扩展现有组件(例如 文本 和 表 组件)。

以下过程说明如何扩展 表 组件 题注 向辅助型技术用户提供有关数据表信息的元素：

示例 — 将题注添加到表属性对话框

在的构造函数中 TablePropertiesDialog，添加用于编辑题注的其他文本输入字段。 请注意 itemId 必须设置为 caption （即DOM属性的名称）以自动处理其内容。

在 表 您必须在DOM元素中显式设置或删除属性。 该值由 config 对象。 请注意，应使用相应的 CQ.form.rte.Common 方法( com 是 CQ.form.rte.Common)，以避免浏览器实施存在的常见缺陷。

注意

此过程仅适用于经典UI。

分步说明

  1. 开始CRXDE Lite。 例如： http://localhost:4502/crx/de/

  2. 复制：

    /libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js

    到:

    /apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js

    注意

    如果中间文件夹不存在，则可能需要创建中间文件夹。

  3. 复制：

    /libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js

    到:

    /apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js。

  4. 打开以下文件进行编辑（双击打开）：

    /apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js

  5. 在 constructor 方法，在读取行之前：

    var dialogRef = this;

    添加以下代码：

    editItems.push({
    "itemId": "caption",
    "name": "caption",
    "xtype": "textfield",
    "fieldLabel": CQ.I18n.getMessage("Caption"),
    "value": (this.table && this.table.caption ? this.table.caption.textContent : "")
});

  6. 打开以下文件：

    /apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js。

  7. 在 transferConfigToTable 方法：

    /**
 * Adds Caption Element
*/
var captionElement;
if (dom.firstChild && dom.firstChild.tagName.toLowerCase() == "caption")
{
   captionElement = dom.firstChild;
}
if (config.caption)
{
    var captionTextNode = document.createTextNode(config.caption)
    if (captionElement)
    {
       dom.replaceNode(captionElement.firstChild,captionTextNode);
    } else
    {
        captionElement = document.createElement("caption");
        captionElement.appendChild(captionTextNode);
        if (dom.childNodes.length>0)
        {
           dom.insertBefore(captionElement, dom.firstChild);
        } else
        {
           dom.appendChild(captionElement);
        }
    }
} else if (captionElement)
{
  dom.removeChild(captionElement);
}

  8. 使用 全部保存

注意

纯文本字段不是唯一允许为标题元素值输入的类型。 任何ExtJS小组件，通过 getValue() 方法。

要为其他元素和属性添加编辑功能，请确保以下两点：

  • 的 itemId 将每个相应字段的属性设置为相应DOM属性的名称(TablePropertiesDialog)。
  • 在DOM元素中显式设置和/或删除属性(Table)。

在此页面上