← На главную

Не вешайте aria-label на div и span — браузеры игнорируют

22.05.2026 15:21 · hackernews

Не вешайте aria-label на обычные div и span — это почти никогда не работает. По спецификации ARIA (раздел 5.2.8.6 «Name prohibited») generic-роль, которая по умолчанию стоит у div и span, вообще не может иметь имя. Но даже если отбросить теорию, браузеры и скринридеры ведут себя по-разному и непредсказуемо.

Автор проверил три варианта: <div aria-label="News">, <span aria-label="News"> и кастомный <ge-neric aria-label="News">. Результаты пёстрые. VoiceOver на macOS в Safari произносит «News, group». Talkback на Android в Chrome — «News». Narrator на Windows 11 в Chrome — «News, group, content». А вот JAWS, NVDA и VoiceOver на iOS в своих стандартных конфигурациях просто игнорируют aria-label и зачитывают текстовое содержимое как обычно. То есть половина пользователей не услышит вашу подпись, половина — услышит что-то непонятное.

Автор также проверил пустые div с aria-label: результаты разнятся ещё сильнее — от «News, empty group» в VoiceOver macOS до полного молчания в JAWS, Narrator и Talkback на Firefox.

Исключения есть. Если поставить aria-label на <section> (у него по умолчанию тоже generic-роль), то при добавлении aria-label элемент неявно превращается в region — смысловую область, и это разрешено. Ещё один случай: если на div висит атрибут popover, его роль автоматически становится group, а не generic — тогда подпись технически корректна, хотя автор сомневается в её полезности.

Вывод: не пытайтесь переопределять имя у div, span и прочих бессмысленных контейнеров через aria-label. Это не работает надёжно ни в одном браузере, а пользователи скринридеров получат или пустоту, или кашу.

Читать оригинал →