Accesibilidad de los cuadros de diálogo

Asigna a los cuadros de diálogo del editor los nombres y roles que necesita un lector de pantalla. Sin esta función, algunos se anuncian como menús y sus campos de texto no tienen nombre ("edit, blank"); con ella, Insert Link es un cuadro de diálogo llamado "Insert Link" y sus campos se anuncian como "URL" y "Text". Está activada de forma predeterminada y no produce cambios visibles.

Cómo activarlo

Esta función la ofrece el plugin dialoga11y.js (también incluido en plugins/all_plugins.js). Basta con cargarlo: dialogA11y tiene como valor predeterminado true. No hay ningún botón.

<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<div id="editor"><p>Select some text and press Ctrl+K to open the link dialog.</p></div>
<script>
var editor = new RichTextEditor("#editor", { toolbar: "full" });   // dialogA11y: false turns it off
</script>

Opciones

Opción	Valor predeterminado	Función
dialogA11y	true	false desactiva el plugin.

editor.applyDialogAccessibility() lo ejecuta una vez en todas las ventanas emergentes de la página, por ejemplo, después de que tu código añada campos a una que esté abierta.

Función

El plugin observa la página para detectar las ventanas emergentes del editor (rte-dropdown-panel, rte-dialog-float y .rte-panel-general). En cada una que tenga una barra de título (rte-dialog-header):

• Rol. Una ventana con título y campos de texto recibe role="dialog" en lugar del role="menu" que le asigna el núcleo, porque un menú no puede contener campos de texto. Una ventana con título que solo enumera comandos se conserva como menú. Un cuadro de diálogo no conserva el aria-orientation.
• Nombre. Si el cuadro de diálogo aún no tiene nombre, recibe un aria-label a partir del título, sin el atajo final, como "(Ctrl+K)".
• Etiquetas de los campos. Cada campo sin nombre recibe un aria-label, obtenido primero de la etiqueta visible que tiene al lado, para que el nombre pronunciado coincida con lo que aparece en pantalla. Los campos sin etiqueta visible se nombran a partir de su contenedor (rte-dialog-line-ALT se convierte en "Alternative text", rte-dialog-line-WIDTH en "Width", etc.), después del marcador de posición, del texto cercano y, finalmente, del nombre del cuadro de diálogo.

Las ventanas sin barra de título, como los selectores de color y fuente, no se modifican. La única excepción es un menú sin título que contenga un cuadro de texto visible, que pasa a tener role="dialog".

Los cuadros de diálogo dentro de un marco rte-dialog-outer , como Insert Image, Insert Emoji y el editor de imágenes (creados con editor.createDialog()), no se modifican: el núcleo ya les asigna role="dialog", un aria-label y aria-modal="true".

El árbol de accesibilidad de los cuadros de diálogo comprobados, según lo informa Playwright, con el plugin desactivado y activado:

Cuadro de diálogo	dialogA11y: false	Valor predeterminado
Insert Link (botón de la barra de herramientas)	role="menu", campos textbox, textbox	role="dialog", campos textbox "URL", textbox "Text"
Insert Link (Ctrl+K)	dialog "Insert Link", campos textbox, textbox	dialog "Insert Link", campos textbox "URL", textbox "Text"
Find and Replace	dialog "Find and Replace", campos textbox, textbox	dialog "Find and Replace", campos textbox "Find", textbox "Replace"

El marcado resultante del cuadro de diálogo Insert Link de la barra de herramientas (sin estilos ni iconos):

<rte-dropdown-panel role="dialog" aria-label="Insert Link" class="rte-panel-general rte-panel-insertlink">
  <rte-dialog-header><rte-dialog-header-text>Insert Link</rte-dialog-header-text></rte-dialog-header>
  …
  <rte-dialog-line-url …><rte-dialog-input-label>URL</rte-dialog-input-label><input type="text" aria-label="URL">…</rte-dialog-line-url>
  <rte-dialog-line-text …><rte-dialog-input-label>Text</rte-dialog-input-label><input type="text" aria-label="Text"></rte-dialog-line-text>
  …
</rte-dropdown-panel>

Lo que no hace

El foco lo gestiona el núcleo del editor, no este plugin. Lo comprobamos en el cuadro de diálogo Insert Link con el plugin desactivado y activado, con el mismo resultado:

• El foco comienza en el campo URL (tanto al abrirlo con el ratón como con Ctrl+K).
• Tab y Shift+Tab recorren URL, Text, Open in new tab, Cancel e Insert sin salir del cuadro de diálogo.
• Escape cierra el cuadro de diálogo y devuelve el foco al botón Insert Link de la barra de herramientas.

El plugin tampoco establece aria-modal. El núcleo establece aria-modal="true" en los cuadros de diálogo Insert Image, Insert Emoji y del editor de imágenes, y aria-modal="false" en Find and Replace, que permite seguir trabajando en el documento; el panel Insert Link de la barra de herramientas no tiene aria-modal.

Aspectos a tener en cuenta

• No se añade nada al HTML del documento; los atributos pertenecen a los cuadros de diálogo del propio editor.
• Los nombres se toman del título y las etiquetas visibles del cuadro de diálogo, por lo que, con un paquete de idioma, están en ese idioma. Los nombres de respaldo ("Alternative text", "Width"…) están en inglés.
• En 2.6.12, abrir Insert Link pulsando Enter o Space sobre el botón de la barra de herramientas coloca el foco en Cancel en vez de en el campo URL; Ctrl+K y un clic con el ratón comienzan en el campo URL.

Relacionado: Declaración de accesibilidad, Comprobador de accesibilidad, createDialog.