ARIA-атрибуты можно условно разделить на описательные атрибуты и атрибуты состояния.

✍️Описательные атрибуты

Пожалуй, самым часто используемым на практике атрибутом является aria-label, он позволяет привязать к элементу текстовое описание, если он сам не может (или не хочет) иметь свой текст.

🏷А вот aria-labelledby позволяет не указывать отдельный текст, а привязать к элементу текст из другого элемента по его id (что-то вроде атрибута for у label’а, только наоборот). Это бывает очень удобно для того, чтобы описать группу элементов, например, группу радиокнопок.

⚠️Атрибут aria-errormessage хоть и работает только в паре с атрибутом состояния aria-invalid, все же выполняет функцию описания: он как и aria-labelledby ссылается на элемент, который содержит текст ошибки. Его можно присваивать элементам формы, но браузер будет его игнорировать до тех пор, пока атрибут aria-invalid этого элемента не получит true.

🚦Атрибуты состояний

К этой категории относятся, например, такие атрибуты, как aria-checked, aria-selected, aria-disabled, aria-hidden, aria-invalid, aria-expanded и многие другие. Они используются для маркирования состояний динамических блоков: пометка активного таба или выбранной опции в списке, пометка развернутого аккордеона, скрытого контента и т. д. Так как речь идет о состояниях, то управлять ими приходится динамически при помощи javascript.

🚀С помощью атрибутов мы также можем управлять тем, как скринридер будет реагировать на динамические изменения. За это отвечают aria-live, aria-atomic, aria-relevant и aria-busy.

#rdclr_frontend