Proprietà CSS speak
Come usare la proprietà CSS speak per rendere un elemento in modo aurale. Scopri la proprietà e i valori disponibili.
Nota: La proprietà
speakè obsoleta. Nessun browser mainstream la implementa e i lettori di schermo non la leggono dal CSS. Considera questa pagina come riferimento per il codice legacy e usa invece tecniche di accessibilità reali (HTML semantico, ARIA, l'attributoaria-hidden).
La proprietà CSS speak definisce se — e come — il testo di un elemento viene reso auralmente: cioè, letto ad alta voce da un sintetizzatore vocale in un agente utente aurale (il tipo di strumento su cui fa affidamento un utente di lettore di schermo). Appartiene a una famiglia di funzionalità CSS "aurali" / "vocali" pensate per stilizzare l'output audio così come il CSS ordinario stilizza l'output visivo.
Questa pagina spiega cosa avrebbe dovuto fare la proprietà, tutti i valori che accetta, perché non è mai stata distribuita e cosa usare oggi.
Perché questa proprietà esiste (e perché ha fallito)
L'idea alla base di speak era semplice: proprio come display: none nasconde un elemento da una pagina visiva, speak: none lo avrebbe nascosto da una pagina parlata, mentre spell-out avrebbe forzato un sintetizzatore a leggere una stringa un carattere alla volta (utile per un acronimo come "URL" o un numero seriale).
In pratica la specifica si è evoluta nel tempo — i valori furono suddivisi tra CSS 2.1 e il successivo CSS Speech Module — e nessun browser l'ha mai implementata. I lettori di schermo leggono il DOM renderizzato e l'albero di accessibilità, non il foglio di stile, quindi non hanno mai rispettato speak. Per questo è contrassegnata come obsoleta: non ha effetto da nessuna parte.
Cosa usare al suo posto
Poiché speak non produce alcun effetto, utilizza tecniche che la tecnologia assistiva rispetta realmente:
- Nascondere contenuto a tutti (inclusi i lettori di schermo): usa
display: noneo l'attributo HTMLhidden. Questo è l'equivalente moderno del vecchiospeak: none. - Nascondere contenuto visivamente ma mantenerlo per i lettori di schermo: una classe di utilità "visually hidden" / "sr-only" (posizionamento fuori schermo), in modo che un pulsante con solo un'icona possa comunque annunciare un'etichetta.
- Nascondere contenuto decorativo solo ai lettori di schermo:
aria-hidden="true"sull'elemento. - Compitare qualcosa: non esiste un modo CSS affidabile; usa testo chiaro, un elemento
abbr, oppure unaria-labelscritto nel modo in cui vuoi che venga pronunciato.
Valori
La proprietà accetta sei valori parola chiave più le due parole chiave CSS globali (initial, inherit). none, normal e spell-out provengono da CSS 2.1; auto, never e always provengono dal CSS Speech Module.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. |
| Ereditato | Sì. |
| Animabile | No. |
| Versione | CSS2, CSS Speech Module |
| Sintassi DOM | element.style.speak = "always"; |
Sintassi
Sintassi CSS speak
speak: auto | normal | spell-out | none | never | always | initial | inherit;Una dichiarazione minima si presenta così (non avrà alcun effetto osservabile in nessun browser attuale):
.acronym {
speak: spell-out;
}Riferimento ai valori
| Valore | Descrizione |
|---|---|
none | Impedisce che l'elemento e il suo contenuto vengano resi auralmente. |
normal | Utilizza regole di pronuncia dipendenti dalla lingua per il rendering dell'elemento e dei suoi figli. |
spell-out | Compita il testo una lettera alla volta; tipicamente usato per acronimi e abbreviazioni. |
auto | Si risolve a un valore calcolato di none quando display è none, altrimenti si risolve a auto che produce un valore utilizzato di normal. |
never | Impedisce che l'elemento venga reso auralmente. |
always | L'elemento viene reso auralmente. |
initial | Fa sì che la proprietà utilizzi il suo valore predefinito. |
inherit | Eredita la proprietà dall'elemento genitore. |
Compatibilità con i browser
Nessun browser mainstream implementa speak. La dichiarazione viene analizzata ma ignorata ovunque, quindi non raggiunge mai un lettore di schermo.
| Browser | Supporto |
|---|---|
| Chrome | No |
| Firefox | No |
| Safari | No |
| Edge | No |
| Opera | No |
Proprietà correlate
display— il modo moderno e supportato per rimuovere completamente un elemento dalla pagina (e dall'albero di accessibilità).content— contenuto generato che viene annunciato dai lettori di schermo, quindi usarlo con attenzione.cursor— un'altra proprietà presentazionale, questa completamente supportata.