Смена языка в русской статье: как разметить английскую фразу
Если русская страница содержит целую английскую фразу, добавьте к этому фрагменту корректный HTML-атрибут lang: он сообщает браузеру и вспомогательным технологиям, на каком языке следует интерпретировать текст. Это может улучшить произношение экранного диктора и выбор правил отображения. Латинские буквы сами по себе не определяют язык, поэтому сначала решите, является ли вставка английским высказыванием, именем или техническим обозначением.
Почему латинских букв недостаточно
Символы латинского письма встречаются в десятках языков. Строка menu может быть английским словом, частью названия бренда или французским заимствованием; resume без контекста может означать разные вещи. По начертанию браузер не узнает, какое произношение ожидалось автором. Для русского абзаца по умолчанию выбран русский язык, поэтому незамеченная английская фраза иногда озвучивается русскими правилами.
Проблема касается не только диктора. Языковая метка помогает пользовательскому агенту применять к фрагменту языковые настройки и может быть значима для типографической обработки. При этом lang не меняет текст, не переводит его и не гарантирует конкретный голос: доступность и качество переключения зависят от браузера, экранного диктора и установленных голосовых пакетов.
Успешная визуальная проверка шрифта тоже не подтверждает правильность языка. Буквы могут выглядеть нормально, хотя произносятся непривычно; обратная ситуация также возможна. Разделяйте три вопроса: правильно ли записаны символы, применился ли ожидаемый шрифт и распознал ли интерфейс язык фразы.
Что именно сообщает lang
В HTML значение lang задаёт основной человеческий язык содержимого элемента и наследуется его потомками. Если корневой документ на русском, укажите язык страницы один раз на элементе html, например lang="ru". Затем оборачивайте отдельные англоязычные предложения или устойчивые фразы элементом с lang="en".
<html lang="ru">
<p>Чтобы продолжить, выберите <span lang="en">Create account</span>.</p>
</html>В этом примере метка применяется к целой фразе, а не к каждой букве. Если английский текст занимает отдельный абзац или заголовок, поставьте lang прямо на этот элемент. Такой код читается яснее, чем множество вложенных span, и проще проверяется при изменениях.
Код языка должен соответствовать реальному содержимому. Для английского обычно достаточно en; уточнение региона, например en-GB или en-US, используйте, когда вариант действительно важен для произношения, орфографии или продукта. Не добавляйте регион только потому, что он выглядит точнее: неверная метка вводит в заблуждение, а поддержка расширенных тегов может различаться между программами.
Сначала определите, что является сменой языка
Не всякая латинская вставка требует отдельной метки. WCAG 2.2, критерий 3.1.2 уровня AA, требует, чтобы язык каждого фрагмента или фразы можно было определить программно, с исключениями для имён собственных, технических терминов, слов неопределённого языка и выражений, вошедших в обычную речь окружающего языка. Это правило помогает сосредоточиться на настоящей смене языка, а не размечать каждое слово с латинскими буквами.
Рассмотрите четыре случая:
- Полное предложение на английском. Укажите
lang="en"на абзаце или предложении. Смена языка очевидна и важна для озвучивания. - Английская команда интерфейса. Если пользователь должен произнести или услышать фразу именно по-английски, выделите её как отдельный языковой фрагмент.
- Название продукта или человека. Имя собственное обычно не обязано иметь отдельную метку по критерию WCAG. Но если ожидаемое произношение существенно, явное указание исходного языка может помочь; проверьте, как оно работает в выбранном интерфейсе.
- Привычное заимствование или термин. Слово, давно употребляемое как часть русской речи, часто лучше оставить в языке страницы. Автоматическая смена голоса на одном знакомом слове может сделать чтение менее естественным.
Контекст важнее алфавита. Не размечайте как английский серийный номер AB-204, адрес электронной почты, CSS-класс или короткое сочетание API, если это служебный идентификатор, а не английская фраза. Для технического фрагмента используйте подходящую семантическую разметку, например code, и отдельно решайте, есть ли у содержащегося внутри текста язык естественной речи.
Как пройти проверку от текста до браузера
1. Найдите реальные переключения языка
Возьмите страницу, где русский текст перемежается командами, именами, цитатами или целыми английскими фразами. Выпишите только те фрагменты, которые автор действительно считает английской речью. Сохраните пунктуацию и пробелы вокруг них: корректная метка не должна захватывать русское пояснение по соседству.
Например, в предложении «Нажмите Save, чтобы сохранить изменения» Save может быть подписью кнопки, а не предложением на английском. Решение зависит от сценария: если интерфейс кнопки действительно англоязычный и название должно звучать по-английски, разметьте именно подпись; если это общий термин из русской инструкции, оставьте его в языке страницы. Зафиксируйте принятую политику для одинаковых случаев.
2. Поставьте метку на минимально достаточный фрагмент
Выбирайте элемент, который включает полную английскую фразу и не захватывает русский текст. Не нужно дробить фразу по словам или символам: один контейнер сохраняет её как связное высказывание. Если внутри фразы есть имя продукта, обычно оставьте его в том же языковом контейнере, если оно произносится в рамках английского предложения.
<p>В письме появится сообщение <q lang="en">Your changes have been saved.</q></p>Для длинной вставки удобнее отдельный абзац; для одного выражения — span, q или другой элемент, который подходит по смыслу. Атрибут языка не заменяет семантическую разметку цитаты, кнопки или кода.
3. Проверьте наследование и вложенные участки
Язык наследуется от ближайшего предка с указанным значением. Если английский раздел содержит отдельную русскую цитату, локально задайте ей lang="ru". Это снижает риск того, что языковая настройка раздела случайно распространится на перевод или комментарий. При смене языка в компоненте проверьте не только видимую страницу, но и всплывающие подписи, текст кнопок и доступные имена элементов.
4. Сверьте метку с самим текстом
Убедитесь, что код языка написан правильно и соответствует фразе. Затем проверьте, что HTML-фрагмент попал в итоговый DOM, а не исчез при сборке, очистке содержимого или динамической подстановке. В редакторе браузера можно выделить текст и посмотреть родительские элементы. Проверьте страницу после клиентской навигации и открытия модального окна: язык должен задаваться и для текста, добавленного позднее.
5. Прослушайте несколько сценариев
Используйте комбинацию браузера и экранного диктора, которой пользуются ваши читатели, и проверьте целую последовательность: русский абзац, английская фраза, русский текст после неё. Слушайте не только произношение самой вставки, но и то, вернулся ли диктор к русскому для следующего фрагмента. Если голос не переключился, проверьте доступность английского голоса, корректность тега и настройки конкретной программы.
Не делайте вывод только по звуку одного средства. W3C отмечает, что объявленные языковые изменения могут не отражаться в отдельных комбинациях вспомогательных технологий и доступных имён. При аудите сначала убедитесь, что язык правильно представлен в DOM и дереве доступности, а затем зафиксируйте результат прослушивания вместе с браузером и диктором.
Как проверить шрифт отдельно от языка озвучивания
Языковая метка не подтверждает, что выбранный шрифт содержит все нужные латинские символы. Проверьте буквенное покрытие и знаки пунктуации в самой английской фразе, затем убедитесь, что браузер действительно использует нужное семейство, а не подставляет резервный шрифт. Сравните строку в контексте русского абзаца и отдельно: так заметнее разница в высоте, насыщенности и ширине.
Проведите две независимые проверки:
1. Визуальная: глифы присутствуют, акценты на месте, латинская вставка не выпадает из выбранного рисунка, а смешанный абзац остаётся читаемым. 2. Языковая: у страницы и каждого настоящего англоязычного фрагмента правильные значения lang; экранный диктор и другие применяемые средства получают ожидаемые языковые данные.
Если меняется форма букв при переходе от русского к английскому, исследуйте настройку и обработку шрифта отдельно. Если буквы выглядят одинаково, это не означает, что метка языка бесполезна. И наоборот: правильно заданный lang не исправит отсутствующий глиф или некорректный файл шрифта.
Частые ошибки
- Считать любой латинский фрагмент английским. Латиницей записывают много языков, транслитерацию, имена и идентификаторы. Метка должна описывать язык текста, а не тип букв.
- Оборачивать в
lang="en"одно слово без контекста. Знакомое заимствование может естественно произноситься по-русски, а отдельное переключение голоса ухудшит плавность чтения. - Ставить язык только на картинке или в стилях. CSS не задаёт надёжную языковую идентичность для вспомогательных технологий; отметьте реальный текст в HTML.
- Распространять язык вставки на всё предложение. Русское пояснение после английской команды тогда тоже будет озвучиваться по-английски.
- Считать тест одним экранным диктором окончательным доказательством. Результат зависит от сочетания браузера, диктора, настроек и голосовых модулей. Проверяйте разметку отдельно от воспроизведения.
- Использовать слишком длинное значение языка для большей точности. Уточняйте вариант лишь при реальной необходимости и проверяйте поддержку в выбранных средствах.
Чек-лист перед выпуском
- На странице указан основной язык документа.
- Найдены реальные фразы, написанные на другом языке, а не просто латиницей.
- Для каждой вставки принято последовательное решение: выделять её или считать частью русского употребления.
- Атрибут
langпокрывает всю фразу и не захватывает соседнее русское пояснение. - Значение языка соответствует тексту; вложенные участки проверены на наследование.
- Динамически создаваемые компоненты сохраняют языковую метку.
- Английский текст проверен в DOM и дереве доступности.
- Озвучивание прослушано как минимум в целевом пользовательском сочетании браузера и диктора.
- Покрытие и внешний вид латинских глифов проверены отдельно от языковой озвучки.
- Записаны браузер, экранный диктор, настройки голоса и результаты проверки, чтобы повторить её после обновления.
Частые вопросы
Нужно ли ставить lang="en" на каждое английское слово в русской статье?
Нет. Сначала определите, является ли слово самостоятельной английской фразой или частью привычной русской речи. WCAG предусматривает исключения, в том числе для заимствований, имён и технических терминов. Выделяйте смену языка там, где она действительно влияет на понимание или произношение.
Поможет ли lang экранному диктору автоматически переключить голос?
Атрибут предоставляет языковые сведения, которые браузер и вспомогательная технология могут использовать при выборе правил произношения. Он не устанавливает голос и не гарантирует переключение: английский голос может отсутствовать, а конкретное сочетание программ может обрабатывать метку иначе. Проверяйте код и звучание отдельно.
Какой тег использовать для английского текста?
Часто достаточно короткого тега en. Уточнение вроде en-GB или en-US оправдано, если выбранный вариант языка важен для проекта. Используйте теги последовательно и сверяйте их с актуальными правилами идентификации языков.
Нужно ли размечать название бренда латиницей?
Имя собственное обычно входит в исключения WCAG и не всегда требует отдельной языковой метки. Но если важно передать ожидаемое произношение, явный тег источника может улучшить результат. Проверьте его на реальном экранном дикторе и не предполагайте, что написание названия однозначно указывает язык.
Если шрифт правильно показывает английскую фразу, нужна ли метка?
Да, если фраза действительно написана на английском и пользовательский агент должен знать её язык. Визуальная форма говорит о глифах и применённом шрифте, но не сообщает экранному диктору, по каким языковым правилам озвучить текст.
Где проверить соответствие требованиям доступности?
Начните с WCAG 2.2, критерия 3.1.2 «Язык частей», и разъяснения W3C к нему. Проверяйте наличие языка в разметке и реальное поведение в поддерживаемых комбинациях браузера и вспомогательной технологии; один автоматический валидатор не заменяет проверку сценария чтения.
Итог
В русском тексте языковая граница определяется смыслом фрагмента, а не латинским алфавитом. Отмечайте целые английские фразы подходящим lang, сохраняйте русский язык у окружающего текста и отдельно проверяйте озвучивание и покрытие шрифта. Подготовьте смешанную строку для своей страницы, проверьте её вместе с реальной сборкой шрифта в Fontgenerator и пройдите короткий аудиотест до публикации.