00:04
ゆみこ：こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、ウェブアクセシビリティを実践したい製作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ：みあです。よろしくお願いします。
ゆみこ：本日のテーマは、WCAG 2.0 解説シリーズPart14「『ガイドライン2.4 ナビゲーション可能』とその達成基準 その2」です。
みあ：前回に引き続き、ガイドライン2.4「ナビゲーション可能」について解説していきます。
前回はガイドラインの概要と達成基準2.4.1「ブロックスキップ」について説明しました。
今回は、達成基準2.4.2と2.4.3を詳しく見ていきましょう。
ゆみこ：はい、お願いします。
達成基準2.4.2 ページタイトル
みあ：それでは、まず、達成基準2.4.2「ページタイトル」について解説します。
この達成基準を、WCAG 2.0 解説書で見ると、
「ウェブページには、主題又は目的を説明したタイトルがある」と書かれています。
この達成基準は、レベルAで、ウェブページに適切なタイトルを設定することが求められています。
ゆみこ：確かに、ページタイトルがついていないと、どんな内容のウェブサイトでウェブページなのかがわからないので、不便ですよね。
みあ：そうですよね。
適切なページタイトルをつけると、ユーザーがコンテンツを見つけやすくなったり、現在見ているページを確認しやすくなります。
また、ページタイトルはブラウザのタブなどに表示されるため、視覚情報として確認できますが、
それだけでなく、テキストリーダーなどの支援技術を通して音声情報などとしても確認できるんです。
ゆみこ：ページタイトルがあれば、複数の方法でさまざまなユーザーにページの内容を伝えることができるんですね。
ところで、適切なページタイトルとはどのようなものでしょうか。
タイトルを考えるとき、どんな風にしたらよいのかいつも悩みます。
みあ：わかりやすいタイトルを付けるために必要なこととして、解説書で3つのポイントが挙げられています。
それは「ページの主題を明確に示す」「前後の文脈がなくても意味がわかるようにする」「簡潔にする」の3つです。
それぞれ紹介していきます。
まず1つ目は、ページの主題を明確に示すことです。
例えば、「ウェブアクセシビリティについて」というタイトルのページがあるとします。
これだと、ウェブアクセシビリティに関する内容だということはわかりますが、詳細まではわかりません。
では、これを「2024年版：初心者向けウェブアクセシビリティ対応ガイド」としてみましょう。
先ほどと比べて、ページの内容が明確になったと思いませんか。
ゆみこ：そうですね。今年の情報であることや、初心者がターゲットのページであることまでわかるようになりました。
みあ：そうですよね。このように、ページの内容が推測できるような明確なタイトルをつけると、わかりやすくなります。
2つ目は、前後の文脈がなくても意味がわかるようにすることです。
例えば、「作成方法」というページがあったとします。
これでは、何の作成方法が書かれたページかわかりませんよね。
ホームページ内を確認すれば、詳細がわかる場合もあると思います。
ただ、ページタイトルは検索エンジンの検索結果として表示されることもあります。
そのため、前後の文脈がなくても、何のページなのかわかるようにする必要があります。
先ほどの例で言えば、「作成方法」ではなく「スクリーンリーダー対応のフォーム作成方法」とすれば、前後の文脈がわからなくてもページの内容が推測できますよね。
ゆみこ：なるほど。確かにこのタイトルであれば、検索結果に突然出てきたとしても、内容が一目でわかりますね。
みあ：3つ目は、簡潔にすることです。
必要な情報は含めつつも、長くなりすぎないように工夫する必要があります。
ゆみこ：バランスが難しいですが、簡潔でわかりやすいタイトルにする必要があるんですね。
みあ：そうなんです。この3つに気をつけると、適切なページタイトルがつけられるようになります。
ゆみこ：今後、ページタイトルを考える上で意識したいと思います。
達成基準2.4.3 フォーカス順序
みあ：はい。次に、達成基準2.4.3「フォーカス順序」について解説します。
こちらは、解説書にこのように書かれています。
「ウェブページが順を追ってナビゲートできて、そのナビゲーション順が意味又は操作に影響を及ぼす場合、
フォーカス可能なコンポーネントは、意味及び操作性を損なわない順序でフォーカスを受け取る」
こちらもレベルAの達成基準となっています。
ゆみこ：うーん、ちょっと難しいですね。もう少し詳しく教えてください。
みあ：はい。まずこれは、ウェブページ内をキーボード操作などで順を追って移動できる場合について話されています。
そのように順を追って移動できる場合、フォーカス可能なコンポーネント、つまりボタンやリンク、入力欄などは、
実際の表示順や意味と合った順番でフォーカスを受け取るようにする必要があるというものです。
具体例として、フォームに住所を入力する欄があったとします。
日本の一般的な住所の書き方だと、郵便番号、都道府県、市区町村、番地という順番になりますよね。
ですから、フォームをキーボードで操作するときも、これと同じ順番で移動できるようにする必要があるということです。
ゆみこ：市区町村、郵便番号、都道府県、番地といった順番で移動してはいけないということですね。
確かに、フォーカスが移動する順番がバラバラだと使いにくそうです。
みあ：そうですよね。タブキーを押したら、突然とんでもないところにフォーカスが移動したとなると、混乱の原因にもなります。
特に、ロービジョンのユーザーなどは、画面拡大ソフトを使用し、ウェブページの一部を拡大して閲覧していることがあります。
その場合、突然画面外のどこかにフォーカスが移動してしまうと、どこを操作しているのか全くわからなくなってしまう可能性があるんです。
そのため、実際の表示順や意味と合った順番でフォーカスを受け取れるようにすることが大切です。
ゆみこ：それでは、どうすれば実際の表示順や意味と合った順番でフォーカスを受け取れるようになるのでしょうか?
みあ：一番簡単な方法は、コンテンツの順番とHTMLの順番を一致させるという方法だと思います。
ゆみこ：うん、詳しく教えてください。
みあ：はい。HTMLのデフォルトのフォーカス順序は、ソースコードに書かれた順になります。
そのため、マークアップする際に、デザインとソースコードの順番を揃えるようにするとよいです。
例えば、名前、メールアドレス、電話番号の順番に入力欄が並んでいるフォームがあるとします。
このフォームをマークアップする際、名前、メールアドレス、電話番号の順番でマークアップしていれば、視覚的な表示順とフォーカスの順序が一致します。
ですが、電話番号、メールアドレス、名前という順番でマークアップし、上下の順番が逆になるようにCSSで調整した場合、表示順とフォーカス順序が上下反対になってしまいます。
ゆみこ：なるほど。見た目は名前から始まるのにも関わらず、最初にマークアップされている電話番号からフォーカスされることになってしまうんですね。
見た目と違う場所にフォーカスされると混乱しそうです。だから、視覚的な順番とマークアップの順番を一致させる必要があるんですね。
みあ：はい、そうなんです。そこを一致させておけば、自然とフォーカス順序が整うと思います。細かい調整が必要となる場合もありますが、まずは見た目とソースコードの順番を合わせるようにするとよいですね。
エピソードのまとめ
ゆみこ：はい。本日のテーマは、WCAG 2.0 解説シリーズPart14「『ガイドライン2.4 ナビゲーション可能』とその達成基準 その2」でした。
お聞きいただきありがとうございました。感想をいただけるととっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、X（旧Twitter）で投稿してください。また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。次回もお楽しみに。
