Кратко
СкопированоСвойство виджета из WAI-ARIA. Даёт вспомогательным технологиям понять, что это модальный элемент, если он открыт.
Типичный представитель модальных элементов — модальные окна. Они же модалки, они же всплывашки, они же страшный сон пользователя, когда их слишком много 😅
Пример
Скопировано<div role="alertdialog" aria-modal="true" aria-labelledby="label"> <h2 id="label">Важное уточнение</h2> <p>Точно хотите посадить дерево?</p> <button type="button" onclick="growTree(this)">Да</button> <button type="button" onclick="deleteTree(this)">Нет</button></div>
<div role="alertdialog" aria-modal="true" aria-labelledby="label" > <h2 id="label">Важное уточнение</h2> <p>Точно хотите посадить дерево?</p> <button type="button" onclick="growTree(this)">Да</button> <button type="button" onclick="deleteTree(this)">Нет</button> </div>
Как пишется
СкопированоЗадайте элементу атрибут aria
с одним из двух значений:
false
— это не модальный элемент.true
— это модальный элемент.
Атрибут можно использовать только для некоторых ролей и атрибутов:
<dialog>
или вместе с рольюdialog
;- с ролью
alertdialog
.
Если показываете модальное окно с <dialog>
с помощью метода show
, в этом случае не нужно задавать ему aria
и менять динамически значения. В методе уже по умолчанию используется aria
.
Если это немодальное окно с <dialog>
, и для его показа используете другой метод show
, к тегу применится aria
.
Обратите внимание, что aria
не изменяет поведение элементов, а только обозначает модальность для пользователей вспомогательных технологий. Сделать окно по-настоящему модальным помогут JavaScript и CSS.
Как понять
СкопированоМодальное окно располагается поверх других элементов. Когда окно раскрыто, пользователь может взаимодействовать только с его содержимым. Например, перемещаться по кнопкам и ссылкам с помощью мыши, клавиатуры или касаний на мобильном устройстве.
Атрибут aria
как раз указывает на эту особенность модальных окон. Благодаря ему пользователи скринридеров и других вспомогательных технологий понимают, что в этот момент они могут делать фокус только на элементах внутри модального окна.