Configuring RTE for Producing Accessible Sites
- Topics:
- Administering
CREATED FOR:
- Admin
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)
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-enabled 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-enabled 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-enabled UI:
-
The Text component in the classic UI:
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.
Example - Specifying Paragraph Formats Available in RTE Selection Field
New semantic block formats may be made available for selection by:
-
Depending on your RTE, determine and navigate to the configuration location.
-
Enable the Paragraphs selection field; by activating the plugin.
-
Specify the formats you want to have available in the Paragraphs selection field.
-
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-enabled UI:
- 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.
sourceedit
feature carefully. Typing errors and/or unsupported features can introduce more 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.
Step by Step Instructions
-
Start CRXDE Lite. For example: http://localhost:4502/crx/de/
-
Copy:
/libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
to:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
NOTE
You may need to create intermediate folders if they do not already exist. -
Copy:
/libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
to:
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
. -
Open the following file for editing (open with double-click):
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
-
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 : "") });
-
Open the following file:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
. -
Add the following code at the end of 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); }
-
Save your changes using Save All
getValue()
method, could be used.- 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
).
Experience Manager
- Administering User Guide overview
- Sites Features
- Website Administration
- Reusing Content: Multi Site Manager and Live Copy
- Live Copy Overview Console
- Configuring Live Copy Synchronization
- Creating and Synchronizing Live Copies
- MSM Rollout Conflicts
- MSM Best Practices
- Translating Content for Multilingual Sites
- Managing Translation Projects
- Identifying Content to Translate
- Preparing Content for Translation
- Creating a Language Root Using the Classic UI
- Connecting to Microsoft Translator
- Configuring the Translation Integration Framework
- Language Copy Wizard
- Translation Enhancements
- Translation Best Practices
- Configurations and the Configuration Browser
- AEM FAQs
- Operations
- Dashboards
- Operations Dashboard
- Backup and Restore
- Data Store Garbage Collection
- Monitoring Server Resources Using the JMX Console
- Working with Logs
- Configure the Rich Text Editor
- Configure the Video component
- The Bulk Editor
- Configuring Email Notification
- Configuring RTE for Producing Accessible Sites
- The Link Checker
- Troubleshooting AEM
- Audit Log Maintenance in AEM 6
- Editor
- Managing Access to Workflows
- Using cURL with AEM
- Configuring Undo for Page Editing
- Proxy Server Tool (proxy.jar)
- Configuring for AEM Apps
- Administering Workflows
- Configuring Search Forms
- Tools Consoles
- Reporting
- Administering Workflow Instances
- Configuring Layout Container and Layout Mode
- Enabling Access to Classic UI
- Starting Workflows
- Configure the Rich Text Editor plug-ins
- Admin Consoles
- Security
- User Administration and Security
- User, Group and Access Rights Administration
- Security Checklist
- OWASP Top 10
- Running AEM in Production Ready Mode
- Identity Management
- Adobe IMS Authentication and Admin Console Support for AEM Managed Services
- Creating a Closed User Group
- Mitigating serialization issues in AEM
- User Synchronization
- Encapsulated Token Support
- Single Sign On
- How to Audit User Management Operations in AEM
- SSL By Default
- SAML 2.0 Authentication Handler
- Closed User Groups in AEM
- Granite Operations - User and Group Administration
- Enabling CRXDE Lite in AEM
- Configuring LDAP with AEM 6
- Configure the Admin Password on Installation
- Service Users in AEM
- Encryption Support for Configuration Properties
- Handling GDPR Requests for the AEM Foundation
- Content Disposition Filter
- Personalization
- eCommerce
- Integration
- Integrating with Third-Party Services
- Integrating with Salesforce
- Integrating with Adobe Target
- Integrating with Adobe Analytics
- Connecting to Adobe Analytics and Creating Frameworks
- Configuring Link Tracking for Adobe Analytics
- Mapping Component Data with Adobe Analytics Properties
- Configuring Video Tracking for Adobe Analytics
- HTTP2 Delivery of Content FAQ
- Troubleshooting your Adobe Campaign Integration
- SharePoint Connector Licenses, Copyright Notices, and Disclaimers
- SharePoint Connector
- DHTML Viewer End-of-Life FAQs
- Integrating with Adobe Campaign Classic
- Related Community Articles
- Integrating with Adobe Campaign Standard
- Flash Viewers End-of-Life Notice
- Integrating with Adobe Creative Cloud
- Integrating with Adobe Dynamic Tag Management
- Opting Into Adobe Analytics and Adobe Target
- AEM Portals and Portlets
- Integrating with Dynamic Media Classic
- Troubleshooting Integration Issues
- Integrating with BrightEdge Content Optimizer
- Best Practices for Email Templates
- Catalog Producer
- Integrating with Silverpop Engage
- Integrating with Adobe Campaign
- Integrating with ExactTarget
- Analytics with External Providers
- Integrating with the Adobe Marketing Cloud
- Manually Configuring the Integration with Adobe Target
- Prerequisites for Integrating with Adobe Target
- Adobe Classifications
- Solutions Integration
- Target Integration with Experience Fragments
- Best Practices
- Content Management