로컬 접근 가능한 dialog 생성기

접근 가능한 기본 HTML 대화 상자 만들기

복사 가능한 HTML 및 JavaScript를 사용하여 모달 트리거, 레이블이 지정된 대화 상자 및 기본 닫기 양식을 만듭니다.

준비 완료

Native dialog 미리보기

Settings

Choose your preferences.

<button type="button" id="open-settings-dialog" aria-haspopup="dialog">Open settings</button>

<dialog id="settings-dialog" aria-labelledby="settings-dialog-title">
  <form method="dialog">
    <div class="dialog-panel">
      <h2 id="settings-dialog-title">Settings</h2>
      <p>Choose your preferences.</p>
      <button type="submit">Close</button>
    </div>
  </form>
</dialog>

<script>
  const dialog = document.getElementById("settings-dialog");
  document.getElementById("open-settings-dialog").addEventListener("click", () => dialog.showModal());
</script>

파일을 업로드하지 않습니다. 처리는 이 브라우저 탭에서만 진행됩니다.

Native dialog 모델 사용하기

showModal() places the dialog in the top layer and gives it modal behavior with a backdrop.

aria-labelledby connects the dialog to a visible heading so assistive technology gets its name from the content.

A form with method=dialog lets a submit button close the dialog without custom close plumbing.

Dialog 질문

Why use dialog instead of a div?

The native element provides modal state, top-layer rendering, and built-in close behavior when opened with showModal().

How does the close button work?

The button submits the surrounding form with method=dialog, which closes the dialog and sets its return value.

Does this handle focus management?

Native modal dialogs manage the basic focus behavior. Test your final content and add app-specific focus handling when needed.