Всем привет! На этой неделе продолжим разговор о доступности и поговорим о спецификации, позволяющей вам быстро и просто повысить доступность интерфейса не только для нового кода, но и в текущих проектах в рамках поддержки. С вами буду я, Артём, frontend-разработчик.

👌Повышаем доступность: WAI-ARIA

Спецификация ARIA или Accessible Rich Internet Applications - это простой и понятный разработчику инструмент. ARIA можно разделить на две основных секции: это role-атрибуты и собственно aria-атрибуты.

🦹‍♀️🦸‍♀️Роли

Ранее мы обсуждали необходимость применения семантической разметки в html. Самое простое, что могут предоставить role-атрибуты - это определить семантику для «чистых» элементов вроде div или span. Важный момент: речь идет только о семантике, но не о поведении или стилизации.

Например, вы можете передать элементу атрибут role="main", role="navigation" и т. д., и он станет семантически эквивалентным тегу main или nav.

Или в вашем приложении есть форма, которая работает по ajax, но по той или иной причине она не является элементом form, при помощи ARIA вы можете снабдить форму атрибутом role="form".

🗿Это так называемые landmark roles. Но задачи role-атрибутов не ограничиваются композицией и семантикой.

🚨Например, атрибуты role="alert", role="alertdialog", role="dialog" могут маркировать динамические элементы, появляющиеся на странице как реакция на действия пользователя. Первый предусмотрен для всплывающих уведомлений (об ошибке или об успешном действии), второй и третий – для обработки диалогового или модального окна, то есть для случаев, когда нужно не только максимально быстро уведомить пользователя о чем-то, но еще и получить от него фидбэк. Браузер будет обрабатывать содержимое таких элементов только тогда, когда они видимы, и игнорировать, если для них установлен display: none или visibility: hidden.

🖲Также не забудем о любимом многими role="button", который позволит сделать из любого div’а кнопку. Не совсем полноценную, а потому частичную обработку состояний вам нужно будет взять на себя. Например, состояние disabled на role="button" не реализуется браузером нативно, но такой элемент уже может получать фокус, что уже лучше, чем ничего.

#rdclr_frontend