HTML UI PRIMITIVE

Accessible Dialog Menu

ブラウザ標準で作る、アクセシブルなハンバーガーメニュー。

<dialog> command
01

IMPLEMENTATION

JSあり／なしを比べる

OPEN / CLOSE

開閉方法を切り替える

DIALOG API dialogをJavaScriptから呼び出す

showModal()とclose()を使います。commandに未対応の環境でも、dialogが使えれば開閉できます。

必要な対応環境 dialog 幅広い環境向け
JAVASCRIPT

開くときはshowModal()、閉じるときはclose()を呼びます。

  1. 1

    dialogを置くメニュー本体をHTMLで用意

  2. 2

    ボタンとつなぐJSまたはcommandで開閉

  3. 3

    CSSで整える幅・背景・動きを追加

アクセシビリティの土台はdialog。
commandは、開閉処理をHTMLで宣言する仕組みです。

02

LIVE PREVIEW

ハンバーガーメニューの標準動作を試す

JS + DIALOG
FRONTEND CRAFT

Design the interaction.
Keep the HTML.

標準の意味と動作を活かして、実装する責任を減らします。

SEMANTICS

モーダルであることを支援技術へ伝える

showModal()で開いたdialogはモーダルとして扱われます。aria-labelledbyで名前を付けると、何のメニューかも伝えられます。

RELATED CODE <dialog aria-labelledby="menu-title">
NAVIGATION