# Uso semantico dei tag e : Come scrivere un'etichetta del prezzo accessibile per gli e-commerce > In questo articolo, spiegherò le differenze chiave tra i tag e , quando usare ciascuno di essi e come scrivere etichette del prezzo semantiche e accessibili per gli e-commerce. *By Micaela Avigliano — Frontend & Accessibility Engineer · Pubblicato 27 mag 2026* [Read the original on micaavigliano.com](https://micaavigliano.com/it/blog/semantica-etichette-del-s) --- ## [Quando utilizzare i tag HTML `` e ``](#quando-utilizzare-i-tag-html-del-e-s) Differenze tra i tag `` e ``. Scopri quando usare ciascun tag. | Caratteristica comparativa | Elemento `` | Elemento `` | | --- | --- | --- | | 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 ``). | Informazioni obsolete, avvisi di deprecazione, vecchi prezzi o articoli esauriti. | | Modello di codice accessibile | ## Blocco di codice ``` L'incontro è il data precedente: lunedì nuova data: mercoledì. ``` | ## Blocco di codice ``` Prezzo originale: $100.00 ``` | | Rappresentazione visiva | L'incontro è il data precedente: ~lunedì~ nuova data: mercoledì | Prezzo originale: ~$100.00~ Nuovo prezzo: $34.99 | | 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"](#mappatura-aria-implicita-roledeletion-and-roleinsertion) I tag `` e `` si associano al ruolo di accessibilità `deletion` (e `` 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à](#comprensione-della-mappatura-dellalbero-dellaccessibilita) 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: - **``** è mappato su `role="deletion"` (vedi [Mappatura HTML-AAM ``](https://www.w3.org/TR/html-aam-1.0/#el-del) e [Mappatura ruolo deletion Core-AAM](https://www.w3.org/TR/core-aam-1.2/#role-map-deletion)). - **``** è mappato su `role="deletion"` (vedi [Mappatura HTML-AAM ``](https://www.w3.org/TR/html-aam-1.0/#el-s) e [Mappatura ruolo deletion Core-AAM](https://www.w3.org/TR/core-aam-1.2/#role-map-deletion)). - **``** è mappato su `role="insertion"` (vedi [Mappatura HTML-AAM ``](https://www.w3.org/TR/html-aam-1.0/#el-ins) e [Mappatura ruolo insertion Core-AAM](https://www.w3.org/TR/core-aam-1.2/#role-map-insertion)). 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à](#come-forniamo-il-contesto-per-le-combinazioni-senza-supporto-nativo-sullalbero-dellaccessibilita) 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 data precedente: lunedì nuova data: mercoledì. ``` 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](#consigli-per-lo-stile-css) È possibile personalizzare la rappresentazione visiva dei tag ``, `` e `` 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 `` e ``](#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 ``](#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](#utilita-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](#risorse-e-documentazione) - [Documentazione MDN: Elemento ``](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/del) - [Documentazione MDN: Elemento ``](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins) - [Documentazione MDN: Elemento ``](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/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.