Uso semantico dei tag <del> e <s>: Come scrivere un'etichetta del prezzo accessibile per gli e-commerce
Quando utilizzare i tag HTML <del> e <s>
| Caratteristica comparativa | Elemento <del> | Elemento <s> |
|---|---|---|
| Definizione semantica | Rappresenta un intervallo di testo che è stato rimosso da un documento. | Rappresenta contenuti che non sono più accurati, corretti o rilevanti. |
| Quando usare (caso d'uso) | Modifiche di documenti, tracciamento delle modifiche o revisioni visive/strutturali (spesso associato a <ins>). | Informazioni obsolete, avvisi di deprecazione, vecchi prezzi o articoli esauriti. |
| Modello di codice accessibile | Blocco di codice | Blocco di codice |
| Rappresentazione visiva | L'incontro è il data precedente: | Prezzo originale: |
| Attributi unici | cite (URL che punta alla spiegazione della rimozione) datetime (data/ora della rimozione) | Nessuno |
| Stili predefiniti del browser | Viene visualizzato con una barratura visiva (line-through) | Viene visualizzato con una barratura visiva (line-through) |
Mappatura ARIA implicita: role="deletion" and role="insertion"
I tag <del> e <s> si associano al ruolo di accessibilità deletion (e <ins> a insertion). Gli utenti vedenti vedono questi elementi sbarrati o sottolineati, ma il supporto degli screen reader per annunciare queste modifiche è incoerente.
Comprensione della mappatura dell'albero dell'accessibilità
In base alle specifiche W3C Accessibility API Mappings, questi tag sono mappati a livello di codice a specifici ruoli di accessibilità che i browser espongono all'albero dell'accessibilità del sistema operativo:
<del>è mappato surole="deletion"(vedi Mappatura HTML-AAM<del>e Mappatura ruolo deletion Core-AAM).<s>è mappato surole="deletion"(vedi Mappatura HTML-AAM<s>e Mappatura ruolo deletion Core-AAM).<ins>è mappato surole="insertion"(vedi Mappatura HTML-AAM<ins>e Mappatura ruolo insertion Core-AAM).
Queste mappature indicano al motore di accessibilità del browser come esporre la semantica alle tecnologie assistive. Tuttavia, il supporto degli screen reader è incoerente:
- Annunciato nativamente:
- VoiceOver + Safari (iOS)
- NVDA + Firefox
- TalkBack + Chrome
- Non annunciato:
- NVDA + Chrome
- TalkBack + Firefox
- VoiceOver + Safari (macOS)
Come forniamo il contesto per le combinazioni senza supporto nativo sull'albero dell'accessibilità
Per compensare la mancanza di supporto nativo, dovremmo aggiungere un testo visivamente nascosto (ad esempio, utilizzando una classe .sr-only) per fornire più contesto su ciò che accade alle informazioni.
Blocco di codice
L'incontro è il <span class="sr-only">data precedente: </span><del>lunedì</del> <span class="sr-only">nuova data: </span><ins>mercoledì</ins>.Impostando il testo nascosto come descrittore naturale del contesto (ad esempio, "data precedente:" e "nuova data:"), l'annuncio risulterà più coerente e significativo su tutte le tecnologie assistive. Si raccomanda di evitare etichette ridondanti come "eliminazione" e "inserimento".
- Sui sistemi senza supporto nativo: Annuncia "data precedente: lunedì, nuova data: mercoledì". La modifica semantica viene comunicata interamente attraverso il contesto descrittivo.
- Sui sistemi con supporto nativo: Annuncia "data precedente: ad eliminazione, lunedì, nuova data: ad inserimento, mercoledì". Questa formula viene letta come una frase coerente e descrittiva senza fastidiosi doppi annunci.
Consigli per lo stile CSS
È possibile personalizzare la rappresentazione visiva dei tag <del>, <s> e <ins> in base al proprio design system utilizzando le proprietà CSS standard per la decorazione del testo, oltre a definire una classe di utilità per nascondere le etichette di contesto dello screen reader.
Personalizzazione di <del> e <s>
Per applicare stili a eliminazioni e barrature:
Blocco di codice
/* Personalizzare singolarmente */
s, del {
text-decoration-line: line-through;
text-decoration-color: #e06c75; /* Cambia colore della linea */
text-decoration-style: wavy; /* double, dashed, wavy, solid */
text-decoration-thickness: 1.5px; /* Cambia spessore della linea */
}
/* Oppure usa la sintassi abbreviata */
s, del {
text-decoration: line-through #e06c75 wavy 1.5px;
}Personalizzazione di <ins>
Per applicare stili a inserimenti:
Blocco di codice
/* Personalizzare singolarmente */
ins {
text-decoration-line: underline;
text-decoration-color: #98c379; /* Cambia colore della linea */
text-decoration-style: wavy; /* double, dashed, wavy, solid */
text-decoration-thickness: 1.5px; /* Cambia spessore della linea */
}
/* Oppure usa la sintassi abbreviata */
ins {
text-decoration: underline #98c379 wavy 1.5px;
}Utilità per nascondere visivamente il testo
Per nascondere le etichette descrittive del contesto (come "data precedente:") agli utenti vedenti pur mantenendole accessibili agli screen reader, implementa una classe CSS standard per nascondere visivamente gli elementi:
Blocco di codice
.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;
}Risorse e documentazione
- Documentazione MDN: Elemento
<del> - Documentazione MDN: Elemento
<ins> - Documentazione MDN: Elemento
<s>
Chiarimento sulla soluzione con pseudo-elementi di MDN: MDN suggerisce di utilizzare il contenuto generato da CSS (
::before/::after) per annunciare quale testo è stato eliminato e quale testo è stato inserito. Tuttavia, ho optato per un'altra soluzione altrettanto valida. Secondo i miei test, l'uso di nodi DOM nascosti visivamente è molto più affidabile e stabile per garantire un contesto chiaro.