lang

Атрибут lang global attribute помогает определить язык элемента: язык, на котором написаны нередактируемые элементы, или язык, на котором пользователи должны написать редактируемые элементы. Атрибут содержит единственный «языковой тег» в формате, определенном в RFC 5646: теги для идентификации языков (также известный как BCP 47).

Если значение атрибута — пустая строка (lang=""), язык установлен как неизвестный; если языковой тег не соответствует BCP47, он установлен как недействительный.

Даже если атрибут lang задан, он может не учитываться, так как атрибут xml:lang имеет приоритет.

Для псевдокласса CSS :lang, два недействительных имени языка различаются, если их имена различны. Итак, в то время как :lang(es) соответствует как lang="es-ES", так и lang="es-419", :lang(xyzzy) не будет соответствовать lang="xyzzy-Zorp!".

Полный синтаксис BCP47 достаточно подробен, чтобы отмечать чрезвычайно специфические диалекты языка, но большинство случаев использования гораздо проще.

Языковой тег состоит из разделенных дефисом подтегов языка, где каждый подтег указывает определенное свойство языка. Три наиболее распространенных подтега:

Подтег языка

Обязательный. 2- или 3-символьный код, определяющий основной язык, обычно написанный строчными буквами. Например, языковой код для английского языка — en, а для бадеши — bdz.

Подтег сценария

Необязательный. Этот подтег определяет систему письма, используемую для языка, и всегда имеет длину 4 символа, при этом первая буква заглавная. Например, французский язык в Брайле — fr-Brai, а ja-Kana — это японский язык, написанный катаканой. Если язык написан по общепринятому способу, например, английский язык латинским алфавитом, нет необходимости использовать этот подтег.

Подтег региона

Необязательный. Этот подтег определяет диалект основного языка из определенного места и имеет длину либо 2 буквы, соответствующие коду страны, либо 3 цифры, соответствующие не-страновому региону. Например, es-ES — это испанский язык, используемый в Испании, а es-013 — испанский язык, используемый в Центральной Америке. «Международный испанский язык» будет просто es.

Подтег сценария предшествует подтегу региона, если оба присутствуют — ru-Cyrl-BY — русский язык, написанный кириллицей, используемый в Белоруссии.

Чтобы найти правильные коды подтегов для языка, попробуйте Language Subtag Lookup.

Критерий успеха WCAG 3.1.1 требует указания языка страницы таким способом, который может быть «определен программно» (т.е. через атрибут lang).

Критерий успеха WCAG 3.1.2 требует, чтобы на страницах с частями на разных языках были указаны языки этих частей. Снова, атрибут lang — это правильный механизм для этого.

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

Например, меню языка на этом сайте (MDN) включает атрибут lang для каждой записи:

<div class="dropdown-container language-menu">
  <button
    id="header-language-menu"
    type="button"
    class="dropdown-menu-label"
    aria-haspopup="true"
    aria-owns="language-menu"
    aria-label="Current language is English. Choose your preferred language.">
    English
    <span class="dropdown-arrow-down" aria-hidden="true">▼</span>
  </button>
  <ul
    id="language-menu"
    class="dropdown-menu-items right show"
    aria-expanded="true"
    role="menu">
    <li lang="ca" role="menuitem">
      <a href="/ca/docs/Web/HTML/Global_attributes/lang" title="Catalan">
        <bdi>Català</bdi>
      </a>
    </li>
    <li lang="de" role="menuitem">
      <a href="/de/docs/Web/HTML/Globale_Attribute/lang" title="German">
        <bdi>Deutsch</bdi>
      </a>
    </li>
    <li lang="es" role="menuitem">
      <a href="/es/docs/Web/HTML/Atributos_Globales/lang" title="Spanish">
        <bdi>Español</bdi>
      </a>
    </li>
    <li lang="fr" role="menuitem">
      <a href="/fr/docs/Web/HTML/Attributs_universels/lang" title="French">
        <bdi>Français</bdi>
      </a>
    </li>
    <li lang="ja" role="menuitem">
      <a href="/ja/docs/Web/HTML/Global_attributes/lang" title="Japanese">
        <bdi>日本語</bdi>
      </a>
    </li>
    <li lang="ko" role="menuitem">
      <a href="/ko/docs/Web/HTML/Global_attributes/lang" title="Korean">
        <bdi>한국어</bdi>
      </a>
    </li>
    <li lang="pt-BR" role="menuitem">
      <a
        href="/pt-BR/docs/Web/HTML/Global_attributes/lang"
        title="Portuguese (Brazilian)">
        <bdi>Português (do&nbsp;Brasil)</bdi>
      </a>
    </li>
    <li lang="ru" role="menuitem">
      <a href="/ru/docs/Web/HTML/Global_attributes/lang" title="Russian">
        <bdi>Русский</bdi>
      </a>
    </li>
    <li lang="uk" role="menuitem">
      <a
        href="/uk/docs/Web/HTML/%D0%97%D0%B0%D0%B3%D0%B0%D0%BB%D1%8C%D0%BD%D1%96_%D0%B0%D1%82%D1%80%D0%B8%D0%B1%D1%83%D1%82%D0%B8/lang"
        title="Ukrainian">
        <bdi>Українська</bdi>
      </a>
    </li>
    <li lang="zh-Hans" role="menuitem">
      <a
        href="/zh-CN/docs/Web/HTML/Global_attributes/lang"
        title="Chinese (Simplified)">
        <bdi>中文 (简体)</bdi>
      </a>
    </li>
    <li>
      <a
        href="/en-US/docs/Web/HTML/Global_attributes/lang$locales"
        rel="nofollow"
        id="translations-add">
        Add a translation
      </a>
    </li>
  </ul>
</div>

• Все глобальные атрибуты.
• Content-Language HTTP заголовок
• HTML атрибут translate