Konuş - CSS Hileleri

Anonim

CSS'deki speaközellik, bir tarayıcının, örneğin bir ekran okuyucu aracılığıyla okuduğu içeriği söyleyip söylemeyeceğini belirtmek içindir.

.module ( speak: never; speak-as: spell-out; )

İçin değerler speak

  • auto: Öğe olmadığı display: blockve olmadığı sürece visibility: visiblemetin işitsel olarak okunacaktır.
  • never: metin işitsel olarak okunmayacaktır
  • always: metin, displaydeğerine veya ata değerlerine bakılmaksızın işitsel olarak okunur speak.

İçin değerler speak-as

İlgili speakİster metin okunacaktır nasıl içine alır gibi:

  • normal: Tarayıcının varsayılan speakayarlarını alır.
  • spell-out: Tarayıcıya tam kelimeleri söylemek yerine bir özellik içeriğini hecelemesini söyler.
  • digits: Sayıları birer birer okur, 69'un “altı dokuz” olarak okunması gibi. Güzel.
  • literal-punctuation: Noktalama işaretlerini (noktalı virgül gibi) duraklama muamelesi yapmak yerine heceler.
  • no-punctuation: Noktalama işaretlerini tamamen atlar.

Konuşmayı nasıl "biçimlendiriyorsun"?

speakMülkiyet ekran okuyucular kullanılmaktadır zaman bir sitenin erişilebilirlik deneyimini terzilik olandan ekran okuyucunun konuşmasını igili azdır.

Konuşmayı cinsiyet, ses tonu, aksan ve gerçek hayatta konuştuğumuz diğer yollarla şekillendirmek cazip geliyor, ama durum böyle değil speak. Bu kontrol seviyesi, şu anda voiceCSS Konuşma Modülünde düşünülmekte olan şeydir .

Daha fazla bilgi

  • Konuşma CSS'si Hakkında Konuşalım
  • CSS Konuşma Modülü spesifikasyonu
  • CSS Konuşma desteğini simüle etmek için Web Konuşma API'sini kullanma
  • Speak Desteğinde Stack Overflow

Tarayıcı Desteği

Bu yazının yazıldığı sırada herhangi bir destek yok. Görünüşe göre Opera -xv-, tarayıcı Chrome tarafından kullanılan Blink oluşturma motoruyla birleştirilmeden önce özelliği bir önekle yerel olarak destekliyordu .

MDN, sayaç stilleri ile ilgili olarak konuşmadan bahsediyor:

 
  • One
  • Two
  • Three
  • Four
  • Five
@counter-style speak-as-example ( system: fixed; symbols:     ; suffix: " "; speak-as: numbers; ) .list ( list-style: speak-as-example; )

Bu makaleyi güncellediğimde Firefox bunu destekliyor.