Ответ
ARIA (Accessible Rich Internet Applications) — это набор атрибутов HTML, которые помогают сделать веб-контент более доступным для людей с ограниченными возможностями, особенно при использовании скринридеров. Они дополняют семантику HTML, когда нативных тегов недостаточно.
Примеры:
aria-label— описывает элемент, если текста нет (<button aria-label="Закрыть">X</button>)aria-hidden— скрывает элемент от assistive технологий (<div aria-hidden="true">...</div>)role— определяет тип элемента (<div role="button">Click</div>)
Важно: ARIA не заменяет семантический HTML. Лучше использовать <button>, чем <div role="button">. Применяйте ARIA только когда стандартных HTML-элементов недостаточно.
Ответ 18+ 🔞
А, ну это та самая штука, которая для скринридеров, да? Ну, для тех, кто глазами не может, а через комп слушает, что там на сайте творится. ARIA, блядь. Ну, в общем, такие специальные команды в разметку вставляешь, чтобы робот-читалка не обосралась и поняла, где у тебя кнопка, а где просто красивая картинка.
Вот смотри, классика жанра: сделал ты кнопку закрытия окошка в виде крестика «Х». А для скринридера эта буква «Х» — просто буква «икс», он не догадается, что это кнопка закрытия. Вот тут и пишешь: <button aria-label="Закрыть">X</button>. И робот такой: «А, бля, понятно, кнопка "Закрыть"». И пользователь доволен.
Или ещё прикол: у тебя на сайте эти ебучие анимированные баннеры, которые скачут, как угорелые. Нормальному человеку мешают, а для скринридера — это вообще пиздец, он будет их зачитывать каждый раз. Берёшь и вешаешь на этот баннер aria-hidden="true". Всё, баннер есть, а для скринридера его нихуя нет. Красота.
Но вот что главное, запомни как «Отче наш», а то все начинающие фронтендеры об это место разбиваются, как охуевшие мухи о стекло: ARIA — это костыль, ёпта! Не заменяй ей нормальный, семантический HTML!
Вот тебе священное правило: если есть нативный тег <button>, ты не должен, блядь, выебываться и делать <div role="button">. Не должен! Потому что нативная кнопка уже всё умеет: и в фокус попадает, и на Enter нажимается, и стилизуется под систему. А твоя role="button" — это просто пиздабольство для скринридера, а функционал тебе ещё самому на JS приделывать. Зачем? Ты что, самый умный? Хуй с горы?
Используй эту ARIA только тогда, когда стандартными средствами нихуя не получается. Когда уже всё перепробовал, а скринридер всё равно мычит, как Герасим из рассказа, и не понимает, что от него хотят. Вот тогда — да, подключай тяжёлую артиллерию. А так — семантика, сука, наше всё. Не усложняй, а то получится пиздопроебибна, а не доступность.