Mówić - CSS-Tricks

Anonim

speakNieruchomość w CSS jest do określania, czy przeglądarka powinna mówić zawartość to czyta, na przykład za pośrednictwem czytnika ekranu.

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

Wartości dla speak

  • auto: Dopóki element nie display: blockjest i jest visibility: visible, tekst będzie czytany słuchowo.
  • never: tekst nie będzie czytany słuchowo
  • always: tekst zostanie odczytany dźwiękowo, niezależnie od displaywartości lub wartości przodków speak.

Wartości dla speak-as

Związane z speaktym, jak będzie czytany tekst:

  • normal: Pobiera domyślne speakustawienia przeglądarki .
  • spell-out: Nakazuje przeglądarce przeliterowanie treści właściwości zamiast wymawiania całych słów.
  • digits: Odczytuje cyfry pojedynczo, na przykład 69 byłoby czytane jako „sześć dziewięć”. Miły.
  • literal-punctuation: Literuje znaki interpunkcyjne (np. Średniki) zamiast traktować je jak pauzę.
  • no-punctuation: Całkowicie pomija interpunkcję.

Jak „stylizujesz” mowę?

speakNieruchomość jest mniej o stylizacji mowę czytnikiem ekranu niż jest krawiectwo doświadczenie dostępności danej witryny, gdy stosowane są czytniki ekranu.

Kuszące jest myślenie o stylizacji mowy w kategoriach płci, tonu, akcentu i innych sposobów, w jakie sami mówimy w prawdziwym życiu, ale tak nie jest speak. Ten poziom kontroli jest obecnie rozważany voicew module CSS Speech.

Więcej informacji

  • Porozmawiajmy o Speech CSS
  • Specyfikacja modułu mowy CSS
  • Używanie interfejsu API Web Speech do symulacji obsługi CSS Speech
  • Przepełnienie stosu w programie Speak Support

Wsparcie przeglądarki

W chwili pisania tego tekstu nie ma wsparcia. Wygląda na to, że Opera natywnie obsługiwała właściwość z -xv-prefiksem, zanim przeglądarka połączyła się z silnikiem renderującym Blink używanym przez Chrome.

MDN mówi o speak-as w odniesieniu do stylów kontrowania:

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

Firefox to obsługuje, kiedy aktualizuję ten artykuł.