配置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中的RTE功能与触屏优化UI之间存在差异。 有关详细信息,请参阅

配置插件功能

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

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

CRXDE Lite显示示例rtePlugin。

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

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

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

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

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

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

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

    段落(pilcrow)图标。

    • 在经典UI中使用​格式​字段(下拉选择器)。

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

使用源编辑功能

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

注意

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

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

为了进一步扩展AEM的辅助功能,可以基于RTE(如​Text​和​Table​组件)扩展现有组件,并附加元素和属性。

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

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

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

在​​中,必须显式设置属性或从DOM元素中删除属性。 该值由config对象中的对话框传递。 请注意,应使用相应的CQ.form.rte.Common方法设置/删除DOM属性(comCQ.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. 使用​保存全部​保存更改

注意

纯文本字段不是字幕元素值允许的唯一输入类型。 可使用通过getValue()方法提供题注值的任何ExtJS构件。

要为更多其他元素和属性添加编辑功能,请确保以下两项:

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

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