WCAG 3.1.1 Мова сторінки

Критерій успіху 3.1.1 дає браузерам, програмам зчитування з екрана й інструментам перекладу змогу знати, якою мовою написана сторінка. Тоді програма зчитування з екрана вибирає правильний голос і вимову, а брайлівські дисплеї й субтитри використовують правильні правила. Без цього німецьку сторінку товару можуть прочитати з англійською вимовою, і її стане важко зрозуміти. Це рівень A, і EN 301 549 містить його як пункт 9.3.1.1 (в Україні — ДСТУ EN 301 549:2022).

Що вимагає критерій

Основна мова кожної вебсторінки має бути програмно визначуваною — програми мають могти прочитати її з коду. У HTML для цього використовують атрибут lang на елементі <html>, наприклад <html lang="pl">.

Коли сторінка містить кілька мов, мовою за замовчуванням є та, якої найбільше. Якщо двох мов однаково, це та, що вжита першою. Винятків критерій не має, але він вимагає лише мови сторінки за замовчуванням; окремі фрази іншими мовами регулює 3.1.2.

Типові помилки в інтернет-магазині

• у шаблоні теми зовсім немає атрибута lang;
• кожна мовна версія магазину каже lang="en", бо атрибут жорстко прописано в темі;
• недійсне значення, як-от lang="english" чи lang="ua" (код української — uk);
• lang і xml:lang на тому самому елементі вказують різні мови;
• сторінки оформлення замовлення чи акаунта, що їх видає інший застосунок чи шаблон, який забуває про атрибут.

Як перевірити

Автоматично: наш сканер перевіряє це на кожній просканованій сторінці правилами html-has-lang, html-lang-valid і html-xml-lang-mismatch: відсутній атрибут, значення, яке не є дійсним кодом мови, і розбіжність між lang та xml:lang.

Вручну: відкрийте кожну мовну версію магазину й перегляньте код сторінки (або панель Elements в інструментах розробника). Переконайтеся, що значення lang відповідає мові, якою справді читають відвідувачі. Зробіть те саме для сторінок оформлення замовлення, акаунта й довідки, які часто використовують інші шаблони.

Як виправити

• Додайте lang до елемента <html> у макеті теми, використовуючи дійсний код мови (en, de, pl, uk, cs, ro…). Регіональний підтег на кшталт en-GB дозволений, але не обов'язковий.
• У багатомовних магазинах виводьте значення з поточної мови магазину, а не прописуйте його жорстко. Теми Shopify, WooCommerce і PrestaShop зазвичай мають для цього змінну.
• Перевірте, що застосунки й сторонні сторінки оформлення замовлення теж задають атрибут.

Пов'язані критерії

• 3.1.2 Мова частин вмісту — фрази іншою мовою всередині сторінки.
• 2.4.2 Заголовок сторінки — ще одне налаштування рівня сторінки, яке перевіряють на кожній сторінці.
• Чек-лист WCAG 2.2 — усі критерії рівнів A і AA в одному списку.

Часті запитання

Як виконати WCAG 3.1.1?

Задайте атрибут lang на елементі html з основною мовою сторінки, наприклад lang="de" для німецької сторінки. Кожна мовна версія магазину має оголошувати власну мову.

А якщо на сторінці дві мови?

Мова за замовчуванням — та, якої на сторінці найбільше. Уривки іншою мовою регулює 3.1.2 «Мова частин вмісту».

Чи може автоматичний сканер перевірити 3.1.1?

Здебільшого так. Він бачить, чи атрибут lang відсутній або недійсний. Але він не може визначити, чи оголошена мова — це та мова, якою справді написано текст, тож на це варто глянути людині.