配置RTE以创建可访问的网页和站点

Adobe Experience Manager支持符合各种辅助功能标准的标准辅助功能。 此外,开发人员可以自定义或扩展以提供一些功能,这些功能有助于使用使用富文本编辑器(RTE)的Experience Manager组件创建可访问的内容。

在设计网页和向页面添加内容时,内容开发人员和作者可以使用RTE的功能提供与辅助功能相关的信息。 例如,通过标题和段落元素添加结构性信息。

要配置和自定义这些功能,请为组件配置RTE插件。 例如,paraformat插件允许您添加其他块级语义元素,包括将支持的标题级数扩展到默认提供的基本H1H2H3之外。

RTE可用于支持触屏的用户界面和经典用户界面的各种组件。 但是,使用RTE的主要组件是​Text​组件,该组件可用于这两个接口。 以下图像显示启用了一系列插件的RTE,包括paraformat:

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

图:触屏优化用户界面中的文本组件。

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

图:经典用户界面中的文本组件。

有关各种界面中可用的RTE功能之间的差异,请参阅插件及其功能

配置插件功能

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

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

CRXDE Lite显示示例rtePlugin。

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

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

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

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

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

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

    • 使用触屏优化UI中的段落笔触图标。
    • 在经典UI中使用​格式​字段(弹出选择器)。

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

使用源编辑功能

在某些情况下,内容作者会发现必须检查和调整使用RTE创建的HTML源代码。 例如,在RTE中创建的某段内容可能需要额外的标记,以确保符合WCAG 2.0。这可以通过RTE的源edit选项来完成。 可以在misctools插件](/docs/experience-manager-65/administering/operations/rich-text-editor.html?lang=zh-Hans#aboutplugins)上指定[ sourceedit功能。

注意

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

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

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

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

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

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

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

注意

此过程仅适用于经典用户界面。

示例——在文本中使用强调时创建可访问的HTML

RTE可以使用strongem标记代替bi。 将以下节点添加为对话框中的uiSettingsrtePlugins节点的同级节点。

<htmlRules jcr:primaryType="nt:unstructured">
    <docType jcr:primaryType="nt:unstructured">
        <typeConfig jcr:primaryType="nt:unstructured"
                useSemanticMarkup="{Boolean}true">
            <semanticMarkupMap
                    b="strong"
                    i="em"/>
        </typeConfig>
    </docType>
</htmlRules>

分步说明

  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)。

在此页面上

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