← Блог · · Команда ConvertCaseHQ · 7 мин чтения

Заглавные буквы и доступность: почему текст капсом хуже читается

Заглавные буквы уместны в подписи из двух слов и плохо подходят для всего, что длиннее. Длинные фрагменты капсом читаются медленнее, в них теряется информация, которую несёт обычный регистр (в английском «US» — это страна или «us», то есть «нас»?), а скринридеры в основном не обращают внимания на регистр: задуманный акцент пропадает, зато отдельные короткие слова зачитываются по буквам. Доступный подход — писать текст в обычном регистре, а там, где дизайну действительно нужны заглавные, задавать их через CSS, хотя и этот способ не безупречен.

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

Исследователи сравнивают чтение текста заглавными и строчными буквами уже почти столетие. Статья Кевина Ларсона для Microsoft «The Science of Word Recognition» («Наука распознавания слов») обобщает исследования начиная с работы Вудворта 1938 года: фрагменты, набранные строчными, читатели проходили на 5–10 процентов быстрее, чем те же фрагменты заглавными.

Популярное объяснение — «форма слова»: у слов из строчных букв узнаваемые очертания благодаря верхним и нижним выносным элементам, а заглавные превращают каждое слово в прямоугольник. Ларсон считает, что данные этого не подтверждают. Мы узнаём слова по буквам, а строчные выигрывают в основном потому, что на них мы и тренируемся. Люди, которым приходится много читать заглавными, начинают читать их быстрее.

Это полезная поправка, но абзац заглавными на вашем сайте она не спасает. У ваших читателей такой тренировки не было, и сильнее всего это бьёт по тем, кому чтение и так даётся с трудом. На странице MDN о text-transform предупреждают, что большие фрагменты текста в верхнем регистре «may be difficult for people with cognitive concerns such as Dyslexia to read» (могут быть трудны для чтения людям с когнитивными особенностями, например с дислексией). Руководство по стилю GOV.UK показывает это на собственном примере: «DO NOT USE BLOCK CAPITALS FOR LARGE AMOUNTS OF TEXT AS IT'S QUITE HARD TO READ.» (Не набирайте большие объёмы текста заглавными: так его довольно трудно читать.)

Заглавные буквы стирают информацию

Смешанный регистр — не украшение. Заглавная буква сообщает, что слово — это имя, аббревиатура или начало предложения. Прочитайте эту английскую фразу и заметьте, сколько приходится угадывать:

PLEASE CONTACT US ABOUT POLISH ORDERS IN MARCH. NASA SAYS HI.

Соединённые Штаты (US) или «нас» (us)? Клиенты из Польши (Polish) или полироль для мебели (polish)? Месяц март (March) или марш протеста (march)? Если текст уже набран капсом, программа тоже не восстановит ответ. Пропустите эту строку через «Регистр предложения» (Sentence case) в нашем конвертере регистра, и получите «Please contact us about polish orders in march. Nasa says hi.» Конвертер переводит всё в нижний регистр и делает заглавной первую букву каждого предложения: больше он знать не может. Имена придётся вернуть вручную.

Что скринридеры делают с текстом заглавными

Чаще всего ничего. Скринридеры произносят слова и не сообщают об их регистре. В 2022 году консультант по доступности Адриан Розелли проверил юридический текст, набранный заглавными, в JAWS, NVDA, Narrator, Orca, VoiceOver и TalkBack с настройками по умолчанию, и ни одна из программ не сообщила слушателю, что текст набран заглавными. Такие опции, как изменение высоты голоса в NVDA или «say cap», рассчитаны на перемещение по тексту посимвольно, а не на чтение предложений вслух.

Отсюда два следствия:

  • Заглавные, которые несут смысл, теряются. Если заглавными вы говорите «это важно» (предупреждение, пункт договора, слово, которое выкрикивают), слушатель слышит обычный текст. Исключение — читатели шрифта Брайля: в брайле есть знак заглавной буквы.
  • Некоторые короткие слова зачитываются по буквам. Синтезатор речи пытается угадать, не аббревиатура ли перед ним, когда видит несколько заглавных подряд. Розелли называет «AM», «ADD» и «IT» среди слов, которые скринридеры часто произносят по буквам, если они набраны заглавными, а специалисты рассказывали, как «CONTACT US» превращалось в «contact U.S.» (то есть «связаться с США»).

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

Никогда не имитируйте разрядку пробелами

Заглавные с увеличенными интервалами между буквами — популярный дизайнерский приём, и набирать их как S A L E — худший способ добиться такого вида. Скринридеры прочитают каждую букву отдельно, а WCAG относит «using white space characters to control spacing within a word» (использование пробельных символов для управления интервалами внутри слова) к ошибкам (техника F32). Используйте CSS-свойство letter-spacing, как в примере ниже.

Используйте CSS text-transform: uppercase вместо набора заглавными

Если кнопка, вкладка или небольшой заголовок должны выглядеть набранными заглавными, напишите текст в обычном регистре и позвольте CSS изменить его внешний вид:

<button class="caps">Add to basket</button>

.caps {
  text-transform: uppercase;
  letter-spacing: 0.06em; /* capitals need a little extra room */
}

В HTML текст остаётся «Add to basket», и это даёт несколько преимуществ:

  • Редизайн обходится дёшево. Чтобы потом отказаться от заглавных, достаточно поменять одну строку CSS, а не перебирать все подписи и файлы переводов.
  • Текст хорошо переносится. В ленты, экспорт и любые места, куда не дотягиваются ваши стили, слова попадают в правильном регистре.
  • Языковые правила браузер учтёт сам. Браузеры применяют правила языка, указанного в атрибуте lang. Они перечислены в справочнике MDN по text-transform: например, греческие гласные в верхнем регистре теряют знаки ударения, а в турецком строчной i соответствует заглавная İ. С CSS греческий текст в исходнике сохраняет ударения, а у набранных вручную заглавных они пропали бы навсегда.

Но не стоит переоценивать этот способ. Браузеры могут передавать вспомогательным технологиям уже преобразованный текст. В баге WebKit, заведённом в 2016 году и до сих пор открытом, описано, как VoiceOver читает кнопку «Add to Cart», оформленную заглавными, как «A D D to cart», и разработчики сообщали о том же с VoiceOver в Chrome. К тому же заглавные через CSS остаются заглавными для зрячих читателей, так что длинные фрагменты легче читаться не станут. Считайте text-transform правильным способом сделать заглавными несколько слов, а не разрешением набирать ими целые абзацы.

Когда заглавные уместны и чем их заменить

Заглавные не запрещены. В WCAG нет критерия успеха, направленного против них, а короткие фрагменты почти не создают проблем. Мы оставляем их в таких случаях:

  • Настоящие аббревиатуры, например NASA, HTML и BBC.
  • Короткие подписи, вкладки и небольшая строка-«надзаголовок» над заголовком. Наше эмпирическое правило: не больше трёх слов и только через CSS.
  • Одно слово на бейдже, например «New», если ничего не зависит от того, услышат ли его как что-то особенное.

Для всего остального выбирайте то, что переживёт смену стилей и чтение вслух:

  • Акцент: используйте <strong> и оформляйте его насыщенностью или размером шрифта. Большинство скринридеров по умолчанию не сообщают и о полужирном начертании, поэтому вкладывайте важное в сами слова: фраза «Это действие нельзя отменить» скажет больше любого форматирования.
  • Предупреждения: короткий понятный заголовок («Удаление аккаунта удалит все ваши файлы») делает то, чего пытался добиться блок заглавных, и его озвучат.
  • Юридические тексты: в американских договорах отказ от гарантий часто набирают заглавными, потому что Единый торговый кодекс США (Uniform Commercial Code) требует, чтобы он был «conspicuous» (заметным). Определение этого термина в кодексе не требует заглавных в основном тексте документа: подходят и более крупный шрифт, и шрифт, гарнитура или цвет, контрастирующие с остальным текстом, и пометки, выделяющие текст. Прежде чем что-то менять, посоветуйтесь с тем, кто составляет ваши условия, но заглавные — не единственный путь.

Декоративная «капитель» из Unicode — вовсе не заглавные

В нашем генераторе Unicode-шрифтов есть стиль «Капитель», и стоит честно сказать, что он выдаёт. Введите «Sale on now» — и получите «sᴀʟᴇ ᴏɴ ɴᴏᴡ». Это не уменьшенные буквы, а другие символы, в основном позаимствованные из фонетических алфавитов. У некоторых букв нет варианта в виде капители, поэтому «s» остаётся обычной строчной s, а «q» превращается в «ǫ» — o с огонэком.

Для программ это посторонние символы, поэтому проверка орфографии обычно их подчёркивает, а поиск по обычному слову может их не найти. Скринридеры обрабатывают похожие символы очень непоследовательно: когда тестировали аналогичные «псевдожирные» буквы, некоторые скринридеры полностью пропускали такие слова. Этот тест подробно разобран в нашем руководстве о том, как писать для скринридеров. Используйте такие стили для украшения рядом с обычным текстом и никогда — для слов, которые кому-то нужно услышать.

Короткий чек-лист по заглавным

  • Набирайте текст в обычном регистре, а заглавные задавайте через text-transform.
  • Ограничивайте заглавные несколькими словами. Никогда — целым абзацем.
  • Добавляйте заглавным немного letter-spacing и никогда не используйте для этого пробелы.
  • Вкладывайте смысл в слова, а не в форматирование.
  • Перед запуском прослушайте ключевые кнопки и подписи в VoiceOver и NVDA.
  • Не используйте похожие на буквы символы Unicode там, где важно содержание.

О том, где заглавным действительно место в тексте, от аббревиатур до юридических заголовков, читайте в нашем руководстве о том, когда использовать верхний регистр.

Мы используем файлы cookie для аналитики и рекламы. Вы можете принять или отклонить необязательные cookie.