1. チャコウェブラジオ
  2. #31 WCAG 2.0 解説シリーズPar..
2024-12-19 11:03

#31 WCAG 2.0 解説シリーズPart13「『ガイドライン2.4 ナビゲーション可能』とその達成基準 その1」

今回から4回でWCAG2.0ガイドライン2.4ナビゲーション可能の解説に入ります。

ガイドライン2.4ナビゲーション可能は、4つの原則「操作可能」の一部で、ユーザーが迷わず目的のコンテンツへアクセスし、現在位置を把握できるようにすることが目的。

ナビゲーションには「現在地の把握」と「別の場所へ移動する」2つの役割があります。

達成基準2.4.1「ブロックスキップ」は、スクリーンリーダーやキーボード利用者が重複ブロックを飛ばし、メインコンテンツへ素早く移動できるようにする仕組みの提供が必要

ブロックスキップの実装方法として、先頭に「メインコンテンツへ移動」リンクを設置する、あるいは見出しタグでコンテンツをグループ化するなどが紹介されている

ブロックスキップ : 達成基準 2.4.1 を理解する

https://waic.jp/translations/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html

「チャコウェブラジオ」は株式会社Cyber Catsが運営するチャコウェブのスタッフが、ウェブアクセシビリティやSNS運用など、ウェブに関するテーマについて楽しくお話しするポッドキャストです。

ご感想やチャコウェブへのご相談はメールフォームよりお寄せください。

https://www.chaco-web.com/contactus.html

出演:

やまぐちみあ(ウェブアクセシビリティマネージャー)

https://twitter.com/chacoweb_ymgc

社内で定期的に開催している勉強会では、制作メンバーとウェブアクセシビリティ関連の知識を共有したり、意見交換を積極的に行っています。

お客様のホームページ制作にあたっては、ディレクター、デザイナーとの打ち合わせ時にウェブアクセシビリティの観点からデザインや仕様の決定に携わっています。

また、ウェブアクセシビリティに関するブログ記事の更新も担当しています。

よこやまゆみこ(ウェブマーケティングマネージャー)

https://twitter.com/chacoweb_yama

ブログを9年間運用してきた経験から実践的なアドバイスを得意とし、コンテンツ発信を活用して企業の価値を高めるサポートをしています。

400件を超える中小企業のホームページ制作に関わり、SEO、コンテンツマーケティング、ライティングの知識を使ったコンテンツ制作で利益につなげる制作ディレクションと利益獲得のアドバイスをしてきました。

ウェブの情報発信力を存分に活用する考え方を基礎からお伝えし、運用能力を身につけていただくお手伝いをしています。

チャコウェブ公式サイト

https://www.chaco-web.com/

チャコウェブ公式X

https://twitter.com/_chacoweb

株式会社Cyber Cats公式サイト

https://cybercats.jp/

ポッドキャストの書き起こし「LISTEN」はこちら

https://listen.style/p/chacoweb?k2xLjX2w

サマリー

このエピソードでは、WCAG 2.0のガイドライン2.4「ナビゲーション可能」の重要性とその達成基準を詳しく解説しています。特に、ユーザーがウェブサイト内で迷うことなく情報を見つけられるようにするための手段が強調されています。

00:04
こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ:みあです。よろしくお願いします。
ガイドライン2.4の概要
ゆみこ:本日のテーマは、WCAG 2.0 解説シリーズPart13「『ガイドライン2.4 ナビゲーション可能』とその達成基準 その1」です。
みあ:今回からは、4つの原則の2つ目「操作可能」の最後、ガイドライン2.4について解説していきます。
このガイドラインには、レベルAとAAだけでも7つの達成基準があります。
ですので、4回に分けて見ていきたいと思います。
ゆみこ:はい。お願いします。それでは、まずはガイドラインについて教えてください。
みあ:はい。ガイドライン2.4「ナビゲーション可能」をWCAG 2.0 解説書で確認すると、
「利用者がナビゲートしたり、コンテンツを探し出したり、現在位置を確認したりすることを手助けする手段を提供すること」と記述されています。
ユーザーが必要とするコンテンツを見つけるのを助け、現在地を把握できるようにするのが目的のガイドラインとなっています。
ゆみこ:ナビゲーション可能という名前の通りで、ウェブサイト内でユーザーが迷わないようにするためのガイドラインなんですね。
みあ:はい、そうなんです。ウェブサイト内での移動や現在位置の把握というのは、特に意識せず行っている場合が多いと思います。
ですが、ユーザーの状況や障害特性によっては、ウェブサイト内で移動したり、現在位置を把握したりするのが難しい場合があるんです。
ゆみこ:うーん、そうなんですか。具体的な例があれば教えてください。
みあ:例えば、リンク先の表示が分かりにくいと、ユーザーはウェブサイト内で迷子になってしまうことがあります。
特に、「詳しくはこちら」のような漠然としたリンクは、テキストリーダーユーザーにとって行き先を即座に理解するのが難しいものです。
また、一般的ではない独特なインターフェースは、認知障害があるユーザーや、普段あまりウェブを使わないユーザーを混乱させてしまう原因になります。
さらに、サイトの構造が複雑すぎると、今自分がどのページにいるのかわからなくなったり、探している情報になかなかたどり着けなかったりと、ユーザーを困らせてしまう可能性があるんです。
ゆみこ:なるほど。そういった問題があるんですね。
ナビゲーションの役割と重要性
ゆみこ:確かに、ページ数が多かったり、作りが複雑なサイトでは、自分の欲しい情報をすぐに見つけられないことがありますよね。
そういった場合、ユーザーは混乱したり、場合によってはウェブサイトの利用を諦めてしまうかもしれません。
みあ:そうなんです。そう考えると、ナビゲーションの重要性が理解できるのではないでしょうか。
ちなみに、このガイドラインでは、ナビゲーションに2つの役割があると書かれています。
1つ目は、現在地をユーザーに知らせる役割です。
2つ目は、ユーザーが別の場所に行けるようにする役割です。
ゆみこ:ナビゲーションには2つの役割があるんですね。もう少し具体的に教えてください。
みあ:はい、もちろんです。
例えば、ページタイトルを適切につけていれば、ユーザーは自分が今何のページを見ているのかを把握することができますよね。
これは、現在地をユーザーに知らせるという役割を果たしています。
それでは次に、ウェブサイトのヘッダーメニューを例に考えてみましょう。
ヘッダーメニューに明確な項目を表示しておけば、ユーザーはどこに移動できるのかを把握することができます。
そして、その項目がリンクになっていれば、それをクリックして移動することができますよね。
これは、ユーザーが別の場所に行けるようにするという役割を果たしています。
ゆみこ:うーん、ナビゲーションにはそのようにとても重要な役割があるんですね。
みあ:そうなんです。
達成基準2.4.1の解説
みあ:それでは次に達成基準について解説していきたいと思います。
今回は1つ目の達成基準、2.4.1「ブロックスキップ」について見ていきます。
この達成基準について、解説書には「複数のウェブページ上で繰り返されているコンテンツのブロックをスキップするメカニズムが利用できる」と書かれています。
こちらはレベルAの達成基準です。
ゆみこ:「複数のウェブページ上で繰り返されているコンテンツのブロック」とは具体的にはどんなものでしょうか?
みあ:例えば、ヘッダーロゴやヘッダーメニュー、パンくずリストなどが挙げられます。
こういったものは、同じ内容のものが複数のウェブページ上で繰り返されることが多いですよね。
ゆみこ:そうですね。全てのページに同じように存在する場合もあります。そういったものをブロックとみなすんですね。
みあ:はい、そうなんです。
ただし、単語や短いフレーズ、一つのリンクといった小さな要素はブロックとはみなされません。
そのため、そのようなものは複数ページで繰り返し使用される場合でもスキップ機能は不要となります。
ゆみこ:まとめると、ヘッダーロゴやヘッダーメニュー、パンくずリストのように繰り返されるものをブロックとし、
それをスキップできるようにする必要があるんですね。
ただ、単語や短いフレーズ、一つのリンクといった小さな要素はブロックとして扱われないので、スキップ機能は不要なんですね。
そもそも、どうして複数のページ上で繰り返されているコンテンツのブロックをスキップできるようにする必要があるのでしょうか。
みあ:ウェブサイトを利用するとき、静眼者はヘッダーなどの繰り返されるブロックを無視して、メインコンテンツに直接目を向けることができますよね。
しかし、スクリーンリーダーユーザーは毎回同じブロックを通らないとメインコンテンツにたどり着くことができません。
これはキーボードで操作しているユーザーの場合も同じです。
マウスユーザーが直接メインコンテンツにアクセスできるのに対し、キーボードで操作するユーザーは毎回同じブロックを通過しなければメインコンテンツに到達できません。
ですが、繰り返されるブロックをスキップできるようにしておけば、スクリーンリーダーユーザーやキーボードで操作するユーザーもすぐにメインコンテンツに到達することができるんです。
ゆみこ:あー、なるほど。毎回同じ内容を通らなければいけないというのは煩わしいので、スキップできる方が使いやすそうですね。では、ブロックスキップを実現するにはどうしたらよいのでしょうか?
みあ:えー、大きく分けると2つの方法があります。
1つ目は、繰り返されるブロックをスキップするためのリンクを作る方法です。
繰り返されるブロックをスキップするためのリンクを作成し、それをヘッダーロゴやヘッダーメニューよりも前、ページの一番最初に設置します。
こうすれば、ページの先頭に「メインコンテンツへスキップ」といったリンクが表示されるので、それを選ぶことでヘッダーメニューやパンくずリストなどをスキップできるようになります。
2つ目は、スキップ可能な方法で繰り返されるブロックをグループ化する方法です。
グループ化にはいくつかの方法がありますが、手軽な方法の一つに、見出し要素を活用したものがあります。
コンテンツの各セクション開始位置に、H1、H2などの見出し要素を設定することで、ページの構造やセクションの始まりを明確にすることができます。
そして、この情報はテキストリーダーなどの支援技術にも伝わるため、テキストリーダーユーザーなどが繰り返されるブロックをスキップできるようになるんです。
ゆみこ:なるほど。繰り返されるブロックをスキップするリンクを作成する方法と、スキップ可能な方法で繰り返されるブロックをグループ化する方法があるんですね。
みあ:はい、そうなんです。セクションタイトルを見出し要素でマークアップするというのは、一般的によく行われる方法です。
ですから、複数ある達成方法のうち、これが一番取り組みやすいのではないかと思います。
ゆみこ:本日のテーマは、WCAG 2.0 解説シリーズPart13「『ガイドライン2.4 ナビゲーション可能』とその達成基準 その1」でした。
お聞きいただきありがとうございました。感想をいただけるととっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、X(旧Twitter)で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
11:03

コメント

スクロール