O CSS que falaCSS AURAL

CSS AURAL - O CSS que fala 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 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 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 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 6

...Usuários com restrições visuais

...Usuários com navegadores de voz

...Usuários sem restrições

FORNECE INFORMAÇÕES PARA...

7CSS AURAL - O CSS que fala

As propr iedades a segui r per tencem às fo lhas de est i lo para a míd ia de áud io da CSS (aura l / speech)

PROPRIEDADES

CSS AURAL - O CSS que fala 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 9

A propriedade speak indica a forma de execução da fala

O valor spell-out soletra o texto

Valores:normalnonespell-out

SPEAK

CSS AURAL - O CSS que fala 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 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ífi co, pode-se util izar a propriedade como cue-before ou cue-after

Se caso for uti l izado 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 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 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 ut i l izando-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 vert ical

Para expl icar melhor a função dessas duas propriedades, segue imagem ao lado

AZIMUTH E ELEVATION

CSS AURAL - O CSS que fala 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 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 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 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

18CSS AURAL - O CSS que fala

CONCLUINDO

CSS AURAL - O CSS que fala 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

CONCLUINDO

CSS AURAL - O CSS que fala 20

Wérmeson da S. Lopes Estudante de Sistemas de

Informação na inst ituiçã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 local iza dentro da mesma inst ituição.

http: / /www.s l ideshare.net/WermesonSL

http: / / twitter.com/wermezoom http: / /www.facebook.com/Wermeso

nSL http: / /br. l inkedin.com/in/wermeson Acompanhe dicas e art igos

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/artic le/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