カテゴリGの締めくくりとしての位置づけ
前回のG-09では、行と列の二次元でレイアウトを組むGridを学びました。ここまでで構造、見た目、配置と、画面を作る道具は一通り揃っています。この最終回では、その画面を「誰でも使える」水準へ引き上げます。G-03で見たセマンティックな要素選びと、G-04で見たフォームのラベルが、ここで一つの答えとしてつながります。
このスライドのポイント
- 前回G-09: 行と列の二次元で組むGrid
- ここまでで構造（HTML）・見た目（CSS）・配置の道具が一通り揃った
- 最終回の役割: その画面を「誰でも使える」水準にする
- G-03のセマンティックな要素選び・G-04のフォームのラベルが、ここで一つの答えにつながる
アクセシビリティと6つの技術要件
アクセシビリティとは、身体条件や利用環境によらず、誰もが使える状態を指します。技術要件は6つです。1つ目はキーボードだけで操作できること、2つ目は今どこを操作中かを示すフォーカスの枠が見えること、3つ目は画像に代替テキスト、つまり読み上げ用の説明を付けることです。4つ目は入力欄にラベルを付けること、5つ目は文字と背景のコントラストを十分に取ること、6つ目はARIAです。ARIAは、意味をHTMLの標準要素で表せないときにだけ補う追加の属性で、乱用せず、まずG-03のセマンティックな要素を使うのが原則です。
このスライドのポイント
- アクセシビリティ＝身体条件や利用環境によらず使えること
- ①キーボードだけで操作できる
- ②フォーカス（今どこを操作中かの枠）が見える
- ③画像に代替テキスト（alt。読み上げ用の説明）
- ④入力欄にラベル（G-04）
- ⑤文字と背景のコントラスト（薄すぎる字は読めない）
- ⑥ARIA＝標準要素で意味を表せないときに補う追加属性（乱用せず標準要素を優先）
なぜ必要か——利用者は選べない
なぜこれが必要かを考えます。業務アプリの利用者は、自分で選べません。社内の全員が使うからです。マウスが使えない人や読み上げソフトを使う人が一人でもいれば、その人はその画面で仕事ができなくなります。キーボードで動かない画面や、読み上げで意味の伝わらない画面は、法令や調達の要件に触れる場合もあります。そして、公開してから直すほど、費用は大きくなります。
このスライドのポイント
- 業務アプリの利用者は選べない（社内の全員が使う）
- マウスが使えない人・読み上げソフトを使う人が一人でもいれば、その人は仕事ができない
- キーボードで動かない／読み上げで意味不明な画面は、法令や調達の要件に触れる場合もある
- 後から直すほど費用は大きくなる
公開前チェックリストとしての6要件
6つの要件は、公開前のチェックリストとして表にまとめられます。それぞれに「どう確認するか」と「欠けると誰が困るか」を対応させておくと、抜けが見えます。たとえばキーボード操作は、マウスを使わずTabキーだけで最後まで操作できるかで確認します。代替テキストは、画像を非表示にしても内容が伝わるかで確認します。要件ごとに困る人が違うので、一つでも欠けると、その要件に頼っている利用者が締め出されてしまいます。
このスライドのポイント
- 6要件は公開前チェックリストとして表にまとめられる
- 各要件に「どう確認するか」「欠けると誰が困るか」を対応させる
- 例: キーボード操作＝Tabキーだけで最後まで操作できるか
- 例: 代替テキスト＝画像を非表示にしても内容が伝わるか
- 一つでも欠けると、特定の利用者が締め出される
正しい要素選びが8割を無料で済ませる
具体例で見ます。G-03で触れた「クリックできるdiv」は、見た目こそボタンでも、キーボードのTabキーでは到達できません。操作したくても、たどり着けない要素になってしまいます。一方、button要素なら、Tabキーでの到達も、Enterキーでの実行も、読み上げでの「ボタン」という案内も、最初から備わっています。つまり、意味に合った正しい要素を選ぶだけで、アクセシビリティの多くの部分が、追加の手間なく満たされます。正しい要素選びが、いちばん確実で安上がりな対策です。
このスライドのポイント
- G-03の「クリックできるdiv」は、見た目はボタンでもTabキーで到達できない
- button要素なら、Tab到達・Enter実行・読み上げの「ボタン」案内が最初から備わる
- 意味に合った正しい要素を選ぶだけで、アクセシビリティの多くが追加の手間なく満たされる
- 正しい要素選びが、いちばん確実で安上がりな対策
技術サンプル: 代替テキストとラベル
サンプルを見ます。種別はcode、目的は代替テキストとラベルの正しい書き方を確認することです。imgのalt属性が代替テキストで、画像が見えない人にも内容を伝えます。labelとinputはG-04で見た対応付けそのもの、buttonはG-03で見た正しい要素選びそのものです。読み方の要点は、altには「画像がある」ではなく「何の画像か」を書くことです。AIへの質問例は、この画面をキーボードだけで操作するとどの順に移動し操作できない箇所はあるか、と聞くことです。
「自分に問題ない」は「誰でも使える」ではない
混同しやすいのは、「自分には問題なく使える」ことと「誰でも使える」ことの違いです。目が見えてマウスが使える人にとって不便がないことは、アクセシブルであることの証明にはなりません。作った本人が使えるのは当たり前で、確認すべきは、その外側にいる利用者です。自分の環境で試すだけでは、締め出してしまっている人の存在に気づけません。
このスライドのポイント
- 混同: 「自分には問題なく使える」vs「誰でも使える（アクセシブル）」
- 目が見えてマウスが使える人に不便がないことは、アクセシブルの証明にならない
- 作った本人が使えるのは当たり前。確認すべきはその外側の利用者
- 自分の環境で試すだけでは、締め出している人に気づけない
バイブコーディングでの確認点
バイブコーディングでの確認点です。公開前に、altの無い画像、labelの無い入力欄、divで作られたボタンが無いかを、AIに一括で検査させます。質問はこう投げます。「この画面に、代替テキストの無い画像、ラベルの無い入力欄、button以外で作られた押せる要素はありますか」。もしAIがARIA属性を多用した修正を出してきたら、「標準の要素で書けませんか」と一段戻します。ARIAは、標準要素で表せないときにだけ使う最後の手段だからです。
このスライドのポイント
- 公開前に、altの無い画像・labelの無い入力欄・divで作られたボタンが無いかをAIに一括検査させる
- 質問例: 「この画面に、代替テキストの無い画像、ラベルの無い入力欄、button以外で作られた押せる要素はありますか」
- AIがARIA属性を多用した修正を出したら「標準の要素で書けませんか」と一段戻す
- ARIAは最後の手段（標準要素を優先）
一問一答とカテゴリGのまとめ
最後に一問一答です。画像の内容を読み上げに伝える属性は何でしょうか。……答えは、alt、代替テキストです。30秒でまとめます。アクセシビリティの技術要件は6つ、キーボード操作、フォーカス、代替テキスト、ラベル、コントラスト、ARIAでした。そして、意味に合った正しい要素を選ぶことが、その多くを自動で満たします。これでカテゴリGは修了です。構造、見た目、誰でも使えること、の3点が揃いました。次回からはカテゴリH、画面の設計、UIとUXへ進みます。関連資料は「画面設計チェックリスト100」「AIアプリ公開前チェックリスト100」「UI改善プロンプト50」です。
このスライドのポイント
- 一問一答: 「画像の内容を読み上げに伝える属性は？」→ alt（代替テキスト）
- 30秒まとめ: 技術要件6つ＝キーボード操作・フォーカス・代替テキスト・ラベル・コントラスト・ARIA。正しい要素選びが多くを自動で満たす
- カテゴリG修了: 構造・見た目・誰でも使える、の3点が揃った
- 次回: カテゴリH、画面の設計（UI/UX）へ
- 関連資料: 「画面設計チェックリスト100」「AIアプリ公開前チェックリスト100」「UI改善プロンプト50」
