1. チャコウェブラジオ
  2. #17 WCAGの4つの原則とは?
2024-09-05 11:13

#17 WCAGの4つの原則とは?

エピソードをシェアする

Share on X Share on Facebook Share on Threads

ウェブアクセシビリティを確保するための基本的な指針であるWCAGの4つの原則について解説します。

4つの原則とは:「知覚可能」「操作可能」「理解可能」「堅牢」

知覚可能: コンテンツがすべてのユーザーに認識可能

操作可能: ユーザーがコンテンツを操作できるようにすること

理解可能: コンテンツの内容や操作方法が、すべてのユーザーにとって分かりやすいこと

堅牢: どのようなデバイスや環境でもウェブコンテンツを使えるようにすること

Web Content Accessibility Guidelines (WCAG) 2.0

https://waic.jp/translations/WCAG20/Overview.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


00:06
ゆみこ:こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティやSNS運用など、ウェブに関するテーマについて楽しくお話しするポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ:みあです。よろしくお願いします。
ゆみこ:本日のテーマは「WCAGの4つの原則」とは、です。
みあ:今回は、WCAGで定められている4つの原則について、詳しく解説し、理解を深めていきたいと思います。
ゆみこ:はい。それではさっそく、この4つの原則について教えてください。
みあ:はい。WCAGには、知覚可能、操作可能、理解可能、堅牢という4つの重要な原則があります。
これは、ウェブアクセシビリティを考える上で、基本的な考え方であり、非常に重要なものです。
この原則をしっかりと理解することで、ウェブアクセシビリティへの理解もより深まると思います。
ゆみこ:そうなんですね。ぜひ知っておきたいと思います。ではまず、1つ目の知覚可能について詳しく教えてください。
みあ:はい。知覚可能とは、誰もがウェブコンテンツを認識できるようにしなければならないという考え方です。
人は、ウェブで情報を得る際に、視覚、聴覚、触覚など、様々な感覚を使います。
複数の感覚を組み合わせて使う人もいれば、中には特定の感覚だけを使用して情報を得る人もいます。
そのため、ウェブコンテンツの情報は、どの感覚で情報を得ている人にも伝わるよう、様々な方法で提供する必要があるんですね。
ゆみこ:様々な方法というと、具体的にはどのようなものでしょうか。
みあ:はい。1つの例として、ウェブページ上の画像に代替テキストを付けることが挙げられます。
ウェブページに掲載された画像は、視覚から情報を得る人にとって重要な情報源となります。
しかし、視覚から情報を得るのが難しい人にとって、その内容を理解することは難しいですよね。
そこで、画像に代替テキストを付けるようにすると、その内容を音声や点字に変換できるようになります。
そうすれば、視覚から情報を得るのが難しい人でも、画像の内容を把握できるようになります。
これが、様々な感覚で情報を得られるようにする例です。
03:03
ゆみこ:うん。つまり、視覚で情報を得る人は、画像から直接情報を得て、聴覚や触覚で情報を得る人は、代替テキストから画像の情報を得るということですね。
みあ:はい。その通りです。
だからこそ、代替テキストの提供は非常に重要だと言われているんですね。
このように、知覚可能を実現することで、より多くの人がウェブコンテンツにアクセスできるようになります。
ゆみこ:うん。そうなんですね。では次に、2つ目の操作可能について教えてください。
みあ:はい。操作可能とは、誰もがウェブコンテンツを使用できるようにしなければならないという考え方です。
例えば、障害や怪我、マウスの故障など、様々な理由でマウスの使用が難しい人がいます。
そのような人にとって、マウス操作を前提に作られたウェブコンテンツは、利用しにくかったり、利用できなかったりする可能性があります。
ゆみこ:そうですよね。だからこそ、誰にとっても利用しやすいウェブコンテンツを作ることが大切で、
以前お話に出てきたように、キーボードだけでも操作ができるようにする必要があるんでしたよね。
みあ:はい。その通りです。キーボードで操作できるようにしておけば、
マウス操作が難しい人でもスムーズにウェブコンテンツを利用できるようになります。
それ以外にも、ユーザーがウェブコンテンツを利用するのに十分な時間を提供することも、操作可能を実現する上で重要です。
ゆみこ:「ユーザーがウェブコンテンツを利用するのに十分な時間を提供する」ですか?
みあ:はい。文章を読むのに時間がかかる人や、操作に時間がかかる人など、ユーザーによって必要な時間は異なります。
ですから、十分な時間を確保したり、必要に応じて制限時間を延長できるようにしたりすることが大切なんですね。
具体的には、スライドショーを一時停止できるようにしたり、フォーム入力の制限時間を延長できるようにするなどの方法があります。
ゆみこ:なるほど。スライドショーに文字が書いてある場合は、一時停止できればゆっくり読めますし、フォーム入力の制限時間も延長できれば、ユーザーは焦らずに入力できますよね。
みあ:はい。そうなんですね。
それでは、3つ目の理解可能について見ていきましょう。
理解可能とは、ウェブコンテンツの内容や使い方を誰にでも分かりやすくしなければならないという考え方です。
06:03
みあ:具体的には、ウェブサイト内のヘッダーのデザインを統一したり、フォームのエラーメッセージを分かりやすくしたりすることなどが挙げられます。
ゆみこ:ヘッダーのデザインを統一するのはどうしてでしょうか?
みあ:ページによってヘッダーのデザインがバラバラだとユーザーは混乱してしまいます。
例えば、トップページではヘッダーの左側にロゴ、右側にメニューがあるのに、他のページではそれが逆になっていたり、メニューの並び順がページごとに違っていたりすると、どこに何があるのか分かりにくくなってしまいます。
ゆみこ:なるほど。確かにそのようなヘッダーは使いにくそうです。ウェブに慣れていない人はさらに戸惑うかもしれませんね。
みあ:そうですよね。また、フォームのエラーメッセージについても、単に「入力内容にエラーがあります」と表示するだけでは、どの部分でどのようなエラーが起きているのかがすぐには分かりません。
一方で、「フリガナは全角カタカナで入力してください」のように具体的なメッセージを表示すれば、エラーの箇所と原因が一目瞭然ですよね。
ゆみこ:うーん、なるほど。確かにそうですね。
そういった工夫をすることで、ユーザーは混乱することなくスムーズにウェブコンテンツを利用できるようになるんですね。
みあ:はい、その通りです。
次は、最後の原則である堅牢についてです。
堅牢とは、どのようなデバイスや環境でもウェブコンテンツを使えるようにしなければならないという考え方です。
ゆみこ:様々なデバイスや環境で利用できることが重要なのは、どうしてでしょうか。
みあ:それは、すべてのユーザーに正しいウェブコンテンツを提供するためです。
もし、ウェブコンテンツが特定のデバイスや環境でしか正しく表示されないとしたら、ユーザーが情報を正確に得られなくなってしまう可能性があると思いませんか。
ゆみこ:ああ、確かにそうですね。スマートフォンを使う人もいれば、パソコンを使う人もいますし、使っているブラウザもユーザーによって異なりますもんね。
そのすべてに正しいウェブコンテンツを提供するために、堅牢の考え方が重要なんですね。
みあ:はい、そうなんです。そして、どのようなデバイスや環境でもウェブコンテンツを使えるというのは、もちろん支援技術も含んでいます。
支援技術との互換性がないと、その技術を利用しているユーザーがウェブコンテンツにアクセスできなくなってしまうからです。
ゆみこ:うーん、なるほど。つまり堅牢を実現することで、ユーザーは自分に合った環境や方法でウェブコンテンツを利用できるようになるんですね。
09:12
みあ:はい、そうなんです。
ゆみこ:では、堅牢はどのようにして実現するのでしょうか。
みあ:HTMLなどの技術を標準に沿って使用することが重要です。
そうすることで、様々なデバイスや環境で正しく表示でき、支援技術との互換性も確保できます。
反対に、標準に沿わない使い方をしてしまうと、ブラウザによって正しく表示されなかったり、支援技術との互換性が損なわれたりする可能性があるんです。
ゆみこ:そうなんですね。公式のドキュメントなどをしっかり確認しながら制作することが大切ですね。
みあ:はい、その通りです。今回紹介した、知覚可能、操作可能、理解可能、堅牢という4つの原則は、ウェブアクセシビリティやWCAGの土台となる考え方です。
まずは、この原則をしっかりと理解することで、より詳細な達成基準などへの理解も深まっていくのではないかと思います。
ゆみこ:WCAGの4つの原則について、とてもよく理解できました。
本日のテーマは「WCAGの4つの原則とは」でした。
お聞きいただきありがとうございました。
感想をいただけるととても嬉しいです。
ハッシュタグ「チャコウェブラジオ」を付けて、ぜひSNS、X(旧Twitter)で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。次回もお楽しみに。
11:13

コメント

スクロール