Урок 68 из 80: Практика: dialog

Цель: dialog

Этап «Практика» в уроке «dialog» помогает понять роль разметки в структуре и доступности документа. После урока вы сможете объяснить роль темы «dialog», собрать минимальный пример и назвать критерии корректного результата.

Разбор темы

Материал «Практика: dialog» относится к области «урок HTML: основы HTML». Тема «Практика: dialog» объединяет визуальный слой, управление фокусом и действие закрытия. Предметная проверка для «Практика: dialog»: проверьте доступное название, начальный фокус, Escape и возврат фокуса к кнопке открытия. Для «Практика: dialog» нативный dialog создаёт ожидаемую модель диалога, а showModal ограничивает взаимодействие с фоном. Рабочая проверка «Практика: dialog» звучит так: проверьте доступное название, начальный фокус, Escape и возврат фокуса к кнопке открытия. Главный риск «Практика: dialog» — одного высокого z-index недостаточно для доступного модального окна.

<dialog aria-labelledby="modal-title">
  <h2 id="modal-title">Настройки</h2>
  <button type="button">Закрыть</button>
</dialog>

Правила для dialog

1. Проверьте доступное название, начальный фокус, Escape и возврат фокуса к кнопке открытия применительно к теме «Практика: dialog».
2. Сопоставьте результат «Практика: dialog» с целью «понять роль разметки в структуре и доступности документа» и объясните каждое использованное условие.
3. Повторите проверку «Практика: dialog» с другими данными и убедитесь, что исключён риск: одного высокого z-index недостаточно для доступного модального окна.

Мини-задание