Phase 9
Accessibility & Quality Assurance

Introduction

「動く」だけでは、完成ではありません

ビルドが成功し、ボタンを押せるだけでは、 Knowledge OSの画面は完成ではありません。

文字を拡大すると切れる、Tabキーで移動できない、 150％表示でボタンが隠れる、資料が1000件あると画面が固まる。 こうした問題は、実際の業務では機能不良と同じです。

この章で定義するもの

01 — Quality Principles

1アクセシビリティと品質保証の原則

品質レベル

02 — Typography & Touch Targets

2文字サイズと操作領域

文字サイズ

操作領域

• 主要ボタンは高さ44px以上
• アイコンボタンも44px四方以上のクリック領域を持つ
• チェックボックスとラジオボタンはラベル全体をクリック可能にする
• 隣接する操作間に8px以上の間隔を取る
• 削除と保存など、結果が異なる操作を密着させない

禁止事項

• 情報を収めるために文字を12px以下へ縮小する
• 小さな×印だけで閉じる操作を提供する
• リンク同士を密着させる
• ホバーしないと文字が読めない表示

03 — Keyboard Navigation

3キーボード操作とTab順序

必須操作

• Tabキーで主要操作へ移動できる
• Shift＋Tabで逆方向へ戻れる
• EnterまたはSpaceでボタンを実行できる
• Escでダイアログを閉じられる
• 矢印キーで選択肢を移動できる
• フォーカスが見えなくならない

Tab順序

Tab順序は、画面の視覚的な読み順と一致させます。

1. グローバルナビゲーション
2. ページタイトル付近の主要操作
3. 検索・入力欄
4. メインコンテンツ
5. 補助操作
6. ページ下部の操作

禁止するTab設計

• CSSの見た目とDOM順序が大きく異なる
• tabindexに1以上の正数を指定する
• 装飾要素へフォーカスを当てる
• フォーカスが見えない場所へ移動する
• 同じ画面内でTabが無限ループする

主要画面の確認

04 — Focus Visibility

4フォーカス表示

標準

• 2〜3pxのフォーカスリングを表示する。
• 背景と十分に区別できる色を使う。
• マウス操作時に不要でも、キーボード操作時には表示する。
• カード全体が操作可能な場合もフォーカスを表示する。

:focus-visible {
  outline: 3px solid var(--color-primary-600);
  outline-offset: 2px;
}

フォーカスを消してはいけない

画面遷移後のフォーカス

• 新しいページではページタイトル付近へ移す。
• エラー送信後は最初のエラー項目へ移す。
• ダイアログを閉じた後は、開いた元のボタンへ戻す。
• 削除後は次の資料または一覧見出しへ移す。

05 — Screen Reader

5スクリーンリーダーとaria属性

基本ルール

• 入力欄にlabelを関連付ける
• アイコンだけのボタンにaria-labelを付ける
• 画像に適切なaltを設定する
• 装飾アイコンは読み上げ対象から除外する
• 状態変化を必要に応じてaria-liveで通知する
• 見出し階層を順番どおりに使う

aria-labelの例

<button aria-label="資料を削除">
  <Trash2 aria-hidden="true" />
</button>

読み上げるべき状態

禁止事項

• すべての要素へaria-labelを付ける
• 見えているラベルと異なる内容を読み上げる
• 装飾アイコンを重複して読み上げる
• 状態変化を大量にaria-liveで通知する

06 — Dialog Accessibility

6ダイアログのアクセシビリティ

必須要件

• 開いた時にダイアログ内へフォーカスを移す
• フォーカスをダイアログ内に閉じ込める
• Escで閉じられる
• 閉じた後に元の操作へフォーカスを戻す
• タイトルと説明を読み上げ可能にする
• 背景側を操作できないようにする

フォーカス初期位置

07 — Color & Contrast

7色覚への配慮とコントラスト

コントラスト基準

色だけで伝えない

• 成功：緑＋チェックアイコン＋文章
• 警告：黄＋警告アイコン＋文章
• エラー：赤＋エラーアイコン＋文章
• 選択中：背景色＋左線＋太字

色覚確認

• 赤と緑だけで成否を区別していない。
• グラフや状態に記号・ラベルがある。
• 薄いグレー文字を本文に使っていない。
• 無効状態と通常状態が区別できる。

08 — Zoom & Screen Size

8拡大表示と画面サイズ

必須確認環境

150％表示で確認すること

• ページタイトルが切れない
• 主要ボタンが画面外へ出ない
• ダイアログ全体を操作できる
• フォームラベルと入力欄が重ならない
• サイドバーを閉じられる
• 横スクロールが必要な場所を理解できる

1366×768での確認

• ページ上部だけで主要目的が分かる。
• 主要操作がスクロールせず確認できる。
• 固定ヘッダーがコンテンツを隠さない。
• ダイアログ下部のボタンへ到達できる。

09 — Text Overflow

9文字切れ・長い日本語・長いファイル名

長いファイル名

実際の業務では、氏名、案件名、日付、文書種類を含む長いファイル名が使われます。

• 一覧では2行まで表示する。
• 省略時はツールチップまたは詳細で全文を確認できる。
• 拡張子だけが見えなくならないようにする。
• 長い文字列でもカード幅を壊さない。
• 英数字が連続しても折り返せるようにする。

テスト文字列

2026年7月12日_株式会社サンプル沖縄支店_
相続手続きに関するご案内および必要書類一覧_最終確認版.pdf

長い日本語文言

• ボタン内で不自然に切れない。
• 見出しがカード外へ出ない。
• エラーメッセージが省略されない。
• 設定説明が入力欄と重ならない。
• 翻訳や文言変更で高さが変わっても破綻しない。

横スクロール

• ページ全体の横スクロールは原則禁止。
• 表やプレビューなど必要な領域だけ許可する。
• 横スクロール可能であることを視覚的に示す。
• 主要操作を横スクロールの先へ置かない。

10 — Volume Testing

100件・1件・1000件の確認

0件

• Empty Stateが表示される。
• 次の操作が案内される。
• 空の表や壊れた枠だけを表示しない。
• 件数が「undefined件」にならない。

1件

• 単数でも文言が不自然にならない。
• カードが過度に横へ広がらない。
• 一覧操作が無駄に複雑にならない。

1000件

• 初期表示が極端に遅くならない。
• ページングまたは仮想スクロールが機能する。
• 検索・絞り込みが利用できる。
• 全件をDOMへ一度に描画しない。
• 全選択の影響範囲が明確である。

推奨追加件数

11 — State & Recovery Testing

11Empty・Loading・Error・復旧確認

必須状態

エラー時の復旧確認

• 入力内容が保持される
• 元資料が失われない
• 再試行できる
• 再試行で重複処理されない
• キャンセルできる
• 別の画面へ戻れる
• 同じ失敗が続く場合の案内がある

障害シナリオ

12 — Senior Usability Review

12高齢者による操作確認

自動テストや開発者確認だけでは、 「説明しなくても使えるか」は判断できません。

確認対象

• 60代以上で、IT専門職ではない人
• 普段はメール、Web、Word程度を利用する人
• Knowledge OSを初めて使う人

確認タスク

1. 資料を1件追加する
2. 追加した資料を探す
3. 資料を開く
4. AIに質問する
5. 根拠資料を確認する
6. エラーから戻る

観察すること

• 説明なしで最初の操作を見つけられる。
• ボタンの意味を理解できる。
• 文字を読み飛ばしていない。
• 戻る場所が分かる。
• AI回答と元資料を区別できる。
• エラー後に次の行動を選べる。

13 — Cursor & Codex Checks

13Cursor・Codex必須確認

必須コマンド

npm run build
cargo build
npm run type-check
npm run lint

プロジェクトの実際のスクリプト名が異なる場合は、 package.jsonとCargo.tomlを確認し、同等の検査を実行します。

Cursor必須確認

• 主要画面の表示確認
• キーボード操作
• Tab順序
• フォーカス表示
• Empty State
• Loading State
• Error State
• 長い日本語文言
• 長いファイル名
• Windows表示倍率150％
• 1366×768

Codex必須確認

• 型チェック
• lint
• アクセシブルネームの有無
• labelと入力欄の関連
• ダイアログのフォーカストラップ
• tabindexの不適切な指定
• 状態別分岐の網羅
• 再試行時の重複防止
• 0件・1件・1000件のテスト

完了報告

【実行した確認】
- npm run build
- cargo build
- 型チェック
- lint
- 主要画面表示
- キーボード操作
- Empty / Loading / Error
- Windows 150％
- 1366×768
- 長い日本語文言
- 0件 / 1件 / 1000件

【結果】
成功 / 失敗 / 未確認

【未確認項目】
理由と今後の対応

14 — Quality Gates

14品質ゲート

リリース不可条件

• ビルドが失敗している
• 型エラーが残っている
• 主要操作をキーボードで完了できない
• フォーカスが見えない
• 本文が16px未満
• 主要操作領域が44px未満
• 150％表示で主要操作が隠れる
• エラー時に入力や元資料を失う
• Empty・Loading・Errorが未実装
• 長いファイル名で画面が崩れる

条件付きリリース

軽微な改善項目を残してリリースする場合は、 次の条件をすべて満たします。

• 主要操作に影響しない
• 代替操作がある
• 既知の問題として記録されている
• 修正予定が決まっている
• 利用者データを損なわない

品質判定

15 — Review Checklist

アクセシビリティ・品質保証チェックリスト

文字・表示

• 本文が16px以上である。
• 補助文字が14px以上である。
• 長い日本語文言で崩れない。
• 長いファイル名を全文確認できる。
• ページ全体に不要な横スクロールがない。

操作

• 操作領域が44px以上である。
• キーボードで主要操作を完了できる。
• Tab順序が視覚順と一致している。
• フォーカスが常に見える。
• ダイアログのフォーカストラップが機能する。

読み上げ

• 入力欄にラベルがある。
• アイコンボタンにアクセシブルネームがある。
• 見出し階層が正しい。
• 状態変化が必要に応じて通知される。

環境

• Windows 125％で確認した。
• Windows 150％で確認した。
• 1366×768で確認した。
• 主要ダイアログを小型画面で操作できる。

データ・状態

• 0件を確認した。
• 1件を確認した。
• 1000件を確認した。
• Empty Stateを確認した。
• Loading Stateを確認した。
• Error Stateと復旧を確認した。

Definition of Done

Phase 9の完成条件

• アクセシビリティ要件が共通チェックリスト化されている。
• 主要コンポーネントにキーボード操作が実装されている。
• フォーカス表示が統一されている。
• スクリーンリーダー用ラベルが実装されている。
• ダイアログのフォーカストラップが実装されている。
• Windows 125％・150％で確認されている。
• 1366×768で確認されている。
• 長い日本語文言とファイル名で確認されている。
• 0件・1件・1000件で確認されている。
• Empty・Loading・Error・復旧が確認されている。
• Cursor・Codexの必須確認が実行されている。
• 高齢者による操作確認が行われている。

Closing

使えない理由を、製品側から減らす

利用者が操作できないとき、 それを年齢、経験、慣れの問題にしてはいけません。

文字が読めること、フォーカスが見えること、 キーボードで移動できること、失敗しても戻れることは、 すべて製品側が担保すべき品質です。

最終原則

1. アクセシビリティを基本品質として扱う。
2. 文字と操作を小さくしない。
3. キーボードだけでも操作できるようにする。
4. 現在位置を常に分かるようにする。
5. 読み上げ可能な構造にする。
6. 拡大表示と小型画面で確認する。
7. 長い文言と大量データで確認する。
8. エラー時の復旧を確認する。
9. AIの完了報告だけで合格としない。
10. 実際の利用者による確認を行う。

Knowledge OS Design Principles v1.0.0
Phase 9 — Accessibility & Quality Assurance
Accessibility and Release Quality Standards