Enter
    Расширенный поиск
    Клавиша / esc

    Доступность

    Язык сайта и содержимого

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

    Время чтения: 6 мин

    Кратко

    Скопировано

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

    Чтобы скринридер определил язык и правильно произнёс текст, нужно указать основной язык сайта в атрибуте lang тега <html>. В качестве значения атрибута используется так называемый «языковой тег». Чаще всего это двухбуквенный или трёхбуквенный код. Например, для английского языка используется код en, для русского — ru.

    Задать язык можно не только всему документу, но и фрагменту текста. Встретив такой фрагмент, скринридер переключит языковой профиль и прочитает текст с правильным акцентом.

    Пример

    Скопировано

    Определяем основной язык веб-страницы:

            
          
          <html lang="ru">
          <html lang="ru">

    Задаём язык фрагмента. Теперь скринридер понимает, что «Lagom» надо читать на шведском, а не на русском:

            
          
          <p>  <span lang="sv">Lagom</span> — не слишком много, не слишком мало,  а так, что в самый раз.</p>
          <p>
  <span lang="sv">Lagom</span> — не слишком много, не слишком мало,
  а так, что в самый раз.
</p>

    Можем применить стили с помощью CSS-псевдокласса :lang на основе языка:

            
          
          span:lang(sv) {  color: green;}
          span:lang(sv) {
  color: green;
}

    Определение языка важно не только для правильной работы скринридеров:

    • браузер использует значение атрибута lang для выбора соответствующих языку шрифтов, формата даты и времени, разделителя десятичной части (точка или запятая);
    • видеоплееры могут отображать субтитры на соответствующем языке;
    • установленный язык используется программами автоматического перевода, такими как Google Translate, и программами для проверки орфографии.

    Подробнее про языковые теги

    Скопировано

    У одного и того же языка могут быть разные формы. Например, американский и британский английский значительно отличаются по произношению. Для определения региональных особенностей языка можем использовать более сложный языковой тег, состоящий из частей, разделённых дефисом. Эти части называются субтегами.

    В примере используем субтег языка en и субтег региона GB:

            
          
          <html lang="en-GB">
          <html lang="en-GB">

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

    Когда атрибут lang не установлен

    Скопировано

    Скринридер может использовать различные способы определения языка контента. Некоторые скринридеры могут попытаться автоматически определить язык на основе языковых настроек операционной системы. Но чаще всего будет использован тот язык, который выбран пользователем при первоначальной настройке. Этот язык может отличаться от того, который используется на нашем сайте. В итоге используется некорректный синтезатор речи и произносимый текст становится неразборчивым для пользователя.

    Для соответствия стандартам веб-доступности язык должен быть определён.

    Основной язык должен быть определён для каждой страницы — это одно из требований соответствия базовому уровню доступности — уровню A.

    Язык фрагментов с текстом на другом языке, отличном от основного, должен быть указан для соответствия уровню доступности AA.

    Некоторые фрагменты не нуждаются в переопределении языка. К исключениям относятся:

    • имена собственные;
    • некоторые термины — например, Homo Sapiens, Alpha Centauri;
    • слова и фразы, ставшие частью языка — например, фраза «déjà vu» стала частью английского языка и корректно интерпретируется скринридерами.

    Непереводимый текст

    Скопировано

    В редких случаях язык текста не определён. Это может быть программный код, идентификаторы или текст-заглушка (Lorem ipsum).

    Для таких фрагментов есть специальный языковой тег — zxx. В реестре субтег zxx определён как «отсутствие лингвистического содержания».

            
          
          <p lang="zxx">Lorem ipsum</p>
          <p lang="zxx">Lorem ipsum</p>

    Направление текста

    Скопировано

    Если язык нужно читать справа налево, например иврит или арабский, то необходимо также указать направление с помощью атрибута dir. Значения атрибута — rtl (справа налево), ltr (слева направо) или автоматически определяемый браузером auto.

            
          
          <p lang="he" dir="rtl">לחיים</p><!-- לחיים — «за жизнь», еврейское благословение или тост -->
          <p lang="he" dir="rtl">לחיים</p>
<!-- לחיים — «за жизнь», еврейское благословение или тост -->

    Атрибут dir не требуется для страниц, написанных на языках с письмом слева направо, поскольку это направление текста используется по умолчанию.

    Мультиязычный сайт

    Скопировано

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

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

    Существуют различные инструменты и библиотеки, которые помогают представить веб-страницу на определённом языке без необходимости создания нескольких копий HTML-кода. Вместо отдельных страниц используются так называемые «языковые файлы». В этих файлах содержатся переводы текстовых фрагментов на поддерживаемые языки, обычно в формате JSON. Библиотеки предоставляют разработчику методы для загрузки языковых файлов и замены текста на странице в зависимости от выбранного пользователем языка.

    Переводимые атрибуты

    Скопировано

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

    • title;
    • abbr элемента <th>;
    • alt элементов <area>, <img>, и <input>;
    • content некоторых элементов <meta>;
    • download элементов <a> и <area>;
    • label элементов <optgroup>, <option> и <track>;
    • placeholder элементов <input> и <textarea>;
    • srcdoc элемента <iframe>;
    • value элемента <input> со значением type="button" или type="reset";
    • должно быть проанализировано содержимое атрибута style. Например, в некоторых случаях нужно перевести значение CSS-свойства content.

    Также нужно перевести значения некоторых ARIA-атрибутов:

    Ссылки на другие сайты

    Скопировано

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

    В примере атрибут rel со значением alternate определяет ссылку на альтернативный источник. Значение атрибута hreflang определяет язык страницы, на которую ведёт ссылка.

            
          
          <a rel="alternate" href="" hreflang="fr">Версия на французском</a>
          <a rel="alternate" href="" hreflang="fr">Версия на французском</a>

    Читайте также