アクセシビリティ

注記
このページは英語の原文の翻訳です。内容が異なる場合は英語版が優先されます。

テーマは設定なしで WCAG 2.2 AA を目指しています。このページでは、テーマが読者のために行うことと、それを変える 2 つの設定をまとめます。

キーボード

キー	場所	動作
`Tab`	すべてのページ	最初の移動先は「本文へスキップ」で、本文にフォーカスを移します
`/` または `Ctrl`+`K` (macOS では `Cmd`+`K`)	検索のあるページ	検索ボックスにフォーカス (入力欄で入力中の `/` は無視)
`↓` `↑`	検索結果	結果の間を移動し、検索ボックスに戻る
`Esc`	検索	結果から抜ける、または検索ボックスを空にする
`←` `→` `Home` `End`	タブ	タブを切り替え。右から左に書くページでは左右が読む方向に従います
`↓` `↑` `Esc`	言語メニュー、ナビの「その他」メニュー、ページ操作	項目間を移動。`Esc` で閉じてフォーカスを戻します
`Tab`	幅の広いコードブロックと表	横にスクロールするブロックは名前付きの領域になり、フォーカスして矢印キーでスクロールできます

フォーカスは常に見えます。タブ、パネル、スクロール領域の中では、フォーカスリングが切れないよう枠の内側に描かれます。

スクリーンリーダー

ランドマーク (ヘッダー、ナビゲーション、本文、フッター)、ナビゲーション・パンくず・言語メニューの現在ページ (aria-current)、アイコンボタン・コードブロック・表のラベルが組み込まれています。ラベルは lang: に従って 23 言語で表示されます (設定を参照)。ラベルのないアイコンは装飾として扱われます。

スマートフォンとタブレット

セーフエリア。 ページはノッチ、角丸、ホームインジケーターの下まで描かれ、ヘッダー・左右の余白・フッターはそれらを避けて配置されます。
タッチターゲット。 タッチ画面では、ヘッダーのリンク、メニュー、タブ、コピーボタン、ページ送りの高さが 44 px 以上になり、検索ボックスの文字は 16 px なので iOS で拡大されません。
ブラウザーの色。 アドレスバーの色がライト・ダークモードのページ背景に合わせられます。

ハイコントラストと動き

Windows のハイコントラスト (強制カラー) でも、アイコンボタンと検索ボックスの枠線が表示されます。
「視差効果を減らす」をオンにすると、トランジションとアニメーションが止まります。

設定

modootoday:
  viewport_fit: auto           # default: cover (draw under the notch with safe-area padding)
  theme_color: {light: "#ffffff", dark: "#0d1117"}  # or one "#hex", or false

キー	既定値	効果
`viewport_fit`	`cover`	`auto` はページをセーフエリア内に収め、余白をブラウザーに任せます
`theme_color`	ページ背景	ブラウザーのバーの色。`"#hex"` 1 つ、`{light, dark}`、またはタグを出さない `false`

独自の CSS では、--mt-safe-top、--mt-safe-right、--mt-safe-bottom、--mt-safe-left で余白の値を読めます。

コンテンツ

コンテンツそのものはテーマでは直せません。よくある問題は公開前に modootoday-check が知らせます。

画像: すべての画像に、何を示しているかがわかる alt テキストを付けてください (![5 月の売上が倍増](chart.png))。情報を持たない装飾画像のときだけ alt を空にします。HTML の <img> に alt がないとエラーです。
イラストと装飾: include に描いた場面は <figure class="mt-illustration" role="img" aria-label="…"> と書きます。スクリーンリーダーは role=img の子を読まないため、ラベルには何を示すかと .mt-illustration-tag の文字を含めてください。これがない .mt-illustration は modootoday-check が報告します。純粋な装飾は decor: に入れると、テーマが支援技術から隠します。
リンク: リンクの文言だけで行き先がわかるように書きます。空のリンクはエラー、「こちら」「詳しくはこちら」は警告です。ダウンロードにはファイル形式を添えます。例: [価格表 (PDF、2 MB)](prices.pdf)。
見出し: ページタイトルだけが # 見出しです。本文は ## から始め、レベルを飛ばさないでください (## の次に #### は警告)。スクリーンリーダーの利用者は見出しのレベルで移動します。
表: すべての表に見出し行を付け、表の前に何の一覧かを示す文か見出しを置いてください。
ID: 1 ページで同じ id を 2 回使うとエラーです。アンカーやラベルが壊れます。
言語: 翻訳したページごとに lang: を指定すると、スクリーンリーダーが正しい音声で読み上げます。右から左に書く言語には dir="rtl" が自動で付きます。

検索結果は表示されたときに読み上げられ、コピーボタンはコピーが終わると知らせます。