Tutorial WordPress: Personalizar bullets de listas con emojis accesibles via CSS

Introducción

Este tutorial explica, con todo lujo de detalles, cómo personalizar los bullets de las listas en WordPress usando emojis accesibles vía CSS. Incluye varias técnicas (moderna y fallback), cómo garantizar que las listas sigan siendo accesibles para lectores de pantalla, dónde colocar el código en WordPress y recomendaciones prácticas para mantener buen diseño y compatibilidad.

Por qué prestar atención a la accesibilidad

Agregar emojis como viñetas mejora la apariencia, pero no todos los lectores de pantalla reconocen los emojis insertados sólo mediante CSS (pseudo-elementos). Para que la información que aporta el símbolo sea accesible, hay que proporcionar una alternativa textual que los lectores de pantalla puedan anunciar. En este tutorial veremos patrones que separan la presentación visual (emoji) de la semántica (texto accesible) para cumplir WCAG y buenas prácticas de usabilidad.

Patrones que vamos a usar

Modern approach: ::marker (cuando el navegador lo soporte) para estilizar el marcador nativo.
Fallback: list-style: none ::before para navegadores más antiguos.
Accesibilidad: elemento con texto visible solo para lectores de pantalla (.sr-only) dentro de cada ltligt para proporcionar la etiqueta semántica que el pseudo-elemento visual no entrega.

Clase visually hidden (sr-only)

Primero definimos la clase que ocultará texto visualmente pero lo mantendrá accesible para lectores de pantalla. Este bloque CSS es obligatorio para las implementaciones accesibles que siguen los ejemplos.

/ .sr-only: ocultar visualmente pero mantener para AT (screen readers) /
.sr-only {
  position: absolute !important
  width: 1px !important
  height: 1px !important
  padding: 0 !important
  margin: -1px !important
  overflow: hidden !important
  clip: rect(0 0 0 0) !important
  white-space: nowrap !important
  border: 0 !important
}

Enfoque 1 — Usar ::marker (recomendado en navegadores modernos)

El pseudo-elemento ::marker permite estilizar el marcador nativo de lista de forma más natural. Sin embargo, la inserción de contenido con ::marker puede no ser anunciada por todos los lectores de pantalla, por lo que combinamos ::marker (visual) con un texto sr-only dentro de cada ltligt (semántica para AT).

Ejemplo de HTML (colócalo en tu editor de entradas o en un bloque HTML):


  Advertencia: Elemento con aviso visual de advertencia.
  Información: Elemento informativo.
  Éxito: Elemento que indica éxito.

CSS para ::marker (ajústalo a tu tema):

.emoji-list-marker {
  / permitimos el marcador, ajustamos el espacio de la lista /
  padding-left: 1.6rem      / espacio para el contenido y el emoji /
  margin: 0 0 1rem 0
}

.emoji-list-marker li {
  margin: .25rem 0
  line-height: 1.4
}

/ ::marker para cambiar el marcador nativo por un emoji /
.emoji-list-marker li::marker {
  font-size: 1.25rem        / escala del emoji /
  vertical-align: middle
  color: inherit            / dejar que el color del texto gestione el tema /
  / Usar content con emoji. Ej.: alerta /
  content: ⚠️ 
}

/ puedes usar selectores más concretos según el orden /
.emoji-list-marker li:nth-child(2)::marker { content: ℹ️  }
.emoji-list-marker li:nth-child(3)::marker { content: ✅  }

Notas:

Pro: mantiene semántica de lista y suele alinear bien en navegadores modernos.
Contra: algunos lectores de pantalla no anuncian contenido añadido sólo mediante pseudo-elementos por eso incluimos el ltspan class=sr-onlygt con la etiqueta textual.

Enfoque 2 — Fallback con list-style: none y ::before

Para compatibilidad máxima, ocultamos el marcador nativo y añadimos el emoji mediante ::before. De nuevo usamos .sr-only dentro de cada ltligt para accesibilidad.

HTML (misma estructura que antes):


  Advertencia: Elemento con aviso visual de advertencia.
  Información: Elemento informativo.
  Éxito: Elemento que indica éxito.

CSS para ::before:

.emoji-list-before {
  list-style: none          / ocultar el marcador nativo /
  padding-left: 0
  margin: 0 0 1rem 0
}

.emoji-list-before li {
  position: relative        / necesario para colocar ::before /
  padding-left: 1.9rem      / espacio para el emoji visible /
  margin: .25rem 0
  line-height: 1.4
}

/ Añadir emoji con ::before (esto es lo visual) /
.emoji-list-before li::before {
  content: ⚠️             / emoji visual /
  position: absolute
  left: 0
  top: 0
  font-size: 1.25rem
  line-height: 1
  display: inline-block
  transform: translateY(0.1rem) / ajuste fino vertical /
}

/ variantes por elemento (ejecutar según el orden o clase adicional) /
.emoji-list-before li:nth-child(2)::before { content: ℹ️ }
.emoji-list-before li:nth-child(3)::before { content: ✅ }

Notas:

Pro: funciona prácticamente en todos los navegadores (incluso antiguos).
Contra: hay que gestionar manualmente el espaciado y alineación.

Accesibilidad: cómo aseguramos que los screen readers reciban la información

Patrón recomendado: cada ltligt debe incluir al principio un texto que describa el tipo de viñeta, envuelto con la clase .sr-only. Este texto será leído por lectores de pantalla y permanecerá invisible para los usuarios visuales, mientras que el emoji añadido por CSS proporciona la señal visual.

Ejemplo completo (HTML) para copiar y pegar:


  Advertencia: Revisa la configuración de seguridad.
  Información: Se han añadido nuevas funciones.
  Éxito: La operación se completó correctamente.

Si quieres incluir la etiqueta semántica en cada ítem sin repetir manualmente, en WordPress puedes generarla dinámicamente en PHP al imprimir la lista (ver sección de WordPress abajo).

Dónde colocar este CSS en WordPress

Tienes varias opciones seguras para añadir el CSS al sitio:

Personalizar → CSS adicional: pegando directamente tu CSS (rápido y seguro).
En el style.css de un child theme (recomendado para cambios persistentes y organizados).
Enqueue de un archivo CSS desde functions.php si prefieres mantenerlo en un archivo separado.

Ejemplo de cómo encolar un archivo CSS en functions.php (child theme o plugin):

/ functions.php (child theme) /
function mytheme_enqueue_emoji_list_styles() {
  wp_enqueue_style(
    my-emoji-list,
    get_stylesheet_directory_uri() . /css/emoji-list.css,
    array(),
    1.0.0
  )
}
add_action(wp_enqueue_scripts, mytheme_enqueue_emoji_list_styles)

Compatibilidad de navegadores

Resumen rápido:

Característica	Soporte típico	Consejo
::marker	Chrome, Edge, Firefox, Safari (versiones recientes)	Usa ::marker como primera opción y añade fallback con ::before si necesitas compatibilidad amplia.
::before con list-style: none	Amplio soporte (móviles incluidos)	Es la técnica de soporte máximo.
Emoji en CSS (content)	Soportado en pseudo-elementos presentación depende de la plataforma	Comprueba apariencia en macOS/iOS/Android/Windows tamaños y coloración varían.

Pruebas recomendadas

Probar con lectores de pantalla populares (NVDA, VoiceOver, TalkBack) para confirmar que la información textual se anuncia correctamente.
Comprobar contraste y legibilidad cuando los emojis funcionan como indicadores (asegúrate de que el color del texto principal y el fondo cumplen contraste).
Probar en móvil: en sistemas móviles los emojis pueden variar mucho en aspecto (Apple vs Google vs Microsoft).

Opciones y variaciones avanzadas

Si necesitas distintos emojis por item de forma más semántica, añade clases a cada ltligt (por ejemplo .is-warning, .is-info) y usa reglas CSS por clase en lugar de nth-child.
Si necesitas que el emoji sea accesible como imagen con texto alternativo, considera usar un elemento inline con aria-hidden=true para la parte visual y un ltspan class=sr-onlygt con la etiqueta para AT. Ejemplo: ltligtltspan class=emoji aria-hidden=truegt⚠️lt/spangtltspan class=sr-onlygtAdvertencia:lt/spangt Texto…lt/ligt.
Para control total (colores, tamaños y trazado), puedes reemplazar el emoji por un SVG inline. Asegúrate de proporcionar role=img y aria-label o texto sr-only correspondiente.
Usa unidades rem para que las viñetas escalen con la tipografía del sitio.

Checklist rápida antes de publicar

¿Cada ltligt tiene texto semántico para lectores de pantalla (sr-only)?
¿Los emojis o iconos visuales tienen aria-hidden si no deben ser anunciados?
¿Has probado con al menos un lector de pantalla en escritorio y en móvil?
¿La solución se ve bien en varios sistemas operativos (iOS, Android, Windows, macOS)?
¿Has añadido CSS en una ubicación persistente (child theme o enqueued file) para futuras actualizaciones?

Ejemplo final combinado (lista con clases por tipo)

HTML:


  Advertencia: Revisa la configuración de seguridad.
  Información: Se han añadido nuevas funciones.
  Éxito: La operación se completó correctamente.

CSS:

/ css base (ver arriba para .sr-only) /
.emoji-list-before { list-style: none padding-left: 0 margin: 0 }
.emoji-list-before li { position: relative padding-left: 1.9rem margin: .25rem 0 }

/ iconos por clase /
.emoji-list-before li::before { position: absolute left: 0 top: 0 font-size: 1.25rem line-height: 1 transform: translateY(0.1rem) }
.emoji-list-before li.is-warning::before { content: ⚠️ }
.emoji-list-before li.is-info::before    { content: ℹ️ }
.emoji-list-before li.is-success::before { content: ✅ }

/ ajustes responsivos /
@media (max-width: 480px) {
  .emoji-list-before li::before { font-size: 1.05rem transform: translateY(0.12rem) }
}

Conclusión

Personalizar bullets con emojis mejora la estética y la comunicación visual de tus listas en WordPress. Para que esa mejora sea accesible, separa la presentación (emoji con ::marker o ::before) de la semántica (texto para lectores de pantalla mediante .sr-only). Usa ::marker cuando sea posible por limpieza, pero implementa fallback con ::before para compatibilidad. Añade el CSS en tu child theme o mediante un archivo encolado, prueba en varios navegadores y lectores de pantalla, y adapta tamaños con rem para mantener coherencia y escalado.

SushiHost