Для чего используется text aria?

Что такое aria-text?

aria-text — это атрибут ARIA (Accessible Rich Internet Applications), который используется для описания элементов веб-страницы способом, доступным для людей с ограничениями по зрению. Чаще всего он помогает скринридерам (программам для чтения с экрана) правильно интерпретировать содержимое страницы.

Основные применения aria-text

1. aria-label — задаёт текстовое описание элемента

Это свойство позволяет добавить текстовое описание для элемента, когда видимого текста недостаточно или его нет вообще:

// Иконка без текста
<button aria-label="Закрыть меню">
  <svg>...</svg>
</button>

// Форма поиска
<input type="search" aria-label="Поиск по статьям" />

2. aria-labelledby — связывает элемент с его текстовым описанием

Этот атрибут указывает на другой элемент (по его id), который содержит текстовое описание:

<h2 id="dialog-title">Подтверждение действия</h2>
<div role="dialog" aria-labelledby="dialog-title">
  <p>Вы уверены, что хотите удалить запись?</p>
  <button>Да</button>
  <button>Нет</button>
</div>

3. aria-describedby — добавляет дополнительное описание

Если aria-labelledby даёт название, то aria-describedby даёт более подробное объяснение:

<input type="password" aria-label="Пароль" aria-describedby="pwd-hint" />
<p id="pwd-hint">Минимум 8 символов, латиница и цифры</p>

4. aria-live — оповещает о динамических изменениях

Скринридер будет объявлять изменения в элементе в реальном времени:

<div aria-live="polite" aria-atomic="true">
  {notificationMessage}
</div>

Почему это важно для доступности

1. Люди с нарушениями зрения — скринридеры озвучивают aria-text
2. Люди с моторными нарушениями — могут полагаться на клавиатурную навигацию, которая требует правильных aria-описаний
3. Клиенты с когнитивными нарушениями — лучше понимают интерфейс через дополнительные описания
4. SEO — поисковики лучше индексируют сайты с правильной ARIA-разметкой

Примеры некорректного и правильного использования

// Неправильно - скринридер не поймёт, что это кнопка поиска
<button>
  <i class="icon-search"></i>
</button>

// Правильно - добавляем aria-label
<button aria-label="Поиск">
  <i class="icon-search"></i>
</button>

// Неправильно - aria-label дублирует видимый текст
<button aria-label="Сохранить">Сохранить</button>

// Правильно - используем текст из элемента
<button>Сохранить</button>

Когда использовать aria-text

• Когда есть значок без текста
• Когда смысл элемента неясен из его содержимого
• Для скрытого функционала (модальные окна, выпадающие меню)
• Для динамического контента, который загружается с сервера
• Для форм с условиями и подсказками

Лучшие практики

1. Используй semantic HTML — сначала <button>, <nav>, <article>, затем ARIA
2. Не дублируй — если текст уже видим, aria-label не нужен
3. Проверяй с скринридерами — используй NVDA (Windows) или VoiceOver (macOS)
4. Тестируй с реальными пользователями — помни, что специалист знает трюки
5. Следуй спецификации WAI-ARIA — документация есть на w3.org

Правильное использование aria-text улучшает доступность сайта и делает его удобным для всех пользователей.