Вы находитесь на странице справочной информации о версии:

AEM supports both:

  • standard accessibility features, including alternate text for images
  • as well as additional features that can be accessed when creating content with components that use the rich text editor (RTE)

Примечание.

See also:

Content authors can use features of the RTE to provide accessibility information while adding content to a page. This can include adding structural information through headings and paragraph elements.

You can configure and customize these features by configuring RTE plugins for the component. For example, the paraformat plugin allows you to add additional block level semantic elements, including extending the number of heading levels supported beyond the basic H1, H2 and H3 provided by default.

The RTE is available in a variety of components from both the touch-optimized and the classic UI. However, the primary component for using the RTE is the Text component.

The Text component in AEM is available for both the touch-optimized and the classic UIs. The following images show the rich text editor with a range of plugins enabled, including paraformat:

  • The Text component in the touch-optimized UI:

    Text component (RTE) in full-screen-mode in the touch-optimized UI.
  • The Text component in the classic UI:

    Edit dialog (RTE) of the text component in the classic UI.

Примечание.

There are differences between the RTE features available in the classic UI and the touch-optimized UI. For more details see

Configuring the Plugin Features

Full instructions on configuring the RTE are available on the Configuring the Rich Text Editor page. This covers all issues, including the key steps:

By configuring a plugin within the appropriate rtePlugins sub-branch in CRXDE Lite (see the following image), you can activate either all or specific features for that plugin.  

CRXDE Lite showing an example rtePlugin.

Example - Specifying Paragraph Formats Available in RTE Selection Field

New semantic block formats may be made available for selection by:

  1. Depending on your RTE, determine and navigate to the configuration location.

  2. The paragraph formats are then available to the content author from the selection fields in the RTE. They can be accessed:

    • Using the paragraph (pilcrow) icon in the touch-optimized UI:
    Paragraph (pilcrow) icon.
    • Using the Format field (drop-down selector) in the classic UI.

With structural elements available in the RTE via the paragraph format options, AEM provides a good basis for the development of accessible content. Content authors cannot use the RTE to format font size or colors or other related attributes, preventing the creation of inline formatting. Instead they must select the appropriate structural elements, such as headings and use global styles chosen from the Styles option. This ensures clean markup, greater options for users who browse with their own style sheets and correctly structured content.

Use of the Source Edit Feature

In some cases, content authors will find it necessary to examine and adjust the HTML source code created using the RTE. For example, a piece of content created within the RTE may require additional markup to ensure compliance with WCAG 2.0. This can be done with the source edit option of the RTE. You can specify the sourceedit feature on the misctools plugin.

Внимание.

The sourceedit feature:

  • Is only available in the classic UI; it is not supported in the touch-optimized UI.
  • Must be used with great care; typing errors and/or trying to introduce features not supported by the RTE can introduce additional problems.

Adding Support for Additional HTML Elements and Attributes

To further extend the accessibility features of AEM, it is possible to extend the existing components based on the RTE (such as the Text and Table components) with additional elements and attributes.

The following procedure illustrates how to extend the Table component with a Caption element that provides information about a data table to assistive technology users:

Example - Adding the Caption to the Table Properties Dialog

In the constructor of the TablePropertiesDialog, add an additional text input field that is used for editing the caption. Note that itemId must be set to caption (i.e. the DOM attribute’s name) to automatically handle its content.

In Table you must explicitly set or remove the attribute to/from the DOM element. The value is passed by the dialog in the config object. Note that DOM attributes should be set/removed using the corresponding CQ.form.rte.Common methods (com is a shortcut for CQ.form.rte.Common) to avoid common pitfalls with browser implementations.

Примечание.

This procedure is only suitable for the classic UI.

Step by Step Instructions

  1. Start CRXDE Lite. For example: http://localhost:4502/crx/de/

  2. Copy:
        /libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
    to:
        /apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js

    Примечание.

    You may need to create intermediate folders if they do not already exist.

  3. Copy:
        /libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
    to:
        /apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js.

  4. Open the following file for editing (open with double-click):

        /apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js

  5. In the constructor method, before the line reading:

    var dialogRef = this;

    Add the following code:

    editItems.push({
        "itemId": "caption",
        "name": "caption",
        "xtype": "textfield",
        "fieldLabel": CQ.I18n.getMessage("Caption"),
        "value": (this.table && this.table.caption ? this.table.caption.textContent : "")
    });
  6. Open the following file:

        /apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js.

  7. Add the following code at the end of the the transferConfigToTable method:

    /**
     * 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. Save your changes using Save All … 

Примечание.

A plain text field is not the only type of input allowed for the value of the caption element. Any ExtJS widget, that provides the caption’s value through its getValue() method, could be used.

To add editing capabilities for further additional elements and attributes, ensure that both:

  • The itemId property for each corresponding field is set to the name of the appropriate DOM attribute (TablePropertiesDialog).
  • The attribute is set and/or removed on the DOM element explicitly (Table).

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет