CSS-свойство speak

Примечание: Свойство speak устарело. Ни один популярный браузер его не реализует, и программы чтения с экрана не считывают его из CSS. Рассматривайте эту страницу как справочник по устаревшему коду, а для реальной доступности используйте современные техники: семантический HTML, ARIA, атрибут aria-hidden.

CSS-свойство speak определяет, будет ли — и каким образом — текст элемента воспроизводиться аурально: то есть вслух речевым синтезатором в пользовательском агенте с поддержкой звука (инструменты, на которые опираются пользователи программ чтения с экрана). Оно относится к семейству «звуковых» / «речевых» функций CSS, призванных оформлять аудиовывод так же, как обычный CSS оформляет визуальный вывод.

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

Почему это свойство появилось (и почему оно не прижилось)

Идея за speak была элегантной: так же, как display: none скрывает элемент от визуальной страницы, speak: none скрывал бы его от озвучиваемой страницы, а spell-out заставлял бы синтезатор читать строку посимвольно (удобно для аббревиатур вроде «URL» или серийных номеров).

На практике спецификация постоянно менялась — значения были разделены между CSS 2.1 и более поздним CSS Speech Module — и ни один браузер так и не реализовал его. Программы чтения с экрана работают с отрисованным DOM и деревом доступности, а не с таблицами стилей, поэтому они тоже никогда не поддерживали speak. Именно поэтому оно помечено как устаревшее: оно не имеет эффекта нигде.

Что использовать вместо него

Поскольку speak ничего не делает, используйте техники, которые вспомогательные технологии действительно поддерживают:

• Скрыть контент от всех (включая программы чтения с экрана): используйте display: none или атрибут HTML hidden. Это современный эквивалент устаревшего speak: none.
• Скрыть контент визуально, но сохранить для программ чтения с экрана: утилитарный класс «visually hidden» / «sr-only» (позиционирование за пределами экрана), чтобы кнопка только с иконкой могла объявить метку.
• Скрыть декоративный контент только от программ чтения с экрана: aria-hidden="true" на элементе.
• Прочитать что-то по буквам: надёжного способа на CSS не существует; используйте понятный текст, элемент abbr или aria-label, написанный так, как вы хотите, чтобы он произносился.

Значения

Свойство принимает шесть ключевых значений плюс два общих CSS-ключевых слова (initial, inherit). Значения none, normal и spell-out взяты из CSS 2.1; auto, never и always — из CSS Speech Module.

Синтаксис

Синтаксис CSS speak

speak: auto | normal | spell-out | none | never | always | initial | inherit;

Минимальное объявление выглядит так (в любом современном браузере оно не будет иметь никакого наблюдаемого эффекта):

.acronym {
  speak: spell-out;
}

Справочник значений

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

Ни один популярный браузер не реализует speak. Объявление разбирается, но игнорируется везде, поэтому программы чтения с экрана его никогда не получают.

Связанные свойства

• display — современный поддерживаемый способ полностью удалить элемент со страницы (и из дерева доступности).
• content — генерируемый контент, который действительно объявляется программами чтения с экрана, поэтому используйте его осторожно.
• cursor — ещё одно презентационное свойство, полностью поддерживаемое браузерами.

Практика