Стандарти · WCAG 2.2

SC 2.5.3 Ниво A WCAG 2.1

Етикет в наименованието

Когато елемент за управление има видим текст, този текст трябва да се появява в началото на достъпното му наименование. В противен случай потребителите на гласово управление, казващи това, което виждат, не могат да активират елемента.

Какво се изисква

Ако на екрана пише „Изпращане на заявление”, потребителят на гласово управление трябва да може да каже „щракни Изпращане на заявление” и щракването да бъде изпълнено. Това работи само когато видимият етикет се съдържа в достъпното наименование — за предпочитане като първи думи. Ако достъпното наименование е „Изпрати формуляра”, а видимият текст е „Изпращане на заявление”, гласовата команда ще се провали мълчаливо.

WCAG изисква видимият текстов етикет да бъде част от достъпното наименование. Достъпното наименование може да съдържа повече текст (поясняващ контекст), но видимият текст трябва да присъства в него, в същия словоред.

Как да се изпълни

  • За бутони и връзки с текст не е необходимо специално действие — текстовото съдържание автоматично става достъпното наименование.
  • Когато добавяте aria-label към елемент, който вече има видим текст, включете видимия текст в началото: <button aria-label="Изпращане на заявление — отваря потвърждение">Изпращане на заявление</button>.
  • За бутони с икона и текст нека текстът формира наименованието. Не го заменяйте с aria-label само с иконата.
  • За връзки, чийто текст е „Прочетете повече”, разширете достъпното наименование с aria-label="Прочетете повече за WCAG 2.2 — пълна статия", така че видимото „Прочетете повече” да остане префикс.
  • Когато видимият етикет на елемент е изображение (икона с текст, лого), уверете се, че alt съответства точно на видимия текст.

Чести грешки

  • Бутон с надпис „Търсене” и aria-label="Намери". Гласовите потребители казват „щракни Търсене” — нищо не се случва.
  • Бутони „Добави в кошницата” с aria-label="Добави синя тениска размер M в кошницата за пазаруване" — подробно наименование, при което видимото „Добави в кошницата” вече не е префикс. Командата „щракни Добави в кошницата” не попада.
  • Бутони с икона и текст, при които дизайнерът е добавил aria-label="икона на кошница" и е заличил видимия текст „Плащане”.
  • Локализирани сайтове, в които видимият текст е преведен, но aria-label все още е на английски.
  • Плаващи бутони за действие, показващи „Чат” видимо, но носещи aria-label="Отвори помощния уиджет".

Защо има значение

Това е критерият, определящ достъпността за потребителите на гласово управление — хора, използващи Dragon NaturallySpeaking, Voice Control на iOS/macOS, Voice Access на Android или Windows Speech Recognition. За тези потребители видимият етикет е командата. Несъответствието не е незначително неудобство — то е разликата между работещо и нефункциониращо. Критерият помага и на потребителите на екранни четци, когато зрящ помощник казва „щракни бутона Запази” — обявеното съответства на думите на екрана. 2.5.3 е лесен за поправяне и лесен за пропускане, тъй като автоматизираните инструменти рядко го маркират: разработчик, четящ кода, вижда aria-label и приема, че е правилно. Винаги проверявайте достъпното наименование спрямо видимия текст.