aria-modal

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

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

Атрибут можно использовать только для некоторых ролей и атрибутов:

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

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

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

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

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

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