この記事の要点（UIXHERO視点） UIXHEROでは、アクセシビリティを「使えるかどうか（利用可能性）」、ユーザビリティを「使いやすいかどうか（効率・満足度）」と定義し区別する。 アクセシビリティは「最低ライン」であり、ユーザビリティは「品質」である。アクセシビリティなきユーザビリティは、一部のユーザーを排除する。
導入：「使いやすい」と「使える」は違う
「このサイト、デザインは素敵だけど、キーボードだけでは操作できない」 「ボタンが小さすぎて、スマホでタップしにくい」 「色のコントラストが低くて、文字が読めない」
こんな問題を見たことはないでしょうか。これらはユーザビリティの問題のようで、実はアクセシビリティの問題です。
逆に、「スクリーンリーダーで読み上げられるけど、情報が整理されていなくて使いにくい」というケースもあります。これはアクセシビリティは満たしているが、ユーザビリティが低い状態です。
アクセシビリティとユーザビリティは、似ているようで全く異なる概念である。
この2つを混同していると、「一部のユーザーは使えない」か「使えるけど使いにくい」という中途半端なUIができあがります。
アクセシビリティとユーザビリティの違い（定義）
アクセシビリティは「使えるかどうか」であり、ユーザビリティは「使いやすいかどうか」である。
| 項目 | アクセシビリティ (Accessibility) | ユーザビリティ (Usability) |
|---|---|---|
| 定義 | 障害の有無に関わらず、すべての人が利用できること | 特定の目標を達成するための効率・効果・満足度 |
| 問い | 「使えるか？」（Can they use it?） | 「使いやすいか？」（Is it easy to use?） |
| 対象 | すべてのユーザー（特に障害を持つユーザー） | 想定されるユーザー層 |
| 基準 | WCAG（法的要件になりうる） | ISO 9241-11（品質指標） |
語源と背景
アクセシビリティは、ラテン語の「accessus（近づく）」に由来します。Webの文脈では、W3CのWCAG（Web Content Accessibility Guidelines）が国際標準とされ、多くの国で法的要件になっています。
ユーザビリティは、ISO 9241-11で「有効さ・効率・満足度」と定義されています。ヤコブ・ニールセンは「学習しやすさ・効率・記憶しやすさ・エラー・満足度」の5要素で構成されると述べています。
研究からの引用: 「アクセシビリティがなければ、ユーザビリティを議論する意味がない。使えないものの使いやすさを測ることはできない。」（Steve Krug）
なぜ重要なのか
1. アクセシビリティは「入口」、ユーザビリティは「体験」
建物に例えると：
- アクセシビリティ: 建物に入れるか（スロープ、自動ドア、点字ブロック）
- ユーザビリティ: 建物内で快適に過ごせるか（案内表示、動線、座り心地）
スロープがなければ車椅子ユーザーは建物に入れません。入れなければ、どんなに内装が素敵でも意味がありません。
2. 障害は「スペクトラム」である
アクセシビリティは「障害者のため」と思われがちですが、実際はすべての人に関係します。
| 状態 | 永続的障害 | 一時的障害 | 状況的障害 |
|---|---|---|---|
| 視覚 | 視覚障害 | 目の手術後 | 日差しで画面が見えない |
| 聴覚 | 聴覚障害 | 耳の感染症 | 騒がしい環境 |
| 運動 | 腕の欠損 | 骨折 | 赤ちゃんを抱えている |
| 認知 | 学習障害 | 睡眠不足 | 急いでいる |
「自分には関係ない」と思っている人も、いつかは「一時的障害」や「状況的障害」を経験します。アクセシビリティはすべての人のためのものです。
具体例・ケース比較
ケース1：色だけで状態を伝える
| 観点 | アクセシビリティ | ユーザビリティ |
|---|---|---|
| 問題 | 色覚異常のユーザーには赤と緑の区別がつかない | エラー表示が目立たず、気づきにくい |
| 対策 | 色＋アイコン＋テキストで状態を伝える | エラーメッセージを目立つ位置に表示 |
❌ アクセシビリティNG: 赤色だけでエラーを表示
✅ アクセシビリティOK: 赤色＋エラーアイコン＋「入力に誤りがあります」テキスト
ケース2：キーボード操作
| 観点 | アクセシビリティ | ユーザビリティ |
|---|---|---|
| 問題 | マウスがないとボタンを押せない | Tab順序が論理的でなく、移動に時間がかかる |
| 対策 | すべての操作をキーボードで可能にする | Tab順序を視覚的なレイアウトと一致させる |
❌ アクセシビリティNG: クリックでしか開けないモーダル
✅ アクセシビリティOK: Enter/Spaceで開き、Escで閉じ、Tab移動可能
ケース3：フォーム入力
| 観点 | アクセシビリティ | ユーザビリティ |
|---|---|---|
| 問題 | ラベルがなく、スクリーンリーダーで何を入力すべきかわからない | ラベルはあるが、入力例がなく何を書けばいいかわからない |
| 対策 | <label> 要素でフィールドと関連付け | プレースホルダー、入力例、リアルタイムバリデーション |
実務でなぜ区別すべきか
UIXHEROがこの2つを厳密に区別する理由は3つあります。
1. 優先順位が異なる
- アクセシビリティ: 必須要件（法的リスクあり）
- ユーザビリティ: 品質向上（競争優位性）
アクセシビリティ対応を「後回し」にすると、リリース後に大規模な改修が必要になります。設計段階から組み込むべきです。
2. テスト方法が異なる
| アクセシビリティ | ユーザビリティ | |
|---|---|---|
| 自動テスト | axe、Lighthouse、WAVE | 限定的（ヒートマップ、クリック率） |
| 手動テスト | スクリーンリーダー、キーボード操作 | ユーザビリティテスト、観察 |
| 評価基準 | WCAG適合レベル（A/AA/AAA） | タスク成功率、時間、満足度 |
アクセシビリティは自動テストである程度チェックできますが、ユーザビリティは人間によるテストが必須です。
3. 対象ユーザーの想定が異なる
- アクセシビリティ: すべてのユーザー（特に支援技術を使うユーザー）
- ユーザビリティ: 想定されるユーザー層（ペルソナ）
ユーザビリティテストでは「想定ユーザー」をリクルートしますが、アクセシビリティテストでは「障害を持つユーザー」や「支援技術を使うユーザー」を含める必要があります。
改善のための設計原則と対策
具体的な改善策（OK/NG比較）
| 項目 | NG（どちらも不足） | OK（両立） |
|---|---|---|
| ボタン | 色だけで区別、サイズが小さい | 色＋ラベル、44px以上のタッチターゲット |
| フォーム | ラベルなし、エラーが赤色のみ | ラベル関連付け、エラーはアイコン＋テキスト |
| 画像 | alt属性なし | 意味を伝えるalt、装飾画像はalt="" |
| 動画 | 字幕なし、自動再生 | 字幕＋音声解説、ユーザー操作で再生 |
| ナビゲーション | ドロップダウンのみ | キーボード操作可能、スキップリンク |
原則1：アクセシビリティを「当たり前」にする
アクセシビリティは「障害者対応」ではなく、すべてのユーザーのための基盤です。
- コントラスト: 誰もが読みやすい（日差しの中でも、加齢で視力が落ちても）
- キーボード操作: 誰もが使いやすい（パワーユーザーの効率化にも）
- 明確なラベル: 誰もが迷わない（外国語話者にも、疲れているときにも）
原則2：インクルーシブデザインから始める
「あとからアクセシビリティ対応」ではなく、設計段階から「すべてのユーザー」を想定します。
- ペルソナに障害を持つユーザーを含める
- コンポーネント設計時にWCAGを確認する
- デザインレビューでアクセシビリティチェックリストを使う
原則3：両方テストする
アクセシビリティテストとユーザビリティテストは別物です。両方実施することで、「使える」かつ「使いやすい」UIになります。
よくある質問 (FAQ)
Q1. アクセシビリティ対応はコストがかかりませんか？
設計段階から組み込めば、追加コストはほとんどありません。問題は「リリース後に対応する」場合です。既存のUIを改修するのは、新規設計の何倍もコストがかかります。
また、アクセシビリティ対応は以下のビジネスメリットがあります：
- 市場拡大: 障害を持つユーザー（世界人口の15%）にリーチ
- SEO向上: 適切な見出し、alt属性は検索エンジンにも有効
- 法的リスク回避: 訴訟リスクの軽減
Q2. WCAG AAを満たせばユーザビリティも高いですか？
いいえ。WCAGは「最低ライン」であり、「使いやすさ」は保証しません。
例：
- WCAG AA適合: すべての画像にalt属性がある
- ユーザビリティ問題: altが「画像1」など、意味をなさない
アクセシビリティとユーザビリティは両方追求する必要があります。
Q3. ユーザビリティテストで障害を持つユーザーを含めるべきですか？
理想的にはYesです。ただし、毎回含めるのが難しい場合は、以下のアプローチが有効です：
- 自動テストでWCAG適合を確認
- 手動でスクリーンリーダー、キーボード操作を確認
- 定期的に障害を持つユーザーを含めたテストを実施
関連リンク
UIXHEROの関連記事
- アクセシビリティとは — アクセシビリティの基本概念
- ユーザビリティとは — ユーザビリティの定義と測定方法
- WCAG原則（POUR） — WCAGの4原則を解説
- インクルーシブデザイン — すべてのユーザーを包括する設計
用語集
アクセシビリティは「入口」——使えなければ、使いやすさは意味がない。 ユーザビリティは「体験」——使えるだけでは、満足は得られない。
まとめ
- アクセシビリティ: 誰もが使えるか（利用可能性・最低ライン）
- ユーザビリティ: 効率的に使えるか（効率・満足度・品質）
- 使い分け: アクセシビリティは必須要件、ユーザビリティは品質向上。両方を設計段階から組み込むことで、すべてのユーザーに使いやすいUIが実現する。
まず使えることを確保し、その上で使いやすさを磨く。この順序を間違えると、一部のユーザーを置き去りにするUIが生まれる。
