アクセシビリティ

読む・飛ばす・続ける・詳細を開く操作を、質問の長さや端末幅が変わっても理解できるようにします。

現在実装していること

言語	`lang="ja"`を指定
質問	画像ではなくHTMLの`h1`へ文字として表示
操作	スキップ・次へ・detail・閉じるをネイティブのbuttonで実装
リンク	戻る、質問報告、安全設計を通常のリンクとして実装
タップ領域	質問報告リンクは最小44pxの高さを持つ
時間制限	自動で次へ進まず、利用者がボタンを押すまで待つ
回答	入力欄を設けず、答えや会話内容をサービスへ送らない

60文字以上の質問は長文レイアウトへ切り替え、文字サイズと行間を調整します。表示領域を超える場合は質問部分だけをスクロールでき、下端のフェードと「続きがあります ↓」で続きを示します。

問題文の文字数が60以上ならlong-questionを付けます。

新しい質問を表示するたび、質問領域のscrollTopを0へ戻します。

スクロール可能で、まだ最下部ではない場合だけhas-more-question-textを付けます。

最下部へ到達するとフェードと続き表示を外します。

リンクとbuttonはブラウザ標準のTab移動とEnter／Space操作を利用できます。詳細パネルはbuttonで開閉し、出典リンクは新しいタブで開きます。

質問が切り替わったときの読み上げ通知、詳細パネルをdialogとして扱うフォーカストラップ、閉じた後に元のボタンへフォーカスを戻す処理は、現在の実装にはありません。

文字サイズ	`clamp()`で端末幅に合わせて調整
本文色	主要文字は#111111、補助文字は#666666
長文	中央揃えから左揃えへ切り替え、行間を広げる
スクロールバー	細いスクロールバーを表示し、スクロール可能な領域を残す
操作名	色だけに依存せず「今回は話さない」「次の質問」と文字で区別

Omoiでは、回答のしやすさだけでなく、回答しない選択も操作可能であることを重視します。「今回は話さない」はどの質問でも次へ進み、理由の入力や確認画面を要求しません。

読み上げ	質問切り替え用の`aria-live`は未実装
detail	dialog semanticsとフォーカス管理は未実装
警告metadata	`content_warning`は個別カードUIには表示しない
自動検査	全画面の継続的なスクリーンリーダー回帰テストは未整備