配置RTE以生成可访问的站点

AEM同时支持以下两项:

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

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

您可以通过为组件配置RTE插件🔗来配置和自定义这些功能。 例如,paraformat插件允许您添加其他块级语义元素,包括扩展支持的标题级别数量,超出默认提供的基本H1H2H3

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

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

  • 触屏UI中的​Text​组件:

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

  • 经典UI中的​Text​组件:

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

注意

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

配置插件功能

配置富文本编辑器页面上提供了有关配置RTE的完整说明。 这涵盖所有问题,包括关键步骤:

通过在CRXDE Lite的相应rtePlugins子分支中配置插件(请参阅下图),可以激活该插件的所有功能或特定功能。

CRXDE Lite显示了rtePlugin示例。

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

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

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

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

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

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

    • 在触屏UI中使用段落(pilcrow)图标:

    段落(Pilcrow)图标。

    • 使用经典UI中的​Format​字段(下拉选择器)。

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

使用源编辑功能

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

注意

请仔细使用sourceedit功能。 键入错误和/或不受支持的功能可能会导致更多问题。

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

要进一步扩展AEM的辅助功能,可以基于RTE(例如​Text​和​Table​组件)扩展现有组件,并包含其他元素和属性。

以下过程说明了如何使用​标题​元素扩展​​组件,该元素向辅助型技术用户提供有关数据表的信息:

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

TablePropertiesDialog的构造函数中,添加一个用于编辑题注的附加文本输入字段。 请注意,必须将itemId设置为caption(即DOM属性的名称),才能自动处理其内容。

在​Table​中,必须明确地设置或从DOM元素中删除属性。 该值由config对象中的对话框传递。 请注意,应使用相应的CQ.form.rte.Common方法(comCQ.form.rte.Common的快捷方式)设置/删除DOM属性,以避免浏览器实施中出现的常见缺陷。

注意

此过程仅适用于经典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. 使用​Save All​保存更改

注意

纯文本字段不是唯一允许为标题元素值输入的类型。 任何通过getValue()方法提供字幕值的ExtJS小组件均可使用。
要为其他元素和属性添加编辑功能,请确保以下两点:

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

在此页面上