ヘッダーもキーボード操作での利用に対応しています。
ページ冒頭の「本文へ」リンク（ブロックスキップ）を使うと、繰り返されるナビゲーションを読み飛ばして本文へ直接移動できます。
ブロックスキップはページ読み込み後Tabで表示されます。
メニューの開閉ボタンには aria-expanded・aria-controls などの属性を付与し、開閉状態を把握できるようにしています。
カルーセル
再生・停止ボタンでスライドの自動送りを操作できます。
矢印ボタンでも前後のスライドに切り替えられます。
キーボードのTabキーとEnter/Spaceキーでも操作可能です。
開閉コンテンツ
見出しをクリック（またはEnter/Spaceキー）で内容の表示・非表示を切り替えられます。
「すべて開く」ボタンで全項目を一括表示・非表示にできます。
キーボード操作のみでもすべての項目を開閉できます。
タブ切り替え
タブをクリック、または左右キーで表示内容を切り替えられます。
Tabキーでは現在選択中のタブにのみフォーカスが移動します。
モーダル
ボタンでモーダルウィンドウの表示・非表示を操作できます。
開いている間はフォーカスがモーダル内に留まり、外側には移動しません。
Escキーまたは閉じるボタン、背景クリックでいつでも閉じられます。
モーダル(ダイアログ版)
ダイアログを使ったモーダルではshowModal()という関数を呼ぶと、ブラウザが自動でopen属性を付与し、それにより表示非表示を切り替えることができます。
上下キーで選択肢を移動できます。
選択中の項目には枠線などで視覚的にもわかるようになっています。
セレクトボックスはクリック(またはEnter/Spaceキー)で選択肢を開閉できます。
上下キーで選択肢を移動、Enterキーで確定できます。
「?」にカーソルを合わせる、またはキーボードでフォーカスすると説明が表示されます。
Escキーでいつでも説明を閉じられます。
-
STEP1
お問い合わせ入力
-
STEP2
入力内容確認
-
STEP3
送信完了
こちらはサンプルです。実際に送信することはできません。