aria-modal

Свойство виджета из 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-modal с одним из двух значений:

• false — это немодальный элемент.
• true — это модальный элемент.

aria-modal можно использовать только для некоторых HTML-тегов и ARIA-ролей:

• <dialog> или вместе с ролью dialog;
• с ролью alertdialog.

Когда показываете модальное окно с <dialog> с помощью метода .showModal(), не нужно задавать ему aria-modal и менять динамически значения. В методе уже по умолчанию есть aria-modal="true".

Если это немодальное окно с <dialog>, и для его показа используете другой метод .show(), к тегу применится aria-modal="false".

Обратите внимание, что aria-modal не изменяет поведение элементов, а только обозначает модальность для пользователей вспомогательных технологий. Сделать окно по-настоящему модальным помогут JavaScript и CSS.

Модальное окно располагается поверх других элементов. Когда окно раскрыто, пользователь может взаимодействовать только с его содержимым. Например, перемещаться по кнопкам и ссылкам с помощью мыши, клавиатуры или касаний на мобильном устройстве.

Атрибут aria-modal как раз указывает на эту особенность модальных окон. Благодаря ему пользователи скринридеров и других вспомогательных технологий понимают, что в этот момент они могут делать фокус только на элементах внутри модального окна.