Дескриптор CSS-правила `speak-as`

Дескриптор speak-as указывает, как символ счётчика, созданного с помощью заданного @counter-style, будет представлен в устной форме. Например, автор может указать, что символ счётчика следует озвучивать как числовое значение или просто обозначать звуковым сигналом.

Синтаксис

/* Keyword values */
speak-as: auto;
speak-as: bullets;
speak-as: numbers;
speak-as: words;
speak-as: spell-out;

/* @counter-style name value */
speak-as: <counter-style-name>;

Значения

auto

Если значение speak-as задано как auto, эффективное значение speak-as будет определяться на основе значения дескриптора system:

• Если значение system равно alphabetic, эффективным значением speak-as будет spell-out.
• Если system равно cyclic, эффективным значением speak-as будет bullets.
• Если system равно extends, значение speak-as будет таким же, как если бы для расширенного стиля было задано speak-as: auto.
• Во всех остальных случаях указание auto имеет тот же эффект, что и указание speak-as: numbers.

bullets

Будет произнесена фраза или звуковой сигнал, заданные пользовательским агентом для обозначения элемента ненумерованного списка.

numbers

Числовое значение счётчика будет произнесено на языке документа.

words

Пользовательский агент создаст значение счётчика обычным образом и произнесёт его как слово на языке документа.

spell-out

Пользовательский агент создаст представление счётчика обычным образом и произнесёт его побуквенно. Если пользовательский агент не знает, как произнести определённый символ счётчика, он может произнести его так, как если бы значение speak-as было равно numbers.

<counter-style-name>

Имя другого стиля счётчика, указанное как <custom-ident>. Если оно указано, счётчик будет произнесён в форме, заданной этим стилем счётчика, примерно так же, как если бы был указан дескриптор fallback. Если указанный стиль не существует, speak-as по умолчанию принимает значение auto.

Доступность

Поддержка свойства speak-as вспомогательными технологиями очень ограничена. Не полагайтесь на него при передаче информации, критически важной для понимания назначения страницы.

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

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

Примеры

Настройка устной формы счётчика

В этом примере используется система счётчиков с нечитаемыми символами в качестве визуальных маркеров. Однако дескриптор speak-as задаёт маркеры элементов списка как числа в дереве доступности. При наличии поддержки программы экранного доступа будут произносить числа, а не визуальные маркеры.

Чтобы оценить результат применения дескриптора speak-as, воспользуйтесь вспомогательной технологией, например VoiceOver или другой программой экранного доступа, либо откройте панель доступности в инструментах разработчика браузера с поддержкой speak-as.

HTML

<ul class="list">
  <li>I had one apple</li>
  <li>I ate two bananas</li>
  <li>I devoured three oranges</li>
  <li>I am not hungry for dinner</li>
  <li>But I'll have five scoops of ice cream for dessert</li>
</ul>

CSS

@counter-style speak-as-example {
  system: fixed;
  symbols:     ;
  suffix: " ";
  speak-as: numbers;
}

.list {
  list-style: speak-as-example;
}

Результат

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

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

См. также

• Другие дескрипторы @counter-style: system, symbols, additive-symbols, negative, prefix, suffix, range, pad и fallback
• list-style, list-style-image, list-style-position
• symbols(): функциональная запись для создания анонимных стилей счётчиков.
• Модуль стилей счётчиков CSS
• Модуль списков и счётчиков CSS