speak-as

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 очень ограничена. Не полагайтесь на неё для передачи информации, критически важной для понимания назначения страницы.

Let's Talk About Speech CSS | CSS Tricks (2017)

speak-as = 
  auto                  |
  bullets               |
  numbers               |
  words                 |
  spell-out             |
  <counter-style-name>  

В этом примере система счётчика фиксирована с использованием нечитаемых символов для визуальных маркеров. Однако описатель 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 списков и счётчиков