Añadir un emoji o ícono bonito a tus listas puede parecer una mejora visual inofensiva… hasta que lo pruebas con un lector de pantalla. ¿Sabías que el contenido de ::marker también se lee en voz alta?
Eso que tú ves como un simple adorno puede convertirse en ruido innecesario para quien navega con tecnología asistiva.
Imagina esto:
summary::marker {
content: "🎵";
}
<summary>Playlist</summary>
A simple vista, todo bien. Pero con un lector de pantalla, se oye: “Nota musical Playlist”. Puede que no sea lo que querías comunicar.
Por suerte, CSS tiene un truco bajo la manga: puedes añadir un segundo valor para controlar lo que se lee (o no) con tecnologías de asistencia.
🎯 Opción 1: Personalizar lo que se lee
summary::marker {
content: "🎵" / "Música";
}
Esto hará que el lector diga “Música Playlist” en lugar de intentar traducir el emoji.
🤐 Opción 2: Que no lea nada
summary::marker {
content: "🎵" / "";
}
En este caso, el lector de pantalla solo leerá “Playlist”, ignorando el emoji. Visualmente no cambia nada, pero la experiencia auditiva es más limpia.
Si tienes macOS, puedes probarlo tú mismo con VoiceOver.
