Skip to content

Commit

Permalink
Добавляет статью про язык сайта (#4762)
Browse files Browse the repository at this point in the history 
* Добавляет доку про язык сайта

* Исправляет форматирование

* Немного редачит

* Немного меняет исключения

* Исправляет имя автора

* Успокаивает спеллер (～￣▽￣)～

* Вносит финальные правки

* Обновляет раздел

* Борется с кавычками щ(゜ロ゜щ)

---------

Co-authored-by: Tatiana Fokina <[email protected]>
  • Loading branch information
@alexTaraskina @TatianaFokina
alexTaraskina and TatianaFokina authored Oct 10, 2023
1 parent a8ac169 commit 873d8c1
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 1 deletion.
4 changes: 3 additions & 1 deletion .yaspeller.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -632,6 +632,8 @@
"юзер(а|у|ы|ов|ом|ами|е|)",
"юзкейсов",
"ютуб(а|)",
"Ѳ"
"Ѳ",
"субтег(ами|ов|и|)",
"мультиязычн(ости|ом|ого|ый|)"
]
}
1 change: 1 addition & 0 deletions a11y/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ groups:
items:
- chto-takoe-a11y
- a11y-html
- site-language
- accessible-forms
- content-hidden
- how-to-describe-pictures
Expand Down
162 changes: 162 additions & 0 deletions a11y/site-language/index.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
---
title: "Язык сайта и содержимого"
description: "Как установить язык сайта и его отдельных фрагментов, и почему это важно."
authors:
- alextaraskina
keywords:
- доступность
- a11y
- l10n
- локализация
- многоязычный сайт
related:
- a11y/aria-intro
- a11y/screenreaders
- a11y/content-hidden
tags:
- article
---

## Кратко

Как и пользователи сайта, [скринридеры](/a11y/screenreaders/) могут «разговаривать» на разных языках. Это возможно благодаря встроенному в скринридер [синтезатору речи](/a11y/screenreaders/#ustroystvo).

Чтобы скринридер определил язык и правильно произнёс текст, нужно указать основной язык сайта в атрибуте `lang` [тега `<html>`](/html/html/). В качестве значения атрибута используется так называемый «[языковой тег](/a11y/lang-attribute/#podrobnee-pro-yazykovye-tegi)». Чаще всего это двухбуквенный или трёхбуквенный код. Например, для английского языка используется код `en`, для русского — `ru`.

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

## Пример

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

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

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

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

Можем применить стили с помощью [CSS-псевдокласса `:lang`](/css/lang/) на основе языка:

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

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

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

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

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

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

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

Существует огромное множество субтегов — субтеги диалектов, написаний, регионов и прочие. Найти нужный можно в [реестре языковых субтегов](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) или с помощью [инструмента поиска языковых субтегов](https://r12a.github.io/app-subtags/).

<aside>

📌 Хорошей практикой считается определение коротких языковых тегов. Используйте более длинные теги только если это оправдано. Например, уточнение региона (`en-GB` вместо `en`) может быть полезно при использовании инструментов проверки орфографии.

</aside>

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

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

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

Основной язык должен быть определён для каждой страницы — это одно из требований соответствия базовому уровню доступности — [уровню A](/a11y/wcag-conformance-levels/#uroven-a).

Язык фрагментов с текстом на другом языке, отличном от основного, должен быть указан для соответствия [уровню доступности AA](/a11y/wcag-conformance-levels/#uroven-aa).

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

- имена собственные;
- некоторые термины — например, _Homo Sapiens_, _Alpha Centauri_;
- слова и фразы, ставшие частью языка — например, фраза «déjà vu» стала частью английского языка и корректно интерпретируется скринридерами.

</details>

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

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

Для таких фрагментов есть специальный языковой тег — `zxx`. В [реестре](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) субтег `zxx` определён как «отсутствие лингвистического содержания».

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

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

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

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

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

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

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

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

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

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

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

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

<aside>

🌐 У каждой страницы сайта есть заголовок и описание. Эти параметры задаются с помощью тега [`<title>`](/html/title/) и метатега `<description>`. Информативное описание на нужном языке подскажет поисковым системам, какую страницу нужно открывать для разных стран. Это напрямую влияет на ранжирование сайта в поисковой выдаче.

</aside>

Также нужно перевести значения некоторых [ARIA-атрибутов](/a11y/aria-attrs/):

- [`aria-label`](/a11y/aria-label/);
- [`aria-roledescription`](/a11y/aria-roledescription/);
- [`aria-placeholder`](/a11y/aria-placeholder/);
- [`aria-roledescription`](/a11y/aria-roledescription/);
- [`aria-valuetext`](/a11y/aria-valuetext/).

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

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

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

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

0 comments on commit 873d8c1

Please sign in to comment.