tgoop.com/rdclr_dev/75
Last Update:
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
BY RDCLR.DEV
Share with your friend now:
tgoop.com/rdclr_dev/75