Кратко
СкопированоСвойство виджета из WAI-ARIA. Даёт вспомогательным технологиям понять, что это модальный элемент, если он открыт.
Типичный представитель модальных элементов — модальные окна. Они же модалки, они же всплывашки, они же страшный сон пользователя, когда их слишком много 😅
Пример
Скопировано<div role="dialog" aria-modal="true" aria-labelledby="label" aria-describedby="description"> <h3 id="label">Заказ был отправлен!</h3> <p id="description"> Заказ будет доставлен в течение следующих 3–5 рабочих дней. </p> <button>Закрыть</button> <a href="#details">Детали заказа</a></div>
<div role="dialog" aria-modal="true" aria-labelledby="label" aria-describedby="description" > <h3 id="label">Заказ был отправлен!</h3> <p id="description"> Заказ будет доставлен в течение следующих 3–5 рабочих дней. </p> <button>Закрыть</button> <a href="#details">Детали заказа</a> </div>
Как пишется
СкопированоЗадайте элементу атрибут aria
с одним из двух значений:
false
— это немодальный элемент.true
— это модальный элемент.
aria
можно использовать только для некоторых HTML-тегов и ARIA-ролей:
<dialog>
или вместе с рольюdialog
;- с ролью
alertdialog
.
Когда показываете модальное окно с <dialog>
с помощью метода .show
, не нужно задавать ему aria
и менять динамически значения. В методе уже по умолчанию есть aria
.
Если это немодальное окно с <dialog>
, и для его показа используете другой метод .show
, к тегу применится aria
.
Обратите внимание, что aria
не изменяет поведение элементов, а только обозначает модальность для пользователей вспомогательных технологий. Сделать окно по-настоящему модальным помогут JavaScript и CSS.
Как понять
СкопированоМодальное окно располагается поверх других элементов. Когда окно раскрыто, пользователь может взаимодействовать только с его содержимым. Например, перемещаться по кнопкам и ссылкам с помощью мыши, клавиатуры или касаний на мобильном устройстве.
Атрибут aria
как раз указывает на эту особенность модальных окон. Благодаря ему пользователи скринридеров и других вспомогательных технологий понимают, что в этот момент они могут делать фокус только на элементах внутри модального окна.