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.
Paso 1: Seleccionar la abreviatura
Abra su artículo en el editor de Joomla y resalte 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.
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>
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.
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.