Uma forma de deixar seu site mais visível é ampliando a experiência de uso do usuário-final. O CSS Aural ajuda você a chegar nesse foco deixando seu site mais acessível, principalmente para pessoas com algum tipo de deficiência visual.

1. O CSS que
falaCSS AURAL

2.  Folhas de estilo aural utilizam uma combinação de síntese
de fala e efeitos sonoros para que o usuário possa ouvir a
informação, em vez de lê-la
 São propriedades aplicadas no código CSS
 Recurso indicado para tornar o seu site mais acessível
O QUE É?
CSS AURAL - O CSS que fala 2

3.  Ajudar os usuários a aprenderem a ler
 Ajudar os usuários que têm problemas de leitura
 Ajudar pessoas cegas
 E até mesmo ouvir enquanto dirige
PARA QUE SERVE?
CSS AURAL - O CSS que fala 3

4. h1,h2,h3,h4 {
voice-family:male;
richness:80;
cue-before:url("beep.au")
}
 Fará com que o sintetizador de voz reproduza os
cabeçalhos em uma voz grave masculina
EXEMPLO
CSS AURAL - O CSS que fala 4

5.  As propriedades neste slide se aplicam ao tipo de mídia
aural, que foi introduzido no CSS2
 Porém, o tipo aural está obsoleto, sendo substituído pelo
tipo de mídia speech, mas mantendo as mesmas
propriedades
 Atualmente, o melhor navegador com suporte a estas
propriedades é o Opera
ANTES DE MAIS NADA
CSS AURAL - O CSS que fala 5

6.  ...Usuários com restrições visuais
 ...Usuários com navegadores de voz
 ...Usuários sem restrições
FORNECE INFORMAÇÕES PARA...
CSS AURAL - O CSS que fala 6

7. As
propriedades
a seguir
pertencem às
folhas de
estilo para a
mídia de
áudio da CSS
(aural /
speech)
PROPRIEDADES
CSS AURAL - O CSS que fala 7

8. A propriedade
volume controla o
nível de volume,
podendo ter um valor
entre zero e 100
Os valores x-soft,
soft, medium, loud
e x-loud significam
os números zero, 25,
50, 75 e 100,
respectivamente
Valores:
 [Número]
 %
 Silent
 x-soft
 soft
 medium
 loud
 x-loud
VOLUME
CSS AURAL - O CSS que fala 8

9. A propriedade
speak indica a
forma de execução
da fala
O valor spell-out
soletra o texto
Valores:
normal
none
spell-out
SPEAK
CSS AURAL - O CSS que fala 9

10.  É possível utilizar a
propriedade pause em
sua forma genérica, mas
neste caso é necessário
especificar com um
número – 1 ou 2 – se a
pausa será dada antes
ou depois de
determinado elemento
no HTML e por quanto
tempo
 É possível ser mais
específico utilizando
uma das propriedades
pause-before ou pause-
after
 Valores:
 Pause
 pause-before
 pause-after
 Pause-before
 time
 %
 Pause-after
 time
 %
PAUSE, PAUSE-BEFORE E PAUSE-
AFTER
CSS AURAL - O CSS que fala 10

11.  A propriedade cue indica no
HTML em qual parte deve ser
disparado determinado
conteúdo sonoro. Por isso, é
preciso indicar a localização
do arquivo sonoro no valor
[uri]
 De modo específico, pode-se
utilizar a propriedade como
cue-before ou cue-after
 Se caso for utilizado sua
versão geral, somente clue,
da mesma forma deve-se
indicar se o disparo do som
será antes (before) ou depois
(after)
 Valores:
 Cue-before
 cue-before
 cue-after
 Cue-before
 none
 url
 Cue-after
 none
 url
CUE, CUE-BEFORE E CUE-AFTER
CSS AURAL - O CSS que fala 11

12.  Com a propriedade
play-during é possível
indicar disparos
sonoros, como na
clue, com a diferença
do som ser de fundo
(background)
 E ainda poderá ter
dois ou mais sons
sobrepostos, basta
indicar o valor mix
após a localização do
arquivo sonoro [uri]
 Valores:
 auto
 none
 url
 mix
 repeat
PLAY-DURING
CSS AURAL - O CSS que fala 12

13.  Com as propriedades de som
espacial é possível escutar mais
naturalmente, como geralmente se
escuta no dia-a-dia, pois na vida
real o áudio pode vir de qualquer
lado e de acordo com a mudança
de posição da pessoa, muda-se o
lado de escuta do referencial
sonoro
 Esse controle é possível
utilizando-se as propriedades
azimuth, que descreve o
posicionamento da fonte sonora
na horizontal e em
profundidade, e elevation, que
tem a mesma função, porém
controla a origem da fonte sonora
na vertical
 Para explicar melhor a função
dessas duas propriedades, segue
imagem ao lado
AZIMUTH E ELEVATION
CSS AURAL - O CSS que fala 13

14. Valores (A=Azimuth e
E=Elevation):
 angle (A, E)
 left-side (A)
 far-left (A)
 left (A)
 center-left (A)
 center (A)
 center-right (A)
 right (A)
 far-right (A)
 right-side (A)
 behind (A)
 leftwards (A)
 rightwards (A)
 below (E)
 level (E)
 above (E)
 higher (E)
 lower (E)
AZIMUTH E ELEVATION
CSS AURAL - O CSS que fala 14

15.  As propriedades que controlam as características das vozes
são:
 speech-rate – que determina a quantidade de palavras por minuto;
 voice-family – especifica o tipo de voz, se é feminina, masculina
ou de criança
 pitch – permite alterar o volume e timbre da voz
 pitch-range – altera o volume e o timbre da voz por meio da
determinação de um valor específico de frequência
 stress – especifica o tipo de entonação
 richness – trabalha o “brilho” da voz e está relacionado também
com a ambiência
SPEECH-RATE, VOICE-FAMILY, PITCH,
PITCH-RANGE, STRESS E RICHNESS
CSS AURAL - O CSS que fala 15

16. Valores:
 Speech-rate
 Number
 x-slow
 Slow
 Medium
 Fast
 x-fast
 Faster
 slower
 Voice-family
 specific-voice
 generic-voice
Valores:
 Pitch
 Frequency
 x-low
 Low
 Medium
 High
 x-high
 Pitch-range, Stress E
Richness
 Number
SPEECH-RATE, VOICE-
FAMILY, PITCH, PITCH-RANGE, STRESS
E RICHNESS
CSS AURAL - O CSS que fala 16

17. As propriedades que
trabalham a
pronúncia são:
 speak-puntuation –
que indica como a
pontuação será falada
 speak-numeral – como
os números serão
falados
 speak-header – como o
texto será falado
quando estiver dentro
de uma tabela
Valores:
 Speak-punctuation
 None
 code
 Speak-numeral
 Digits
 continuous
 Speak-header
 Always
 once
SPEAK-PUNCTUATION, SPEAK-NUMERAL
E SPEAK-HEADER
CSS AURAL - O CSS que fala 17

18. 18CSS AURAL - O CSS que fala
CONCLUINDO

19.  CSS Aural deixa seu site mais acessível
 Aprimora a experiência de deficientes visuais
 Não requer conhecimento de uma nova linguagem ou
técnica, pois é só seguir o padrão da linguagem CSS
 Site mais acessível = site com maior probabilidade de ser
visto
CSS AURAL - O CSS que fala 19
CONCLUINDO

20. Wérmeson da S. Lopes
 Estudante de Sistemas de
Informação na instituição
Faculdade Paraíso do Ceará, e
atuante na área de
Desenvolvimento Web no NexTI
(Núcleo de Informação em
Tecnologia da Informação) que se
localiza dentro da mesma
instituição.
 http://www.slideshare.net/Wermeson
SL
 http://twitter.com/wermezoom
 http://www.facebook.com/Wermeson
SL
 http://br.linkedin.com/in/wermeson
 Acompanhe dicas e artigos sobre
desenvolvimento web em :
http://www.webnossa.blogspot.com/
Referências
 FERREIRA, Daniela Carvalho
Monteiro. Website Aural:
aplicações sonoras com CSS 2.
Disponível em
<http://www.sonora.iar.unicamp.br/
index.php/sonora1/article/viewFile
/28/26>. Acesso em 21 de
setembro de 2013.
 W3C. Aura Style Sheets.
Disponível em
<http://www.w3.org/TR/CSS2/aural
.html>. Acesso em 21 de setembro
de 2013.
 W3SCHOOLS. CSS Aural
Reference. Disponível em
<http://www.w3schools.com/cssref
/css_ref_aural.asp>. Acesso em
21 de setembro de 2013.
ESPERO QUE TENHAM GOSTADO 
CSS AURAL - O CSS que fala 20