Con Joomla 6.1, se añadió una mejora pequeña pero poderosa al editor TinyMCE: botones dedicados para insertar, editar y eliminar el elemento HTML <abbr>.

Esta nueva función facilita que los autores marquen correctamente abreviaturas y acrónimos sin tocar el código HTML. Es un pequeño cambio que puede marcar una gran diferencia en cuanto a claridad, accesibilidad y profesionalismo.

¿Qué es el elemento <abbr>?

El elemento HTML <abbr> se utiliza para representar una abreviatura o acrónimo. Permite proporcionar el significado completo de un término abreviado mediante el atributo title.

Por ejemplo:

<abbr title="World Wide Web">WWW</abbr>

En la mayoría de los navegadores, los usuarios pueden pasar el ratón sobre la abreviatura y ver el significado completo en un tooltip. Más importante aún, las tecnologías de asistencia, como los lectores de pantalla, pueden acceder a esa forma expandida, ayudando a los usuarios a comprender mejor su contenido.

Esto es HTML semántico: añade significado, no solo estilo.

Por qué usar <abbr> mejora la accesibilidad

La accesibilidad consiste en hacer que el contenido sea comprensible para todos. Las abreviaturas pueden crear barreras innecesarias si su significado no está claro.

Claridad para todos los lectores

No todo el mundo sabe qué significan "WCAG", "HTML" o "CSS". Proporcionar la expansión garantiza que nadie se quede adivinando.

Mejor compatibilidad con lectores de pantalla

Cuando se marca correctamente, las tecnologías de asistencia pueden anunciar el significado completo en lugar de leer letra por letra.

Mejora de la estructura semántica

El uso de elementos HTML adecuados comunica significado a los navegadores, motores de búsqueda y herramientas de accesibilidad.

En resumen: este pequeño botón ayuda a hacer su contenido más inclusivo.

Cómo usar los nuevos botones de abbr en TinyMCE

Si está utilizando una instalación limpia de Joomla 6.1, entonces los nuevos botones de abbr ya están en su barra de herramientas de TinyMCE. Si ha actualizado a Joomla 6.1, deberá añadirlos en el editor del plugin TinyMCE, ya sea arrastrando los dos nuevos iconos a su barra de herramientas o usando el Preajuste avanzado.

Configuring TinyMCE
Añadir los botones de abbr a su barra de herramientas de TinyMCE

Paso 1: Seleccionar la abreviatura

Abra su artículo en el editor de Joomla y resalte la abreviatura que desea marcar.

selecting the text
Seleccione el texto de la abreviatura que desea marcar

Paso 2: Hacer clic en el botón insertar/editar abreviatura

Haga clic en el nuevo icono de abreviatura en la barra de herramientas de TinyMCE.

Paso 3: Introducir el significado completo

Aparecerá un cuadro de diálogo. Introduzca la expansión completa de la abreviatura en el campo proporcionado.

dialog window
Ventana de diálogo de abreviatura

Paso 4: Revisar el marcado generado (opcional)

Si cambia a la vista de código, verá que TinyMCE ha generado un marcado semántico limpio:

<abbr title="World Wide Web">WWW</abbr>
code view of markup
TinyMCE genera automáticamente el marcado <abbr> adecuado

Y si revisa el artículo en su sitio, verá un estilo básico, el cambio del cursor a un puntero de ayuda y el significado completo de la abreviatura en un popup de Título.

frontend example
Definición de <abbr> tal y como se ve en su sitio

Eliminar una abreviatura

Para eliminar el marcado, seleccione la abreviatura y haga clic en el botón Eliminar abreviatura. El texto permanecerá, pero el marcado semántico se eliminará.

Ejemplos del mundo real

Documentación técnica

El DOM permite que JavaScript interactúe con las páginas web.

Declaraciones de accesibilidad

Nuestro sitio cumple con las WCAG 2.2.

Tecnologías de servidor

Joomla se ejecuta sobre PHP.

Términos web generales

El W3C desarrolla los estándares web.

En cada caso, la abreviatura permanece clara y legible mientras sigue proporcionando contexto adicional.

Buenas prácticas

  • Use <abbr> la primera vez que aparezca una abreviatura en su contenido.
  • Proporcione siempre una expansión significativa en el atributo title.
  • No lo use únicamente para tooltips; debe representar una abreviatura genuina.
  • Mantenga su redacción natural. El marcado mejora la claridad sin añadir desorden.

Reflexiones finales

Los nuevos botones de abreviatura en Joomla 6.1 son un ejemplo perfecto de cómo pequeñas herramientas editoriales pueden tener un impacto significativo.

Fomentan un mejor HTML semántico, mejoran la accesibilidad y ayudan a garantizar que su contenido sea comprensible para la audiencia más amplia posible.

A veces las mejoras de accesibilidad son complejas. Esta está a solo un clic de distancia.

Empiece a usarlo en su próximo artículo y ayude a hacer la web más clara para todos.