Adobe Experience Manager支持符合各种辅助功能标准的标准辅助功能。 此外,开发人员可以自定义或扩展以提供一些功能,这些功能有助于使用使用富文本编辑器(RTE)的Experience Manager组件创建可访问的内容。
在设计网页和向页面添加内容时,内容开发人员和作者可以使用RTE的功能提供与辅助功能相关的信息。 例如,通过标题和段落元素添加结构性信息。
要配置和自定义这些功能,请为组件配置RTE插件。 例如,paraformat
插件允许您添加其他块级语义元素,包括将支持的标题级数扩展到默认提供的基本H1
、H2
和H3
之外。
RTE可用于支持触屏的用户界面和经典用户界面的各种组件。 但是,使用RTE的主要组件是Text组件,该组件可用于这两个接口。 以下图像显示启用了一系列插件的RTE,包括paraformat
:
图:触屏优化用户界面中的文本组件。
图:经典用户界面中的文本组件。
有关各种界面中可用的RTE功能之间的差异,请参阅插件及其功能。
有关配置RTE的完整说明,请参阅配置富文本编辑器页。 这涵盖所有问题,包括关键步骤:
通过在CRXDE Lite中相应的rtePlugins
子分支中配置插件,您可以激活该插件的所有功能或特定功能。
新的语义块格式可通过以下方式可供选择:
根据您的RTE,确定并导航到配置位置。
启用“段落”选择字段;通过 激活插件。
然后,RTE中的选择字段中的内容作者可以使用段落格式。 可以访问它们:
通过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
功能。 键入错误和/或不支持的功能可能会引发更多问题。
为了进一步扩展AEM的辅助功能,可以基于RTE(如Text和Table组件)扩展现有组件,并附加元素和属性。
以下过程说明如何使用Caption元素扩展Table组件,该元素向辅助型技术用户提供有关数据表的信息:
在TablePropertiesDialog
的构造函数中,添加一个用于编辑题注的附加文本输入字段。 请注意,必须将itemId
设置为caption
(即DOM属性的名称)才能自动处理其内容。
在表中,将属性显式设置或删除为DOM元素。 该值由config
对象中的对话框传递。 请注意,应使用相应的CQ.form.rte.Common
方法设置/删除DOM属性(com
是CQ.form.rte.Common
的快捷方式),以避免浏览器实现中的常见缺陷。
此过程仅适用于经典用户界面。
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>
开始CRXDE Lite。 例如:http://localhost:4502/crx/de/
复制:
/libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
到:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
如果中间文件夹尚不存在,则可能需要创建中间文件夹。
复制:
/libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
到:
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
。
打开以下文件进行编辑(通过多次单击打开):
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
在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 : "")
});
打开以下文件:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
。
在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);
}
使用保存全部……保存更改
纯文本字段不是字幕元素值允许的唯一输入类型。 您可以使用通过getValue()
方法提供题注值的任何ExtJS构件。
要为更多其他元素和属性添加编辑功能,请确保以下两项:
itemId
属性设置为相应DOM属性(TablePropertiesDialog
)的名称。Table
)。