WCAG 2.5.3 Подпись в имени

Критерий успеха 2.5.3 обеспечивает работу голосового управления. Люди, которые не могут пользоваться мышью или клавиатурой, часто управляют сайтом, произнося видимый текст: «нажать В корзину». Это работает, только если доступное имя элемента (то, под каким именем его знают программы) содержит видимые слова. Кроме того, пользователи программ экранного доступа (скринридеров) и их зрячие коллеги говорят об одном и том же. Это уровень A, он входит в EN 301 549 (пункт 9.2.5.3). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

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

• «Подпись» — это видимый текст, который обозначает элемент: текст кнопки, текст ссылки или текст рядом с полем формы.
• «Имя» — это доступное имя, передаваемое вспомогательным технологиям; оно может браться из текстового содержимого, <label>, aria-label или aria-labelledby.
• Рекомендация W3C: ставьте текст видимой подписи в начало имени. Дополнительные слова после него допустимы.

Элементы без видимого текста (кнопка только с иконкой) этим критерием не охватываются, хотя имя им всё равно нужно по 4.1.2.

Типичные ошибки в интернет-магазине

• кнопка с текстом «Купить» и aria-label="Приобрести товар";
• кнопка «Поиск», у которой aria-label — «Отправить запрос»;
• поле с видимой подписью «Почтовый индекс», у которого aria-label — «ZIP»;
• ссылка «Смотреть» с aria-label="Перейти к летней коллекции";
• переведённые витрины, где видимый текст переведён, а жёстко прописанный aria-label остался на английском.

Как проверить

Автоматически: наша проверка сравнивает видимый текст элементов с их доступными именами и отмечает имена, которые не содержат видимый текст (правило о несовпадении подписи и имени). В axe-core это правило помечено как экспериментальное и справляется не со всеми случаями (например, с текстом в изображениях или иконками-символами), поэтому просматривайте найденное и выборочно проверяйте вручную.

Вручную: изучите кнопки, ссылки и поля в панели доступности браузера и сравните «Имя» с тем, что видите. Или воспользуйтесь голосовым управлением (Voice Control в macOS и iOS, Voice Access в Android) и скажите «нажать» и видимый текст важных элементов.

Как исправить

• Предпочитайте видимый текст в качестве имени; добавляйте aria-label, только когда он что-то добавляет.
• Если используете aria-label, начинайте его с точного видимого текста: aria-label="В корзину – Льняная рубашка".
• Связывайте поля формы с их видимой подписью через <label for>, а не отдельным aria-label.
• Переводите значения aria-label вместе с видимым текстом.

Связанные критерии

• 2.4.6 Заголовки и подписи — подписи должны описывать назначение.
• 2.4.4 Назначение ссылки (в контексте) — текст ссылки должен говорить, куда она ведёт.
• 2.1.4 Сочетания клавиш из одного символа — ещё один критерий для пользователей голосового ввода.

Частые вопросы

Что требует WCAG 2.5.3 «Подпись в имени»?

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

Является ли aria-label проблемой для 2.5.3?

Только если он заменяет видимый текст другими словами. Кнопка с текстом «Купить» и aria-label="Приобрести этот товар" не проходит; aria-label="Купить сейчас – Льняная рубашка" содержит видимый текст и проходит.

Кому помогает подпись в имени?

В первую очередь людям, которые пользуются распознаванием речи: они говорят «нажать В корзину», и это работает, только если доступное имя содержит эти слова. Пользователи программ экранного доступа тоже слышат имя, которое совпадает с тем, что видят зрячие.