Rich Text Editor, BODY: el correo en el que han copiado el cKEditor sin más.

Hoy no os traigo un caso de un design system, ni de una auditoría en producción, ni de un Storybook con ideas revolucionarias. Hoy viene algo mucho más doméstico y bueno, de envíos a casa va la cosa. Un correo electrónico. Uno de esos de “utilice este código para verificar su cuenta”. Lo de toda la vida. Pides el código, te llega, lo copias, lo pegas y a otra cosa mariposa. ¿Qué puede salir mal en un correo con un número de seis cifras? Agárrate los pantalones, que se viene curva.

El correo, en teoría, dice esto:

Utilice este código de acceso, 744768 para verificar el correo electrónico de su cuenta de On Demand Delivery. El código expirará en 15 minutos. (no lo uséis que ya lo he verificado) ;)

Quince minutos. Apuntaos ese dato, que al final vuelve.

Ahora, esto es lo que llegó a mi bandeja de entrada (os lo recorto, que el original es peor que los petardos en la verbena de Sant Joan):

<div aria-describedby="cke_123"
     title="Rich Text Editor, BODY"
     aria-label="Rich Text Editor, BODY"
     role="textbox"
     id="m_-2304999226856719163BODY">
  Utilice este código de acceso <strong>744768</strong> para verificar
  el correo electrónico de su cuenta de On Demand Delivery. El código
  expirará en 15 minutos.
</div>

¿Veis el percal? Cada bloque del correo —el saludo, el cuerpo, la firma, hasta el pie— viene envuelto en su propio <div> con un role="textbox", un aria-label que reza “Rich Text Editor, LO-QUE-SEA”, un title clavadito al aria-label y, de propina, un aria-describedby="cke_123". A saber lo ke era, digo que… eso digo yo… Algo de CKEditor, me suena me suena, de haber trabajado con un cliente que lo usaba… No, no era DHL. era gente más guay.

Eso es. Ese cke_ del principio es la pista que lo resuelve todo. Es CKEditor. El notas que ha montao esta plantilla la ha metido en un editor de texto enriquecido, le ha dao al guardar y, en vez de pillar el HTML limpio que te saca el editor, ha metido el DOM del propio editor porque patata y venga, copypaste al correo en toda regla. Es decir: al lector de pantalla no le llega un correo. Llega una captura del editor pero con ARIA labels mal puestos.

Vamos a desgranar por qué esto es una bomba. Cuando le pones role="textbox" a un div, le estás diciendo al lector de pantalla “esto es un campo de edición, un control de formulario, aquí se escribe”. Es un div con texto dentro, pero tú lo has disfrazado de input. Bueno, en verdad no está disfrazado, pero al copiarlo del editor, es lo que recibe el usuario. un falso editor.

¿Y qué hace un lector de pantalla cuando se topa con un campo de formulario? Anuncia su nombre accesible. ¿Y de dónde sale ese nombre? Pues el aria-label gana por goleada. Así que el nombre de este campo es, literalmente, “Rich Text Editor, BODY”. El contenido —el código 744768, los quince minutos, todo— pasa a ser el valor del campo, no su nombre. Y en modo navegación el lector colapsa el campo entero a su etiqueta y sigue su camino. El contenido se evapora.

El title repite la misma cantinela por si quedaba alguna duda. Y el aria-describedby="cke_123" apunta a un elemento con id="cke_123" que… no existe. Vivía dentro del editor, no dentro del correo. Una referencia colgando en el vacío, el wave creo que le llama orphaned ARIA attribute.

¿El resultado? Esto es, palabra por palabra, lo único que mi lector de pantalla llegó a leer:

Rich Text Editor, MAIN_HEADING

Rich Text Editor, GREETING

Rich Text Editor, BODY

Rich Text Editor, SIGNATURE_LINE1

Rich Text Editor, SIGNATURE_LINE2

Rich Text Editor, FOOTER_TEXT

2026 © DHL International GmbH. All rights reserved.

Fijaos en el detalle más fino de todos: la única línea que sobrevive entera y legible es el copyright. ¿Por qué? Porque es el único trozo que no sale de la plantilla del editor. Al menos sabemos dónde denunciar.

Y aquí está el quid de la cuestión. Tenemos un correo de verificación, que tengo que usar para entrar en la web, con un código que caduca en quince minutos y bueno, yo porque me las doy un poco de poweruser y el navegador de objetos de NVDA me salvó la vida, que si no, no habría podido leer el correo sin un OCR o sin una IA para describir las fotos. Si es que al final la IA sirve para algo.

Ahora ponte en la piel de una persona mayor o que no sabe mucho, ya me dirás qué hace.

¿Cómo se arregla esto? #

Lo más gracioso es que no hay que arreglar nada raro. Es un puto correo. No necesita ni un solo role, ni un solo atributo ARIA. Necesita HTML semántico de toda la vida. Cosa que el CKEditor ya hubiese sacao si hubiesen hecho las cosas como toca.

<p>Utilice este código de acceso <strong>744768</strong> para verificar el
   correo electrónico de su cuenta de On Demand Delivery. El código expirará
   en 15 minutos.</p>

Si montas tus plantillas en un editor visual, exporta el HTML limpio (la salida, el “source”, como lo llame tu editor), no seas tan vago (o vaga) de meter el HTML del editor sin más. Que no cuesta tanto.

Conclusión sobre este caso #

Un correo es lo más fácil del mundo de hacer accesible: es texto. Hay que esforzarse muchísimo para romperlo, y aun así aquí estamos. No copies y pegues el DOM de tu editor. Comprueba lo que mandas con un lector de pantalla o, como mínimo, busca “Rich Text Editor” en el HTML antes de darle a enviar. Y si eres de DHL y estás leyendo esto: sigo sin poder verificar mi cuenta. No, es broma.