HTML-тег <dialog>

Характеристики

• Тип: блочный, интерактивный, семантический
• Назначение: Представляет диалоговое окно или окно сообщения.
• Родители: Любые HTML-теги, которые могут содержать блочные элементы.
• Потомки: Текст и любые HTML-теги.
• Глобальные атрибуты: все
• Атрибуты событий: все

Атрибуты

• open — Указывает, что диалоговое окно открыто.
• returnValue — Значение, возвращаемое при закрытии диалога.

Пример использования

<dialog id="myDialog">
  <p>Содержимое диалога</p>
</dialog>

Использование в JavaScript

// Получение элемента по ID
const dialog = document.getElementById('myDialog');

// Открытие диалога
dialog.show();

// Закрытие диалога
dialog.close();

// Проверка, открыт ли диалог
const isOpen = dialog.open;

Рекомендации по обеспечению доступности (a11y)

• Убедитесь, что диалоги доступны для клавиатурной навигации и могут быть закрыты с помощью клавиатуры.
• Перемещайте фокус на первый элемент в диалоге при его открытии и возвращайте на исходный элемент при закрытии.
• Используйте роль dialog и атрибуты ARIA при необходимости для улучшения доступности.
• Отсутствие управления фокусом может затруднить использование диалога для пользователей с особыми потребностями.

Полезные ссылки