Show Menu
主题×

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

Adobe Experience Manager支持符合各种辅助功能标准的标准辅助功能。 此外,开发人员可以自定义或扩展以提供一些功能,这些功能有助于使用使用富文本编辑器(RTE)的Experience Manager组件创建可访问的内容。
在设计网页和向页面添加内容时,内容开发人员和作者可以使用RTE的功能提供与辅助功能相关的信息。 例如,通过标题和段落元素添加结构性信息。
要配置和自定义这些功 能,请为组件配 置RTE插件。 例如,插件 paraformat 允许您添加其他块级语义元素,包括将支持的标题级数扩展到基本、默认 H1 H2 和默认 H3 提供的以外。
RTE可用于支持触屏的用户界面和经典用户界面的各种组件。 但是,要使用RTE的主要组件是 Text 组件,该组件可用于两个界面。 以下图像显示启用了一系列插件的RTE,包括 paraformat :
图: 触屏优化用户界面中的文本组件。
图: 经典用户界面中的文本组件。
有关各种界面中可用的RTE功能之间的差异,请参阅 插件及其功能

配置插件功能

有关配置RTE的完整说明,请参 阅配置富文本编辑器页 。 这涵盖所有问题,包括关键步骤:
通过在CRXDE Lite的相应子 rtePlugins 分支中配置插件,您可以激活该插件的所有功能或特定功能。

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

新的语义块格式可通过以下方式可供选择:
  1. 根据您的RTE,确定并导航到配 置位置
  2. 然后,RTE中的选择字段中的内容作者可以使用段落格式。 可以访问它们:
    • 使用触屏优化UI中的段落笔触图标。
    • 使用 经典 UI中的“格式”字段(弹出选择器)。
AEM通过段落格式选项在RTE中提供结构元素,为可访问内容的开发提供了良好的基础。 内容作者不能使用RTE设置字体大小或颜色或其他相关属性的格式,从而阻止创建内联格式。 相反,它们必须选择相应的结构元素,如标题,并使用从“样式”选项中选择的全局样式。 这可确保清晰的标记,为使用自己的样式表和正确结构化内容浏览的用户提供更好的选项。

使用源编辑功能

在某些情况下,内容作者会发现必须检查和调整使用RTE创建的HTML源代码。 例如,在RTE中创建的某段内容可能需要额外的标记,以确保符合WCAG 2.0。这可以通过RTE的源 编辑 选项来完成。 您可以在插件
仔细使 sourceedit 用功能。 键入错误和/或不支持的功能可能会引发更多问题。

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

要进一步扩展AEM的辅助功能,可以使用其他元素和属性基于RTE(如 Text 和Table 组件)扩展现有组件。
以下过程说明如何使用Caption 元素 (向辅助型技术用户提供有关 数据表的信息 )扩展表组件:

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

在的构造函数 TablePropertiesDialog 中,添加一个用于编辑题注的附加文本输入字段。 请注 itemId 意,必须将 caption 设置为(即DOM属性的名称)才能自动处理其内容。
表中 ,将属性显式设置或删除为DOM元素。 该值由对象中的对话框传 config 递。 请注意,应使用相应的方法设置/删除DOM属 CQ.form.rte.Common 性( com 这是一种快捷方式), CQ.form.rte.Common 以避免浏览器实现中的常见缺陷。
此过程仅适用于经典用户界面。

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

RTE可以使用 strong em 标记代替和 b 标记 i 。 将以下节点添加为对话框中的 uiSettings rtePlugins 节点的同级节点。
<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. 使用全部保 存……保存更改
纯文本字段不是字幕元素值允许的唯一输入类型。 您可以使用任何ExtJS构件,它通过其方法提供字幕的 getValue() 值。
要为更多其他元素和属性添加编辑功能,请确保以下两项:
  • 每个 itemId 对应字段的属性设置为相应DOM属性()的名 TablePropertiesDialog 称。
  • 在DOM元素上显式设置和/或删除该属 Table 性。