Configuración de RTE para la producción de sitios accesibles

AEM admite ambos:

• funciones de accesibilidad estándar, incluido texto alternativo para imágenes
• así como funciones adicionales a las que se puede acceder al crear contenido con componentes que utilizan el editor de texto enriquecido (RTE)

Los autores de contenido pueden utilizar funciones de RTE para proporcionar información de accesibilidad al añadir contenido a una página. Esto puede incluir agregar información estructural a través de encabezados y elementos de párrafo.

Puede configurar y personalizar estas características configurando los complementos RTE para el componente. Por ejemplo, el complemento paraformat 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á de los H1, H2 y H3 básicos proporcionados de manera predeterminada.

El RTE está disponible en una variedad de componentes, tanto de la IU táctil como de la clásica. Sin embargo, el componente principal para utilizar RTE es el componente Texto.

El componente Texto de AEM está disponible tanto para las IU táctiles como para las clásicas. Las siguientes imágenes muestran el editor de texto enriquecido con un rango de complementos habilitados, incluido paraformat:

• El componente Texto en la IU táctil:

  

• El componente Texto en la IU clásica:

  

Configuración de las características del complemento

Encontrará instrucciones completas sobre cómo configurar el editor de texto enriquecido en la página Configuración del editor de texto enriquecido. Esto abarca todos los problemas, incluidos los pasos clave:

• Complementos y sus funciones
• Ubicaciones de configuración
• Activar un complemento y Configurar la propiedad de funciones
• Configuración de otra funcionalidad del RTE

Al configurar un complemento dentro de la subrama rtePlugins apropiada en el CRXDE Lite (consulte la siguiente imagen), puede activar todas las características o específicas de ese complemento.

Ejemplo: Especificación de 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 navegue a la ubicación de configuración.

2. Habilite el campo de selección Párrafos; al activar el complemento.

3. Especifique los formatos que desea que estén disponibles en el campo de selección Párrafos.

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

   • Con el icono de párrafo (pilcrow) en la IU táctil:

   

   • Uso del campo Formato (selector desplegable) en la IU clásica.

Con los elementos estructurales disponibles en RTE mediante las opciones de formato de párrafo, AEM ofrece 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 o a 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 seleccionados en la opción Estilos. Esto garantiza la limpieza de las opciones de marcado buenas 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 HTML creado mediante RTE. Por ejemplo, un fragmento de contenido creado dentro del editor de texto enriquecido puede requerir un marcado adicional para garantizar el cumplimiento de WCAG 2.0. Esto se puede hacer con la opción de edición de origen de RTE. Puede especificar la función sourceedit en el complemento misctools.

Añadir compatibilidad con elementos y atributos HTML adicionales

Para ampliar aún más las características de accesibilidad de AEM, es posible ampliar los componentes existentes basados en el RTE (como los componentes Text y Table) con elementos y atributos adicionales.

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

Ejemplo: Añadir el rótulo al cuadro de diálogo Propiedades de tabla

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

En Tabla debe establecer o quitar explícitamente el atributo del elemento DOM. El valor se pasa por el cuadro de diálogo en el objeto config. Tenga en cuenta que los atributos DOM deben configurarse o eliminarse utilizando los métodos CQ.form.rte.Common correspondientes ( com es un método abreviado para CQ.form.rte.Common) a fin de evitar obstáculos comunes con las implementaciones del explorador.

Instrucciones paso a paso

1. Inicio 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 deba crear carpetas intermedias si 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 con doble-clic):

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

5. En el método constructor, antes de la lectura de la 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. Añada el siguiente código al final del método 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. Guarde los cambios con Guardar todo

Recursos de Business.Adobe.com

Automated Onboarding Targeted Content Dynamic Media Dynamic Forms Digital Rights Management Digital Signage