Использование CSS для управления преобразованием текста в речь
При использовании программы чтения с экрана / преобразования текста в речь для чтения текста вслух веб-сайты часто звучат как старинные научно-фантастические роботы.
Хотя для этого могут быть веские основания, поскольку такой тон голоса легче понять при воспроизведении на двойной или тройной скорости, это справедливо и для других манер речи.
Ученые, актеры или оперные певцы используют преувеличенную артикуляцию, чтобы облегчить понимание. Другой пример - классическая радиореклама, где часто говорят быстрым, высокочастотным и чрезмерно возбужденным голосом, чтобы передать эмоции и большой объем информации за несколько секунд времени.
Как звучит ваш веб-сайт?
В своем докладе "Эксклюзивный дизайн", опубликованном на конференции Tellerrand 2022, Василис ван Гемерт доказал, что придать индивидуальность своему сайту можно с помощью простых стихов или восклицательных выражений в ALT-атрибутах, например "boing boing".
Голосовое управление CSS
Мы можем использовать CSS для объявления различных голосов так же, как мы используем CSS для объявления семейств шрифтов и типографских деталей. Так, в разделе "Вопросы и ответы" можно сделать так, чтобы один голос спрашивал, а другой отвечал на вопросы.
Синтаксис кода пока находится на ранней стадии разработки, поэтому он может измениться до появления поддержки браузерами, но текущая рекомендация (CSS Speech Module Level 1) выглядит довольно похоже на типографику:
selector {
voice-family: female;
voice-pitch: medium;
}Поскольку это свойство все еще является экспериментальным, на момент написания данной статьи stylelint еще не распознает его, поэтому давайте явно отключим правило property-no-unknown только там, где мы его используем, добавив комментарий stylelint-disable, и снова включим его после этого.
selector {
/* stylelint-disable property-no-unknown */
voice-family: female;
voice-pitch: medium;
voice-stress: moderate;
voice-rate: fast;
voice-volume: soft;
pause-after: strong;
voice-balance: left;
/* stylelint-enable property-no-unknown */
}Примерно так же, как мы поступаем с некоторыми другими полезными стилями, которые стали общепринятыми, но пока не являются стандартными, например, оптимизация читаемости текста, а не оптимизация скорости рендеринга.
selector {
/* stylelint-disable-next-line value-keyword-case */
text-rendering: optimizeLegibility;
}В целом, некоторые из наших базовых стилей могут выглядеть следующим образом.
html, body, main {
background-color: var(--color-primary-background);
color: var(--color-primary-foreground);
font-family: var(--font-family-default);
font-weight: var(--font-weight-regular);
/* stylelint-disable-next-line value-keyword-case */
text-rendering: optimizeLegibility;
font-size: var(--font-size-16);
line-height: 100%;
/* prepare voice settings according to CSS speech draft */
/* stylelint-disable property-no-unknown */
voice-family: female;
voice-pitch: medium;
voice-stress: moderate;
voice-rate: fast;
voice-volume: soft;
pause-after: strong;
voice-balance: left;
/* stylelint-enable property-no-unknown */
}
