00:04
ゆみこ：こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ：みあです。よろしくお願いします。
ガイドライン2.4の達成基準
ゆみこ：本日のテーマは、WCAG 2.0 解説シリーズPart16「『ガイドライン2.4 ナビゲーション可能』とその達成基準 その4」です。
みあ：前回は、達成基準2.4.4「リンクの目的（コンテキスト内）」と2.4.5「複数の手段」について解説しました。
今回は、ガイドライン2.4に関する解説の最後として、達成基準2.4.6と2.4.7について詳しく見ていきたいと思います。
ゆみこ：ついに、ガイドライン2.4の解説も最後ですね。今回もよろしくお願いします。
みあ：はい。それでは、達成基準2.4.6「見出し及びラベル」から見ていきましょう。
この達成基準をWCAG 2.0 解説書で見ると、「見出し及びラベルは、主題又は目的を説明している」と書かれています。
この達成基準は、ウェブページにどんな情報があるのか、その情報がどのように構成されているのかを、ユーザーが理解しやすくなるよう手助けするためのもので、レベルAAとなっています。
ゆみこ：見出しやラベルで、主題や目的を説明する必要があるという達成基準なんですね。
見出しは、内容がわかるように文章の前につけるタイトルのことで、ラベルはフォームの項目やボタンなどが何を示しているのかをわかるようにするものですよね。
みあ：はい、その通りです。
わかりやすい見出しがあると、ユーザーは自分が探している情報を早く見つけることができ、ウェブページ内のつながりも理解しやすくなります。
また、わかりやすいラベルがあれば、どのボタンや入力欄がどんな役割なのかをすぐに理解できますよね。
ただ、この達成基準は、見出しやラベルを必ずつけるよう求めるものではありません。
あくまで、見出しやラベルをつける場合に、わかりやすくすることが求められています。
ゆみこ：なるほど。見出しやラベルは必須ではないが、つける場合はわかりやすくする必要があるということですね。
みあ：はい、そうです。また、見出しやラベルをつける場合、ウェブページの構造が正しく伝わるように達成基準1.3.1「情報及び関係性」を満たす必要があります。
ゆみこ：達成基準1.3.1「情報及び関係性」を満たすには、見出しをただ大きな文字にするのではなく見出し要素にするなど、セマンティックHTMLでマークアップするのが重要でしたよね？
みあ：はい、そうですね。セマンティックHTMLでのマークアップが基礎となります。
達成基準1.3.1については第23回で詳しくお話ししているので、ぜひそちらで確認してみてください。
ゆみこ：はい、あとで確認したいと思います。それでは、達成基準2.4.6に適合するためにはどのように対応すればよいのでしょうか？
達成基準2.4.6の解説
みあ：達成方法は主に2つ、「説明的な見出しをつける」と「説明的なラベルを提供する」です。
ゆみこ：主に2つの達成方法があるんですね。もう少し詳しく教えてください。
みあ：はい。「説明的な見出しをつける」については、わかりやすいタイトルの付け方として第32回で紹介した、主題を明確に示す、前後の文脈がなくても意味がわかるようにする、簡潔にするの3つを意識してもらえばよいと思います。
詳細は第32回を確認してみてください。
「説明的なラベルを提供する」については、ボタンの場合「確認」、「送信」など何を行うためのボタンなのかを明確にすることが重要です。
入力欄の場合は、「名前」、「住所」など何を入力するのかを明確にしておきます。なお、その入力欄が必須項目の場合、「名前（必須）」というように必須であることも伝わるようにしておくとよいでしょう。
ゆみこ：うん。その2つを意識すると、わかりやすい見出しとラベルにすることができるんですね。
みあ：はい、そうなんです。
それでは、続いて達成基準2.4.7「フォーカスの可視化」についてやっていきましょう。
この達成基準を解説書で確認すると、「キーボード操作が可能なあらゆるユーザインタフェースには、フォーカスインジケータが見える操作モードがある」と書かれています。
こちらはレベルAAの達成基準です。
ゆみこ：フォーカスインジケータは、以前少しだけ話に出てきましたね。
キーボードで操作する際に、どこが選択されているかを示す視覚的なマーカーのことだったと思います。
みあ：はい、その通りです。
リンクやボタンの周りに表示される青や黒の枠線や、フォームの入力欄で点滅するカーソルなどがこれに当たります。
ゆみこ：なるほど、そういった視覚的なマーカーはすべてフォーカスインジケータなんですね。
達成基準2.4.7の重要性
みあ：たくさんのボタンやリンクがあるコンテンツでは、フォーカスインジケータが表示されないと、どこが選ばれているのかがわからなくなってしまいます。
この達成基準は、フォーカスインジケータを表示することでフォーカスされているものをわかりやすくし、ユーザーが迷わずに操作できるようにするためのものなんですね。
そのため、画面上に操作可能な要素が1つしかない場合は、フォーカスインジケータがなくても達成基準に適合することができます。
なぜなら、操作可能な要素が1つしかない場合は、フォーカスインジケータがなくても現在地を把握することができるからです。
ゆみこ：なるほど。あくまでフォーカスされている要素がどれかを把握できるようにするのが重要なので、画面上にキーボード操作可能な要素が1つしか表示されない場合はフォーカスインジケータがなくても達成基準を満たせるんですね。
みあ：はい、そうなんです。
ゆみこ：それでは、画面上にキーボード操作可能な要素が複数存在する場合は、どうすればよいのでしょうか?
みあ：まずは、セマンティックHTMLでマークアップすることが重要です。
また、CSSでフォーカスインジケータを非表示にしているウェブサイトが多くありますが、こういった非表示設定をしないことも大切です。
ゆみこ：おー、またセマンティックHTMLが出てきましたね。
セマンティックHTMLでマークアップすると、ボタンやリンクなどにキーボード操作でフォーカスが当たるようになるんですよね。
みあ：はい。そのため、基礎的な対応として重要です。
それだけでなく、CSSでウェブサイト全体のフォーカスインジケータを非表示にしてしまうと、デフォルトのフォーカスインジケータも表示されなくなってしまいます。
ですから、基本的にはCSSでフォーカスインジケータを非表示にしないことが大切です。
デザインなどの観点で非表示にする場合は、別の形でフォーカスインジケータが表示されるようにする必要があります。
ゆみこ：基本的には、CSSでフォーカスインジケータを非表示にしたりしないで、デフォルトのまま表示させれば良いのですね。
ただし、デザインの都合などでデフォルトのフォーカスインジケータを非表示にする場合は、代わりに別のものを提供する必要があるということですね。
みあ：はい、その通りです。
ここまで、4回にわけてガイドライン2.4「ナビゲーション可能」についてやってきました。
これでガイドライン2.4および、4つの原則の2つ目「操作可能」は終わりです。
次回からはまた新しい原則に入っていきます。
ゆみこ：はい。本日のテーマは、WCAG 2.0 解説シリーズPart16「『ガイドライン2.4 ナビゲーション可能』とその達成基準 その4」でした。
お聞きいただきありがとうございました。
感想をいただけるととっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、X（旧Twitter）で投稿してください。
また概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方やご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
