Свойство CSS `speak-as`

Свойство speak-as CSS используется для определения того, как произносится содержимое HTML. От одного до трёх перечисленных ключевых слов определяют, каким образом элементы и текст озвучиваются вспомогательными технологиями, такими как программы экранного доступа и цифровые помощники.

Это свойство применяется ко всему содержимому, включая псевдоэлементы, за исключением псевдоэлементов ::marker, созданных с помощью @counter-style с определённым дескриптором speak-as, который имеет приоритет над любым унаследованным значением свойства speak-as.

Синтаксис

/* single value syntax */
speak-as: normal;
speak-as: spell-out;
speak-as: literal-punctuation;
speak-as: digits;
speak-as: no-punctuation;

/* multiple value syntax */
speak-as: spell-out literal-punctuation;
speak-as: spell-out no-punctuation;
speak-as: digits literal-punctuation;
speak-as: digits no-punctuation;
speak-as: spell-out digits literal-punctuation;
speak-as: spell-out digits no-punctuation;

Значения

normal

Обычные правила произношения, при этом знаки препинания заменяются паузами. Например, «Привет, мир!» будет произнесено как «Привет (пауза) мир (пауза)». Это значение по умолчанию.

spell-out

Содержимое произносится по буквам. Например, слово «роль» будет произнесено как «р» «о» «л» «ь».

literal-punctuation

Знаки препинания произносятся буквально. Например, «Привет, мир!» будет произнесено как «Привет запятая мир восклицательный знак».

digits

Числа произносятся по отдельным цифрам. Например, «31» будет произнесено как «три один».

no-punctuation

Содержимое произносится как обычно, без знаков препинания. Например, «Привет, мир!» будет произнесено как «Привет» «мир».

Формальное определение

Формальный синтаксис

speak-as = 
  normal |
  spell-out ||
  digits ||
  [ literal-punctuation | no-punctuation ]

Примеры

HTML

<p class="normal">Hello, world! I'm 25.</p>
<p class="spell-out">Hello, world! I'm 25.</p>
<p class="literal-punctuation">Hello, world! I'm 25.</p>
<p class="no-punctuation">Hello, world! I'm 25.</p>
<p class="digits">Hello, world! I'm 25.</p>
<p class="multi">Hello, world! I'm 25.</p>

CSS

.normal {
  speak-as: normal;
}

.spell-out {
  speak-as: spell-out;
}

.literal-punctuation {
  speak-as: literal-punctuation;
}

.no-punctuation {
  speak-as: no-punctuation;
}

.digits {
  speak-as: digits;
}
.multi {
  speak-as: literal-punctuation digits;
}

Спецификации

Совместимость с браузерами

См. также

• Дескриптор @counter-style at-rule speak-as
• Модуль счётчиков CSS
• Модуль списков и счётчиков CSS
• Web Speech API