Berbicara - Trik CSS

Anonim

The speakproperti di CSS adalah untuk menentukan jika browser harus berbicara isi membaca, seperti melalui pembaca layar.

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

Nilai untuk speak

  • auto: Selama elemennya bukan display: blockdan ada visibility: visible, teks akan dibaca secara aurally.
  • never: teks tidak akan dibaca secara aurally
  • always: teks akan dibaca secara aurally, terlepas dari displaynilai atau nilai leluhurnya speak.

Nilai untuk speak-as

Terkait dengan speakbagaimana teks akan dibaca:

  • normal: Mengambil speakpengaturan default browser .
  • spell-out: Menginstruksikan browser untuk mengeja konten properti alih-alih mengucapkan kata-kata lengkap.
  • digits: Membaca angka satu per satu, seperti 69 akan dibaca "enam sembilan". Bagus.
  • literal-punctuation: Mengeja tanda baca (seperti titik koma) daripada memperlakukannya seperti jeda.
  • no-punctuation: Sepenuhnya melewati tanda baca.

Bagaimana Anda "mendesain" pidato?

The speakproperti kurang tentang styling pidato dari pembaca layar dari itu menyesuaikan pengalaman aksesibilitas situs ketika pembaca layar yang digunakan.

Sangat menggoda untuk memikirkan gaya bicara dalam hal jenis kelamin, nada, aksen dan cara lain yang kita sendiri berbicara dalam kehidupan nyata, tetapi itu tidak terjadi speak. Tingkat kontrol itulah yang saat ini sedang dipertimbangkan voicedalam Modul Ucapan CSS.

Informasi Lebih Lanjut

  • Mari Bicara Tentang Speech CSS
  • Spesifikasi CSS Speech Module
  • Menggunakan Web Speech API untuk mensimulasikan dukungan CSS Speech
  • Stack Overflow di Speak Support

Dukungan Browser

Tidak ada dukungan pada saat penulisan ini. Tampaknya Opera dulu mendukung properti dengan -xv-awalan sebelum browser digabungkan dengan mesin rendering Blink yang digunakan oleh Chrome.

MDN berbicara tentang speak-as dalam kaitannya dengan gaya counter:

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

Firefox mendukung itu, saat saya memperbarui artikel ini.