1. チャコウェブラジオ
  2. #37 WCAG 2.0 解説シリーズPar..
2025-02-06 12:23

#37 WCAG 2.0 解説シリーズPart19「『ガイドライン3.2 予測可能』とその達成基準 後編」

2回にわたって解説するWCAG 2.0にあるガイドライン3.2「予測可能」についての後編です。

達成基準 3.2.3「一貫したナビゲーション」、達成基準 3.2.4「一貫した識別性」は、同一サイト内でのコンテンツ配置やボタンラベルを統一し、利用者が混乱なく操作できる状態を目指すことが求められています。

達成基準 3.2.3: 一貫したナビゲーションを理解する

https://waic.jp/translations/WCAG21/Understanding/consistent-navigation.html

達成基準 3.2.4: 一貫した識別性を理解する

https://waic.jp/translations/WCAG21/Understanding/consistent-identification.html

「チャコウェブラジオ」は株式会社Cyber Catsが運営するチャコウェブのスタッフが、ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。

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

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のガイドライン3.2 予測可能に関する達成基準の後編として、一貫したナビゲーションと一貫した識別性について詳しく解説されています。具体的には、ウェブサイト内でのナビゲーションの一貫性や、ボタンやリンクのラベルの統一性が重要であることが強調されています。

00:04
ゆみこ:こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ:みあです。よろしくお願いします。
ゆみこ:本日のテーマは、WCAG 2.0 解説シリーズPart19「『ガイドライン3.2 予測可能』とその達成基準 後編」です。
みあ:前回は、ガイドライン3.2「予測可能」の説明と、レベルA、AAの4つの達成基準のうち、
3.2.1「フォーカス時」と3.2.2「入力時」を解説しました。今回は残りの2つについて詳しくお話しします。
ゆみこ:はい。お願いします。
一貫したナビゲーションの重要性
みあ:まずは、達成基準3.2.3「一貫したナビゲーション」です。
この達成基準について、WCAG 2.0 解説書では、
「ウェブページ一式の中にある複数のウェブページ上で繰り返されているナビゲーションのメカニズムは、
繰り返されるたびに相対的に同じ順序で出現する。ただし、利用者が変更した場合は除く」と説明されています。
これはレベルAAの達成基準です。
ゆみこ:ウェブページ一式というのは、簡単に言うとウェブサイトのことですね。
つまり、ウェブサイト全体に関わる達成基準なんですね。
みあ:そうなんです。この達成基準は、ウェブサイト内で繰り返し表示されるコンテンツが一貫性を保つことを求めています。
ゆみこ:一貫したデザインやレイアウトとは、具体的にはどんな感じでしょうか。
みあ:例えば、ヘッダーにロゴ、グローバルナビゲーション、検索フォームが順に配置されている場合、
他のページでもこの順番を維持する必要があります。
ゆみこ:なるほど。ロゴ、検索フォーム、グローバルナビゲーションというように順番を入れ替えてはいけないんですね。
どうして一貫性が重要なのでしょうか?
みあ:それは、ユーザーが必要なコンテンツをスムーズに見つけられるようにするためです。
特に画面拡大ソフトを利用しているユーザーにとって、ナビゲーションや繰り返し表示されるコンテンツが一貫性のある配置になっていることは非常に重要です。
画面拡大ソフトでは、一度に画面全体を確認することが難しいため、
表示が統一されていないと、目的の要素を見つけるのに時間がかかる場合があります。
一貫性が保たれていると、ユーザーは必要な情報を素早く見つけることができるんです。
ゆみこ:なるほど。デザインやレイアウトが統一されていると、支援技術を使っていないユーザーにとっても直感的で便利ですよね。
みあ:そうですね。さらに認知障害や知的障害のあるユーザーにとっても、内容を理解しやすくなると言われています。
ゆみこ:それでは、この達成基準に対応する方法を教えてください。
みあ:繰り返し表示されるコンテンツを同じ順番で配置することで、この達成基準に適合することができます。
例えば、ヘッダーがロゴ、グローバルナビゲーション、検索フォームという順番で配置されている場合、すべてのページでこの順番を維持します。
もし特定のページで検索フォームが不要であれば、検索フォームを削除してロゴ、グローバルナビゲーションという順番で表示することが可能です。
ゆみこ:要素の順番を入れ替えることはできないけれど、要素を削除することはできるんですね。
みあ:はい、そうです。反対に、要素と要素の間に別の要素を追加することも可能です。
例を挙げると、グローバルナビゲーションのリンクとリンクの間に、サブナビゲーションを追加するなどですね。
ただし、この場合もグローバルナビゲーションのリンク自体は順番を変えてはいけません。
ゆみこ:うん。例えば、グローバルナビゲーションにトップ、サービス、会社概要というリンクがある場合、サービスの中に特徴や料金というサブナビゲーションを追加することが可能ということでしょうか?
みあ:はい、その通りです。ただし、トップ、サービス、会社概要というリンクの順番を入れ替えることはできないというのが重要な部分ですね。
それでは次に行きましょう。次は達成基準3.2.4「一貫した識別性」です。
一貫した識別性の解説
みあ:解説書には「ウェブページ一式の中で同じ機能を有するコンポーネントは、一貫して識別できる」と書かれています。
これは、ウェブサイト内で繰り返し使用されるボタンやリンクなどの中で、同じ機能を持つものはラベルや名前に一貫性を持たせる必要がある、という達成基準です。
適合レベルはAAです。
ゆみこ:こちらもウェブサイト全体に関わる達成基準なんですね。
同じ機能を持つというのは、具体的にはどういうことでしょうか?
みあ:ボタンの場合、押したときの動作が同じであれば、同じ機能を持つボタンとみなされます。
例えば、押すとフォームが送信されるボタンは送信ボタン、資料がダウンロードされるボタンはダウンロードボタンといった具合です。
ゆみこ:ああ、なるほど。別ページであっても、押したときの動作が同じであれば、同じ機能を持つボタンになるんですね。
みあ:はい、その通りです。リンクも同じような考え方です。
ゆみこ:それでは、ラベルや名前に一貫性を持たせる、とはどういうことでしょうか。
みあ:同じ機能を持つボタンのラベルは同じものにするといったように、ラベルや名前を統一することを指しています。
例えば、フォームの送信ボタンがある場合、どのページでも「送信」というラベルを使うと一貫性が保てます。
これが一部のページでは「確認して送信」になっているなどバラバラだと、動作が同じかどうかが分かりにくくなります。
ゆみこ:たしかに、「送信」に統一した方が分かりやすいですね。
みあ:そうですよね。スクリーンリーダーユーザーや認知障害のあるユーザーにとっては、この一貫性は特に重要です。
なぜなら、一貫性のない表示は混乱の原因になるからです。
また、一貫性が重要なのは機能を持つアイコンの代替テキストでも同じです。
例えば、クリックするとそのページを印刷するプリンターアイコンの場合、ページごとに「印刷する」「プリンターに送信する」など異なる代替テキストを設定するのは避けた方が良いです。
ゆみこ:うーん、同じ機能を持ったアイコンなので、代替テキストを統一した方が良いということですね。
ただ、状況によっては異なる表現が必要な場合もありますよね。
例えば、ファイルをダウンロードするアイコンがあったとして、ページごとにダウンロードできる資料が異なるといった場面です。
その場合は、「ダウンロード (文書のタイトル)」というように、基本的な部分は統一しつつ、個別の情報を追加した代替テキストを設定することが認められています。
達成基準の確認とまとめ
みあ:具体的には、「ダウンロード(請求書)」、「ダウンロード(領収書)」といった感じです。
このようにすると、一貫性を保ちつつ、より正確な情報を伝えられます。
ゆみこ:なるほど。そのようにすれば良いんですね。他に対応する上で重要なポイントはありますか?
みあ:はい。同じ機能を持つコンテンツに対して、一貫したラベル、名前、代替テキストを設定する際、
達成基準1.1.1「非テキストコンテンツ」と達成基準4.1.2「名前 (name) ・役割 (role) 及び値 (value)」の要件も満たす必要があります。
1.1.1は第20回でご紹介した通り、非テキストコンテンツへの代替テキスト提供に関する達成基準です。
例えば、代替テキストを設定するために、img要素のalt属性を使用するといった対応を行います。
4.1.2は今後解説予定ですが、簡単に言うとボタンやリンクなどに、プログラムが理解できる名前や役割、値を設定することが求められる達成基準です。
リンクならa要素を使う、ボタンならbutton要素を使うというように、HTMLを仕様通りに使用するなどの対応が必要となります。
このように、達成基準1.1.1、4.1.2を満たすことのできる方法で、同じ機能を有するコンテンツに対して、一貫したラベルや代替テキストを提供することで、この達成基準を満たすことができます。
ゆみこ:うーん、2つの達成基準を満たした上での対応が必要なんですね。なんだかすごく大変そうです。
みあ:これだけ聞くと大変そうですよね。
ですが、1.1.1も4.1.2もレベルAの達成基準です。代替テキストの適切な設定やセマンティックHTMLの使用に気をつければ対応可能です。
それぞれの事項を一つずつ確認しながら進めていけば良いのではないでしょうか。
ゆみこ:はい。本日のテーマは、WCAG 2.0 解説シリーズPart19「『ガイドライン3.2 予測可能』とその達成基準 後編」でした。
お聞きいただきありがとうございました。感想をいただけるととっても嬉しいです。
ハッシュタグ「チャコウェブラジオ」をつけて、ぜひSNS、X(旧Twitter)で投稿してください。また概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方やご相談がある方はお気軽にメッセージをお寄せください。
次回もお楽しみに。
12:23

コメント

スクロール