Свойство Връзка

`aria-label`

Предоставя достъпно наименование като низ, когато няма видим текст. Използвайте само когато липсва екранен надпис — ако видим текст съществува, предпочете aria-labelledby, за да съвпадат произнесеното наименование и видяното от потребителя.

Кога да се използва

Когато даден контрол няма видим текст — бутони само с икона, полета за търсене с единствено лупа, бутони за затваряне (×), икони за социални мрежи. Низът, поставен в aria-label, се превръща в достъпното наименование на елемента, а екранните четци го обявяват вместо евентуален вътрешен текст.

Естественият HTML еквивалент е елементът <label> за полета на форми или видимият текст на бутона. Прибягвайте до aria-label само когато нито едно от тези решения не е приложимо.

Как работи

Приема единичен низ. Каквото е поставено в aria-label, замества всеки видим текст в елемента — достъпното наименование е това, което потребителите на помощни технологии чуват, но е невидимо за зрящите. Тази асиметрия е основният източник на грешки при използването на атрибута.

Низът не се превежда автоматично. Ако сайтът поддържа множество езици, стойността на aria-label трябва да бъде локализирана като всеки друг низ от потребителския интерфейс. Екранните четци третират стойността като обикновен текст — без HTML, без нови редове, без маркиране.

Ако елементът съдържа видим текст, предпочитайте aria-labelledby, насочен към този текст, за да останат видимият надпис и достъпното наименование синхронизирани.

Чести грешки

Поставяне на aria-label="Натиснете тук" върху бутон, чийто видим текст е „Изпрати поръчка” — видимият текст се скрива от помощните технологии и потребителят чува грешната информация.
Нарушаване на WCAG 2.5.3 Надпис в наименованието: aria-label="Изпрати" върху бутон с видим текст „Изпрати поръчка” означава, че потребителят на гласово управление не може да каже „щракни Изпрати поръчка”, за да го активира.
Добавяне на aria-label към неинтерактивен елемент като <div> или <span> — повечето браузъри го игнорират, тъй като елементът няма роля, поддържаща наименование.
Оставяне на непреведена стойност, когато останалата страница е на друг език.
Използване на aria-label вместо истински <label> за поле на форма, с което се губи възможността за фокусиране на полето чрез щракване върху надписа.
Поставяне на инструкции в aria-label вместо в aria-describedby. Наименованието трябва да е кратко; помощният текст се поставя в описанието.

Пример

<!-- Icon-only button: no visible text, aria-label is required -->
<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- Visible text + icon: do NOT use aria-label here -->
<button type="button">
  <svg aria-hidden="true" focusable="false">…</svg>
  Close dialog
</button>