Vai ai contenuti

LAU



Home > realizzare > accessibilità: fogli di stile > Aural CSS: i fogli di stile uditivi


Aural CSS: i fogli di stile uditivi

Con i CSS2 è teoricamente possibile ottimizzare i parametri di lettura di una pagina web da parte di un lettore vocale. Tali proprietà sono tuttavia ancora mal supportate dai browser. Quella che segue è una breve guida all'utilizzo dei fogli di stile auditivi.

A cura di: Sebastiano Nutarelli | 2 febbraio 2006


Come noto molte persone (non vedenti, ipovedenti gravi, ma non solo) fruiscono dei servizi online tramite dispositivi/sintetizzatori vocali (screen reader, lettori vocali, etc).

Tra i più noti:

L'introduzione delle tecnologie multimediali nelle specifiche dei CSS2 renderebbe possibile (solo nel momento in cui tutte le proprietà saranno supportate dai principali browser vocali) ottimizzare per i dispositivi di lettura vocale la conversione dei contenuti delle pagine web, personalizzando la voce in lettura, accenti, inflessi, volume, provenienza del suono.

È possibile realizzare un CSS audio (da collegare tramite la proprietà @media, o la valorizzazione dell'attributo media="aural" all'interno del tag <link>) che risponde ad una particolare sezione delle specifiche CSS2: appunto gli Aural Style Sheets.

Tali specifiche hanno introdotto nuove proprietà che avranno utilità e saranno valorizzate solo se si fruisce dei contenuti presenti su una pagina web tramite il dispositivo per il quale sono state studiate e introdotte: font-size risulterà inutile per un sintetizzatore vocale e volume (proprietà che regola il volume in lettura, come vedremo) non avrà senso per un browser visuale come Mozilla Firefox o Internet Explorer.

Proprietà Valori
azimuth angle
left-side
far-left
left
center-left
center
center-right
right
far-right
right-side
behind
leftwards
rightwards
cue cue-before
cue-after
cue-after none
url
cue-before none
url
elevation angle
below
level
above
higher
lower
pause
pause-before
pause-after
pause-after time
%
pause-before time
%
pitch frequenza
x-low
low
medium
high
x-high 
pitch-range number
play-during auto
none
url
mix
repeat
richness number
speak normal
none
spell-out
speak-header always
once
speak-numeral digits
continuous
speak-punctuation none
code
speech-rate number
x-slow
slow
medium
fast
x-fast
faster
slower 
stress number
voice-family generic-voice
specific-voice
volume number

silent
x-soft
soft
medium
loud
x-loud 

azimuth

La proprietà azimuth controlla la distribuzione spaziale del suono da sinistra verso destra.
La collocazione del suono è misurata in gradi (deg) su un intervallo che va da -360° a +360° tutti localizzati direttamente di fronte all'utilizzatore.
Valori ammessi:

  • left-side (270 gradi o -90 gradi);
  • left-side behind (270 gradi o -90 gradi);
  • far-left (300 gradi o -60 gradi);
  • far-left behind (240 gradi o -120 gradi);
  • left (320 gradi o -40 gradi);
  • left behind (220 gradi o -140 gradi);
  • center-left (340 gradi o -20 gradi);
  • center-left behind (200 gradi o -160 gradi);
  • center (0 gradi);
  • center behind (180 gradi o -180 gradi);
  • center-right (20 gradi o -340 gradi);
  • center-right behind (160 gradi o -200 gradi);
  • right (40 gradi o -320 gradi);
  • right behind (140 gradi o -220 gradi);
  • far-right (60 gradi o -300 gradi);
  • far-right behind (120 gradi o -240 gradi);
  • right-side (90 gradi o -270 gradi);
  • right side behind (90 gradi o -270 gradi).
h1{
azimuth: left-side;
}
h2{
azimuth: right behind;
}

torna alla tabella

cue

La proprietà cue compatta le impostazioni fornite da cue-before e cue-after.
Richiede i valori di cue-before e cue-after posti in sequenza.
Come visti per altre valorizzazioni (padding:0;) se gli viene settato un solo valore questo verrà utilizzato per entrambe le proprietà.

#box h1{
cue:url ("/contributi/audioAll.wav");
}
#box h3{
cue-before: url("musica/sottofondo.wav")
url("musica/sottofondo2.wav");
}
#box h3.secondo{
cue:none;
}

torna alla tabella

cue-after

La proprietà cue-after esegue uno specifico file sonoro dopo che l'elemento è stato tradotto in forma sonora.
Le proprietà cue-after può assumere i seguenti valori:

  • url (identifica un file audio);
  • none (indica che non deve essere utilizzato alcun suono).
#box h1{
cue-after: url("/contributi/audio2.wav");
}

Esegue un file sonoro (indicato via css) dopo che l'elemento è stato tradotto in forma sonora.

torna alla tabella

cue-before

La proprietà cue-before esegue uno specifico file sonoro prima che l'elemento è stato tradotto in forma sonora.
Le proprietà cue-before può assumere i seguenti valori:

  • url (identifica un file audio);
  • none (indica che non deve essere utilizzato alcun suono).
#box h1{
cue-before: url("/contributi/audio.wav");
}

Esegue un file sonoro (indicato via css) prima che l'elemento sia stato tradotto in forma sonora.

torna alla tabella

elevation

La proprietà elevation permette di indicare il posizionamento del suono rispetto all'utente in altezza, spaziando in un intervallo da 90 a – 90 gradi, equivalenti rispettivamente a sopra la testa dell'utente e sotto i piedi dell'utente.
La posizione del suono fronte utente corrisponde al valore zero.
La proprietà elevation ammette i seguenti valori:

  • angle (indica in gradi, valori positivi verso l'alto e valori negativi verso il basso);
  • below (indica l'altitudine di un elemento rispetto alla posizione frontale).
    Corrisponde a -90 gradi;
  • level (corrrisponde 0 gradi);
  • above (corrisponde a 90 gradi);
  • higher e lower aggiungono e sottraggono rispettivamente 10 gradi all'altezza corrente fino a 90 e –90 gradi.

torna alla tabella

pause-after

La proprietà pause-after imposta il tempo che deve trascorrere dopo la lettura di un elemento.
Per la proprietà pause-after possono essere impostati i valori:

  • time (rappresenta la lunghezza complessiva della pausa in secondi (s) o millisecondi (ms);
  • percentuale (rappresenta la lunghezza della pausa, espressa come una percentuale).
h2{
pause-after:40ms;
}

torna alla tabella

pause-before

La proprietà pause-before imposta il tempo che deve trascorrere prima la lettura di un elemento.
Per la proprietà pause-before possono essere impostati i valori:

  • time (rappresenta la lunghezza complessiva della pausa in secondi (s) o millisecondi (ms);
  • percentuale (rappresenta la lunghezza della pausa, espressa come una percentuale).
h2{
pause-before:60ms;
}

torna alla tabella

pause

La proprietà pause è una scorciatoia per l'impostazione delle proprietà pause-before e pause-after.
Richiede entrambi i valori di pause-before e per pause-after (in questa sequenza) e caso in cui venga passato un solo valore verrà impostato per tutte la valorizzazione indicata una volta sola.

#box p.primo{
pause: 20ms;
} 
#box p.altri{ 
pause-before: 30ms; 
pause-after: 40ms;
}

torna alla tabella

pitch

La proprietà pitch è la frequenza media espressa in Hertz (Hz) della voce parlante.
Ad un valore in Hz maggiore corrisponderà una frequenza più elevata.
Per i valori di default fa riferimento alla valorizzazione della proprietà voice-family.
A male corrisponde pitch=120 mentre a female corrispondono pitch=210.
La proprietà pitch può assumere i seguenti valori:

  • frequency;
  • x-low;
  • low;
  • medium;
  • high;
  • x-high.

Frequency permette di impostare la frequenza media della voce parlante.
Le altre valorizzazioni, invece, non si riferiscono a una specifica frequenza ma dipendono dalle impostazioni di voice-family dell'elemento con l'unico vincolo del rispetto di un ordine di progressività dal più basso al più alto.

torna alla tabella

pitch-range

La proprietà pitch-range indica l'intervallo di frequenza al di sopra del quale una voce può cambiare intonazione.
Il valore che può assumere ls proprietà pitch-range è:

  • number

La valorizzazione per number deve essere compresa tra 0 e 100 (50 è il valore di default).
0 è un valore monotono mentre i valori sopra 50 danno luogo a voci molto animate o agitate.

torna alla tabella

play-during

La proprietà play-during regola la riproduzione di un file sonoro durante la lettura di un elemento.
Il suo valore non viene ereditato dagli elementi padre.
La proprietà play-during ammette i seguenti valori:

  • url (continua nell'esecuzione dell'audio ereditato dall'elemento padre (se quest'ultimo aveva la proprietà play-during indicata) mixandolo con quello indicato nella valorizzazione della proprietà per l'elemento corrente (figlio);
  • mix (continua nell'esecuzione del brano di accompagnamento ereditato dalla proprietà play-during dell'elemento padre mixandolo con quello indicato bel valore uri);
  • repeat (se non è presente l'audio viene comunque eseguito ma una volta sola) manda in loop l'esecuzione dell'audio correlato (utile nel caso in cui la durata dello stesso sia inferiore a quella richiesta per la lettura del contenuto dell'elemento) e allo stesso tempo permette di interrompere la riproduzione dell'audio se questa è più lunga del tempo richiesto per la lettura del contenuto dell'elemento);
  • auto (garantisce che il file audio dell'elemento padre venga eseguito mentre è in corso la lettura del contenuto dell'elemento corrente figlio);
  • none (impedisce la riproduzione di suoni di sottofondo durante la lettura dell'elemento corrente (compresa l'interruzione della riproduzione dei suoni di sottofondo di ogni elemento padre che perdura per l'intera durata della lettura dell'elemento figlio, per poi riprendere regolarmente).
#box h3{
play-during: url("file.wav");
}
#box h5{
play-during: url("audio2.wav") mix;
}
#box h5{
play-during: url("audio2.wav") repeat;
}
#box{
play-during: url("audio.wav");
}
#box h1{
play-during: auto;
}
#box{
play-during: url("file.wav");
}
#box p{
play-during: none;
}

torna alla tabella

richness

La proprietà richness indica calore e profondità di una voce.
LA proprietà richness ammette il seguente valore:

  • number

La valorizzazione per number deve essere compresa tra 0 e 100 (50 è il valore di default).
Mediamente è buona precauzione non scostarsi troppo dai valori di default a meno che non si conosca a fondo l'ambiente in cui l'utente fruirà del servizio dato. Maggiore sarà la valorizzazione e maggiore sarà l'udibilità della voce in ampi spazi e, viceversa, minore sarà la valorizzazione e minore sarà l'udibilità della voce in ampi spazi.
È possibile dunque implementare tale proprietà, discostandosi nettamente dai valori di default specialmente se si tratta di una intranet aziendale, della quale si potrebbero conoscere a priori, ad esempio, condizioni ambientali di consultazione in aule/locali molto ampi.

torna alla tabella

speak

La proprietà speak determina se e come un elemento sonoro dovrà essere riprodotto, e può assumere i seguenti valori:

  • normal (valore di default) fa in modo che un elemento (e tutti i suoi figli) utilizzino l'impostazione della pronuncia e il linguaggio fornito dal dispositivo utilizzato lato server o client (a seconda dell'applicazione);
  • none (non rende udibile un elemento ma diversamente dall'istruzione volume: silent l'istruzione speak: none ignora l'elemento del tutto);
  • spell-out (porta il dispositivo a leggere facendo lo "spelling", cosa che può tornare utile per leggere correttamente e con puntualità abbreviazioni e acronimi).
#boxMen¨ p{
speak: normal;
}

torna alla tabella

speak-header

La proprietà speak-header vale solo nel contesto di tabelle con intestazioni e veicola quante volte le intestazioni stesse verranno ripetute durante la lettura della tabella.
La proprietà speak-header ammette i seguenti valori:

  • once (valore di default); l'intestazione della tabella viene letta una volta sola all'inizio di ogni colonna;
  • always (veicola la lettura dell'intestazione per ogni cella corrispondente alla stessa).

torna alla tabella

speak-numeral

La proprietà speak-numeral determina se i numeri debbano venire letti per intero o come singole cifre.
La proprietà speak-numeral ammette i seguenti valori:

  • digit (specifica che i numeri, se presenti, devono essere resi leggendone le singole cifre: 349 viene letto come "tre-quattro-nove");
  • continuous (valorizzazione di default) fa in modo che i numeri presenti, vengano letti per intero. "349" in questo caso viene letto come "trequattronove").

torna alla tabella

speak-puntuaction

La proprietà speak-puntuaction determina se il dispositivo auditivo debba leggere o meno la punteggiatura utilizzando una pausa appropriata nel testo letto o citando la punteggiatura per tipologia durante la lettura
La proprietà speak-puntuaction ammette i seguenti valori:

  • code (fa in modo che la tipologia di punteggiatura sia citata durante la lettura del testo. Per esempio il testo "lau.it" verrà letto "lau punto it";
  • none (è il valore di default e rende in lettura ogni elemento di punteggiatura come una breve pausa/interruzione).

torna alla tabella

speech-rate

La proprietà speech-rate regola la velocità di lettura del testo.
La proprietà speech-rate ammette i seguenti valori:

  • number (si riferisce alla velocità con la quale il testo viene letto);
  • x-slow (corrisponde a 80 ppm);
  • slow (corrisponde a 120 ppm);
  • medium (corrisponde a 180-200 ppm. Il range è funzionale alle differenti velocità di lettura connesse alla lingua);
  • fast (corrisponde a 300 ppm);
  • x-fast (corrisponde a 500 ppm);
  • slower (sottrae 40 ppm alla speech-rate ereditata dall'elemento padre);
  • faster (aggiunge 40 ppm alla speech-rate ereditata dall'elemento padre).

torna alla tabella

stress

La proprietà stress determina l'altezza dei toni nell'intonazione di una voce associata all'elemento.
In linguaggi molto accentati, a diverse proposizioni vengono associati valori differenti di stress.
La proprietà stress ammette il valore:

  • number (deve essere compresa tra 0 e 100).
    50 è il valore di default.
#box h1{
pitch:110; 
pitch-range:80; 
stress:60;
}

torna alla tabella

voice-family

La proprietà voice-family non è altro che la corrispondente versione aural della proprietà visuale font-family.
Valorizzazioni possibili:

  • generic-voice (corrisponde a una generica famiglia vocale e può essere implementata con male, female o child);
  • specific-voice (richiede il nome specifico di una voce o di un interprete anche se non è ancora disponibile una lista di voci per questo attributo).

torna alla tabella

volume

La proprietà volume permette di regolare il livello del volume (che resterà comunque ulteriormente controllabile lato client tramite i tradizionali dispositivi di regolazione).
La proprietà volume ammette i seguenti valori:

  • number (è un numero compreso tra 0 e 100, si imposta il livello dal valore audio minimo al valore massimo);
  • silent (porta ad un output "silente" ma non ha lo stesso valore di 0, il quale imposta il più piccolo sonoro percepibile (quindi l'audio viene riprodotto ma non viene reso disponibile in output);
  • percentage (è calcolato in relazione all’eredità del livello audio.
    Il valore espresso nell'elemento figlio sarà da intendersi come percentuale dell'elemento padre);
  • soft (equivale a scrivere number=25);
  • x-soft (equivale a number=0);
  • medium (equivale a scrivere number=50).
    È il valore di default che viene utilizzato quando il valore per la proprietà volume non viene specificato);
  • loud (equivale a scrivere number=75);
  • x-loud (equivale a scrivere number=100).
div.nomeClasse{
volume: 90;
}
h1{volume: 85%;
}

Nell'esempio il volume della pagina è stato impostato al 90% dell'impostazione del volume dell'utente.
Questa istruzione può essere scritta anche nella forma volume:90 e il testo racchiuso tra <h1> e <h1> sarà ascoltato al 85% del volume della pagina.

torna alla tabella

[ Torna all’inizio della pagina ]



Sito realizzato dal Laboratorio di Accessibilità e Usabilità del CSI-Piemonte - Privacy, cookies e accessibilità

[ Torna all’inizio della pagina ]