配置RTE以创建无障碍网页和站点

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

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

要配置和自定义这些功能， 配置RTE插件 对于组件。 例如， paraformat 插件允许您添加其他块级语义元素，包括扩展支持的标题级别数量（超出基本标题级别） H1， H2、和 H3 默认提供。

RTE包含在启用了触屏操作的用户界面和Classic用户界面的各种组件中。 但是，使用RTE的主要组件是 文本 可用于两个界面的组件。 下图显示了启用了一系列插件的RTE，其中包括 paraformat：

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

图：已启用触摸的用户界面中的文本组件。

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

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

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

配置插件功能

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

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

显示示例rtePlugin的CRXDE Lite。

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

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

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

  2. 启用段落选择字段；创建者 激活插件.

  3. 在“段落选择”字段中指定您希望可用的格式.

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

    • 使用触屏UI中的段落枕头图标。
    • 使用 格式 字段（弹出窗口选择器）。

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

使用源编辑功能

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

注意

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

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

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

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

示例 — 将标题添加到“表属性”对话框中

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

In 表，在DOM元素中显式设置或删除属性。 值由中的对话框传递 config 对象。 请注意，应使用相应的设置/删除DOM属性 CQ.form.rte.Common 方法( com 是的快捷方式 CQ.form.rte.Common)，以避免浏览器实施中的常见陷阱。

注意

此过程仅适用于Classic用户界面。

示例 — 在文本中使用强调时创建无障碍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)。
相关文章

在此页面上