Configuración de RTE para crear páginas web y sitios accesibles

Adobe Experience Manager admite muchas funciones de accesibilidad estándar de acuerdo con varios estándares de accesibilidad. Además, los desarrolladores pueden personalizar o ampliar para proporcionar funciones que ayuden a crear contenido accesible mediante componentes de Experience Manager que utilicen el Editor de texto enriquecido (RTE).

Al diseñar páginas web y agregar contenido a las páginas, los desarrolladores y autores de contenido pueden utilizar las funciones de RTE para proporcionar información relacionada con la accesibilidad. Por ejemplo, agregue información estructural mediante encabezados y elementos de párrafo.

Para configurar y personalizar estas funciones, configuración de los complementos RTE para el componente. Por ejemplo, la variable paraformat El complemento permite agregar elementos semánticos de nivel de bloque adicionales, incluida la ampliación del número de niveles de encabezado admitidos más allá del nivel básico H1, H2, y H3 proporcionadas de forma predeterminada.

El RTE está disponible en una variedad de componentes para la interfaz de usuario táctil y la interfaz de usuario clásica. Sin embargo, el componente principal para utilizar el RTE es el Texto que está disponible para ambas interfaces. Las siguientes imágenes muestran el RTE con una serie de complementos activados, incluidos paraformat:

Imagen: componente Texto en la interfaz de usuario táctil.

Imagen: componente Texto de la interfaz de usuario de Campaign Classic.

Para ver las diferencias entre las funciones RTE disponibles en las distintas interfaces, consulte Complementos y sus funciones.

Configuración de las funciones del complemento

Para obtener las instrucciones completas para configurar el RTE, consulte configuración del Editor de texto enriquecido página. Esto cubre todos los problemas, incluidos los pasos clave:

• Complementos y funciones.
• Ubicaciones de configuración.
• Activar un complemento y configurar la propiedad features.
• Configuración de otras funcionalidades de RTE.

Mediante la configuración de un complemento dentro del rtePlugins en CRXDE Lite, puede activar todas las funciones o las específicas para ese complemento.

Ejemplo: especificar formatos de párrafo disponibles en el campo de selección RTE

Los nuevos formatos de bloque semántico pueden estar disponibles para su selección mediante:

1. Según el RTE, determine y vaya a ubicación de configuración.

2. Habilitar el campo de selección Párrafos; por activación del complemento.

3. Especifique los formatos que desea tener disponibles en el campo Selección de párrafos.

4. Los formatos de párrafo están disponibles para el autor de contenido desde los campos de selección en RTE. Se puede acceder a ellas:

   • Uso del icono de fila de párrafo en la IU táctil.
   • Uso del Formato (selector emergente) en la IU clásica.

AEM Con los elementos estructurales disponibles en RTE a través de las opciones de formato de párrafo, el formato de párrafo proporciona una buena base para el desarrollo de contenido accesible. Los autores de contenido no pueden utilizar RTE para dar formato al tamaño de fuente, los colores u otros atributos relacionados, lo que impide la creación de formato en línea. En su lugar, deben seleccionar los elementos estructurales adecuados, como encabezados y utilizar estilos globales elegidos desde la opción Estilos. Esto garantiza un marcado limpio, buenas opciones para los usuarios que exploran con sus propias hojas de estilo y contenido correctamente estructurado.

Uso de la función de edición de origen

En algunos casos, los autores de contenido encontrarán necesario examinar y ajustar el código fuente del HTML creado con RTE. Por ejemplo, un fragmento de contenido creado dentro de RTE puede requerir un marcado adicional para garantizar el cumplimiento de WCAG 2.0. Esto se puede hacer con la variable edición de origen de RTE. Puede especificar la variable sourceedit función en la misctools plugin.

Agregar compatibilidad para más elementos y atributos del HTML

AEM Para ampliar aún más las funciones de accesibilidad de los recursos, es posible ampliar los componentes existentes en función del RTE (como el Texto y Tabla componentes) con elementos y atributos adicionales.

El siguiente procedimiento ilustra cómo extender el Tabla componente con un Rótulo que proporciona información sobre una tabla de datos a los usuarios de tecnología de asistencia:

Ejemplo: añadir el pie de ilustración al cuadro de diálogo Propiedades de la tabla

En el constructor de TablePropertiesDialog, agregue un campo de entrada de texto adicional que se utilice para editar el pie de ilustración. Tenga en cuenta que itemId se debe establecer en caption (es decir, el nombre del atributo DOM) para gestionar automáticamente su contenido.

Entrada Tabla, establezca explícitamente o quite el atributo en el elemento DOM. El valor lo pasa el cuadro de diálogo en config objeto. Tenga en cuenta que los atributos DOM deben configurarse/eliminarse utilizando el CQ.form.rte.Common métodos ( com es un método abreviado para CQ.form.rte.Common) para evitar problemas comunes con las implementaciones de exploradores.

Ejemplo: Crear un HTML accesible al utilizar énfasis en el texto

RTE puede utilizar strong y em etiquetas en lugar de b y i. Agregue el siguiente nodo como elemento secundario al uiSettings y rtePlugins nodos en el cuadro de diálogo.

<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>

Instrucciones paso a paso

1. Iniciar CRXDE Lite. Por ejemplo: http://localhost:4502/crx/de/

2. Copiar:

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

   hasta:

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

   NOTA

   Es posible que tenga que crear carpetas intermedias si aún no existen.

3. Copiar:

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

   hasta:

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

4. Abra el siguiente archivo para editarlo (ábralo haciendo doble clic):

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

5. En el constructor método, antes de la lectura de línea:

   var dialogRef = this;
   

   Añada el siguiente código:

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

6. Abra el siguiente archivo:

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

7. Agregue el siguiente código al final del transferConfigToTable método:

   /**
    * 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. Guarde los cambios mediante Guardar todo…

Recursos de Business.Adobe.com

Personalized Communications Managed Cloud Headless Cms Digital Asset Management Digital Signage Content Management System