Uso semántico de las etiquetas <del> y <s>: Cómo escribir una etiqueta de precio accesible para e-commerces
Cuándo usar las etiquetas HTML <del> y <s>
| Característica comparativa | Elemento <del> | Elemento <s> |
|---|---|---|
| Definición semántica | Representa un texto que ha sido eliminado de un documento. | Representa contenido que ya no es preciso, correcto o relevante. |
| Caso de uso | Ediciones de documentos, control de cambios o revisiones visuales/estructurales (a menudo emparejado con <ins>). | Información desactualizada, avisos de obsolescencia, precios antiguos o artículos agotados. |
| Código accesible | Bloque de código | Bloque de código |
| Representación visual | La reunión es el fecha anterior: | Precio original: |
| Atributos únicos | cite (URL que apunta a la explicación de la eliminación) datetime (fecha/hora de la eliminación) | Ninguno |
| Estilos predeterminados del navegador | Se renderiza con un tachado visual (line-through) | Se renderiza con un tachado visual (line-through) |
Mapeo ARIA implícito: role="deletion" and role="insertion"
Las etiquetas <del> y <s> se asignan al rol de accesibilidad deletion (y <ins> a insertion). Los usuarios visuales perciben estos elementos tachados o subrayados, pero el soporte de los lectores de pantalla para anunciar estos cambios es inconsistente.
Comprensión del mapeo del árbol de accesibilidad
Bajo las especificaciones de W3C Accessibility API Mappings, estas etiquetas se asignan mediante programación a roles de accesibilidad específicos que los navegadores exponen al árbol de accesibilidad del sistema operativo:
<del>se asigna arole="deletion"(ver Mapeo HTML-AAM<del>y Mapeo de rol deletion Core-AAM).<s>se asigna arole="deletion"(ver Mapeo HTML-AAM<s>y Mapeo de rol deletion Core-AAM).<ins>se asigna arole="insertion"(ver Mapeo HTML-AAM<ins>y Mapeo de rol insertion Core-AAM).
Estos mapeos indican al motor de accesibilidad del navegador cómo exponer la semántica a las tecnologías de asistencia. Sin embargo, el soporte de los lectores de pantalla es inconsistente:
- Anunciado de forma nativa:
- VoiceOver + Safari (iOS)
- NVDA + Firefox
- TalkBack + Chrome
- No anunciado:
- NVDA + Chrome
- TalkBack + Firefox
- VoiceOver + Safari (macOS)
Cómo brindamos contexto para combinaciones sin soporte nativo en el árbol de accesibilidad
Para compensar la falta de soporte, debemos agregar un texto oculto visualmente (por ejemplo, usando una clase .sr-only) para proveer más contexto sobre lo que está sucediendo con la información.
Bloque de código
La reunión es el <span class="sr-only">fecha anterior: </span><del>lunes</del> <span class="sr-only">fecha nueva: </span><ins>miércoles</ins>.Al formular el texto oculto como descriptores de contexto naturales (por ejemplo, "fecha anterior:" y "fecha nueva:"), la salida será más coherente y significativa en todas las tecnologías de asistencia.
- En sistemas sin soporte nativo: Anuncia "fecha anterior: lunes, fecha nueva: miércoles". El cambio semántico se comunica por completo a través del contexto descriptivo.
- En sistemas con soporte nativo: Anuncia "fecha anterior: eliminación, lunes, fecha nueva: inserción, miércoles". Se lee como una oración coherente y descriptiva sin repeticiones verbales directas.
Consejos de estilo CSS
Las etiquetas <del>, <s> e <ins> se pueden estilar usando CSS para que coincidan con tu sistema de diseño utilizando las propiedades estándar de decoración de texto de CSS, así como definir una clase de utilidad para ocultar las etiquetas de contexto del lector de pantalla.
Estilado de CSS para <del> y <s>
Para dar estilo a eliminaciones y tachados:
Bloque de código
/* Personalizar individualmente */
s, del {
text-decoration-line: line-through;
text-decoration-color: #e06c75; /* Cambiar color de la línea */
text-decoration-style: wavy; /* double, dashed, wavy, solid */
text-decoration-thickness: 1.5px; /* Cambiar grosor de la línea */
}
/* O usar la sintaxis abreviada */
s, del {
text-decoration: line-through #e06c75 wavy 1.5px;
}Estilado de CSS para <ins>
Para dar estilo a inserciones:
Bloque de código
/* Personalizar individualmente */
ins {
text-decoration-line: underline;
text-decoration-color: #98c379; /* Cambiar color de la línea */
text-decoration-style: wavy; /* double, dashed, wavy, solid */
text-decoration-thickness: 1.5px; /* Cambiar grosor de la línea */
}
/* O usar la sintaxis abreviada */
ins {
text-decoration: underline #98c379 wavy 1.5px;
}Cómo agregar contexto no visual para lectores de pantalla
Para ocultar las etiquetas de contexto descriptivas (como "fecha anterior:") a los usuarios con que navegan de manera visual mientras se mantienen accesibles para las personas usuarias de lectores de pantalla, se implementa una clase CSS estándar:
Bloque de código
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}Recursos y documentación
- Documentación de MDN: Elemento
<del> - Documentación de MDN: Elemento
<ins> - Documentación de MDN: Elemento
<s>
Aclaración sobre la solución de pseudo-elementos de MDN: MDN sugiere utilizar contenido generado por CSS (
::before/::after) para anunciar qué texto fue eliminado y qué texto fue insertado. Sin embargo, opté por otra solución también válida. Según mi pruebas, es mucho más confiable y estable el uso de nodos DOM ocultos visualmente para garantizar un contexto claro.