アクセシビリティ

質問の読み上げ通知、ヒント・背景の開閉、終了確認、長文表示に実装されている対応と確認項目を説明します。

現在実装していること

言語と本文	`lang="ja"`を指定し、問いを画像ではなくHTMLの`h1`へ表示
質問の通知	`aria-live="polite"`と`aria-atomic="true"`を質問領域に指定。読み込み中は`aria-busy`を使用
操作	次へ、前へ、ヒント、背景、終了はネイティブのbutton。カテゴリはラベル付きradioで選択
状態	操作できない間はbuttonを無効化し、最初の問いでは「前の問い」を無効化
回答	入力は不要。時間制限や自動で次へ進む操作はありません

場面文と問いの合計が60文字以上ならlong-questionを付け、問い自体が60文字以上ならlong-question-textも付けます。長い内容は文字サイズや配置を調整します。

質問を切り替えるたびに質問領域のスクロール位置を先頭へ戻します。領域に収まらず、まだ最下部に達していないときは、has-more-question-textを使って続きを示します。

ヒントと背景のボタンはaria-expandedとaria-controlsで開閉状態と対象を示します。パネルは名前付きのregionで、一度に片方だけ開きます。Escapeキーで閉じると、対応するボタンへフォーカスが戻ります。

「ここで終える」はネイティブのdialogで確認します。開いた直後は「続ける」にフォーカスを置き、キャンセルして戻った場合は終了ボタンへ戻します。

文字サイズをclamp()で画面幅に合わせ、長文の配置も調整します。操作には「次の問いを見る」「前の問い」「ここで終える」などの文字ラベルがあります。質問本体とヒント・背景のパネルは、それぞれ内容を読み進められる構成です。

これらは実装上の対応です。小さい画面や拡大表示での読みやすさは、実際の表示と操作で確認する必要があります。

「次の問いを見る」は、話していても、話さなくても使えます。答えや理由の入力、回答しないことへの確認は求めません。「ここで終える」から終了を選ぶこともできます。

補助情報	ヒント・背景はモーダルdialogではなくregionです。開いたときにパネル内へフォーカスを自動移動する構成ではありません
警告metadata	`content_warning`は個別カードUIには表示しません
利用環境ごとの確認	実装されたARIA属性だけで、すべてのスクリーンリーダーや端末での動作を保証するものではありません