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.
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:
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.
Los nuevos formatos de bloque semántico pueden estar disponibles para su selección mediante:
Según el RTE, determine y vaya a ubicación de configuración.
Habilitar el campo de selección Párrafos; por activación del complemento.
Especifique los formatos que desea tener disponibles en el campo Selección de párrafos.
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:
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, mejores opciones para los usuarios que exploran con sus propias hojas de estilo y contenido correctamente estructurado.
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.
Utilice el sourceedit
presentar cuidadosamente. Escribir errores y/o funciones no admitidas puede presentar más problemas.
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:
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.
Este procedimiento solo es adecuado para la interfaz de usuario clásica.
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>
Iniciar CRXDE Lite. Por ejemplo: http://localhost:4502/crx/de/
Copiar:
/libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
hasta:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
Es posible que tenga que crear carpetas intermedias si aún no existen.
Copiar:
/libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
hasta:
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
.
Abra el siguiente archivo para editarlo (ábralo haciendo doble clic):
/apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js
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 : "")
});
Abra el siguiente archivo:
/apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js
.
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);
}
Guarde los cambios mediante Guardar todo…
Un campo de texto sin formato no es el único tipo de entrada permitido para el valor del elemento caption. Puede utilizar cualquier widget de ExtJS que proporcione el valor del pie de ilustración a través de su getValue()
método.
Para añadir funciones de edición para elementos y atributos adicionales, asegúrese de que ambos:
itemId
para cada campo correspondiente se establece en el nombre del atributo DOM correspondiente (TablePropertiesDialog
).Table
).