This page is also available in English.
``` ## ランドマーク ページの大きな区画は、次の要素でマークアップします。支援技術の利用者は、ランドマーク単位でページ内を移動できます。 | 要素 | 用途 | | :--- | :--- | | `header` | サイト共通のヘッダー | | `nav` | グローバルナビゲーション、パンくずリストなどの主要なナビゲーション | | `main` | ページ固有の主要コンテンツ（1 ページに 1 つ） | | `aside` | 本文と関連の薄い補足（サイドバーなど） | | `footer` | サイト共通のフッター | `nav` を複数置く場合は、`aria-label` で区別できるようにします。 ```html ``` ## ボタンとリンク - **ページや場所を移動する**: `a` 要素（`href` 属性あり） - **その場で処理を実行する**（開閉、送信、切り替えなど）: `button` 要素 `div` や `span` にクリックイベントを付けてボタンの代わりにしないでください。キーボード操作やフォーカス、役割の読み上げを自前で実装することになります。 ```html お問い合わせ メニュー ``` :::note フォーム外の `button` 要素には `type="button"` を指定します。`form` 内で `type` を省略すると送信ボタン（`type="submit"`）として扱われます。 ::: ## フォーム - 入力欄には `label` 要素でラベルを関連付けます。プレースホルダーはラベルの代わりにしません。 - ラジオボタンやチェックボックスのグループは、`fieldset` と `legend` でまとめます。 - 必須項目には `required` 属性を指定し、画面上でも「必須」と分かるように表示します。 - 氏名・メールアドレス・電話番号・住所などには、`type` 属性と `autocomplete` 属性を指定し、入力の手間を減らします。 - エラーメッセージや補足説明は、`aria-describedby` で入力欄と関連付けます。 ```htmlメールアドレスの形式で入力してください。
``` ## ダイアログ モーダルダイアログは `dialog` 要素で実装し、JavaScript の `showModal()` で開きます。`showModal()` で開いたダイアログは、次の動作をブラウザが標準で提供します。 - 最前面（トップレイヤー）に表示されるため、`z-index` の調整が不要 - ダイアログの外の要素は操作できなくなる - Esc キーで閉じられる ```html ``` ```js const dialog = document.querySelector("#detail-dialog"); document.querySelector("#open-dialog").addEventListener("click", () => { dialog.showModal(); }); ``` `