<divelopers>: “Язык документа и его частей В посте, посвящённому всемирному дню освед…”

Язык документа и его частей

В посте, посвящённому всемирному дню осведомлённости о доступности, упоминалось, что на 13.5% сайтов не задан язык документа. Радует, что это не много по сравнению с другими проблемами. Не радует, что это всё ещё 13.5%.

Исправление крайне простое: нужно задать у корневого элемента страницы <html> атрибут lang со значением, которое соответствует основному языку контента на странице в формате BCP 47.

<!-- Русский -->
<html lang="ru"></html>

<!-- Русский, Россия -->
<html lang="ru-RU"></html>

<!-- Английский -->
<html lang="en"></html>

<!-- Английский, Британия -->
<html lang="en-GB"></html>

<!-- Английский, США -->
<html lang="en-US"></html>

На этом можно было бы и закончить пост. Просто добавьте атрибут и это исправит одну из топ 6 ошибок доступности, которую обнаруживает WAVE. Но я расскажу ещё некоторые особенности и фишки вокруг языка страницы.

От языка страницы зависит отображение некоторых элементов, в частности <q>. Он предназначен для встроенных цитат и обрамляет текст в кавычки. Вид кавычек меняется в зависимости от языка (ёлочки или лапки).

Если сайт мультиязычный и хочется что-то менять в CSS в зависимости от языка, есть селектор :lang(). Он более мощный, чем селектор по атрибуту html[lang="..."] из-за масок и работы с вычисленным языком, а не значением в атрибуте.

ol:lang(en-US) > li::marker {
  /*
  Маркеры списка 1) 2) 3) для американскго английского
  */      
  content: counter(list-item) ') ';
}

ol:lang(ru, by, uk) > li::marker {
  /*
  Маркеры списка 1. 2. 3. для восточнославянских языков
  */
  content: counter(list-item) '. ';
}

На странице могут быть элементы, контент которых не соответствует основному языку страницы: цитаты, термины, названия или переключатель языка. Такие элементы также нужно пометить соответствующим атрибутом lang.

Вообще lang — глобальный атрибут и его можно указывать у любых элементов. Язык наследуется вглубь по дереву от ближайшего родителя с lang. Сам атрибут переопределяет унаследованный язык.

<html lang="ru">
  ...
  <body>
    ...
    <button
      type="button" 
      popovertarget="langs"
    >
      Язык
    </button>
    <dialog id="langs" popover>
      <ul>
        <li>
          <a
            href="/ru"
            aria-current="true"
          >
            Русский
          </a>
        </li>
        <li>
          <a
            href="/en"
            lang="en"
            hreflang="en"
          >
            English
          </a>
        </li>
        <li>
          <a
            href="/es"
            lang="es"
            hreflang="es"
          >
            Español
          </a>
        </li>
        ...
      </ul>
    </dialog> 
  </body>
</html>

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

<head>
  ...
  <link
    rel="alternate"
    href="/en/catalog"
    hreflang="en"
    lang="en"
    title="Catalog"
  >
  <link
    rel="alternate"
    href="/es/catalog"
    hreflang="es"
    lang="es"
    title="Catalogar"
  >
  ...
</head>

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

<p><span lang="fr" translate="no">Vite</span> позволяет быстро собирать <span lang="en" translate="no">frontend</span>-проекты различной сложности.</p>

#html #css #a11y