1. チャコウェブラジオ
  2. #12 WCAGにおける非干渉の考え方
2024-07-25 12:29

#12 WCAGにおける非干渉の考え方

今回のテーマは「WCAGにおける非干渉」です。


非干渉とは、特定の技術がアクセシビリティをサポートしていない場合でも、他のコンテンツへのアクセスが妨げられない状態を指します。


具体的には、特定の技術がユーザーエージェントで有効・無効か、またはサポートされているかに関係なく、ページがWCAGの適合要件を満たしていることが必要です。


また、依存していない技術も含め、全てのコンテンツが「音声の制御」「キーボードトラップなし」「3回の閃光または閾値以下」「一時停止、停止、非表示」の達成基準を満たしていることが求められます。


非干渉についての説明記事:

Web Content Accessibility Guidelines (WCAG) 2.0

連載27:非干渉(JIS X 8341-3解説(7))


「音声の制御」についての説明回はこちら:

#9 ウェブアクセシビリティと音声の関係


「キーボードトラップなし」についての説明回はこちら:

#10 キーボードトラップについて


「3回の閃光または閾値以下」についての説明回はこちら:

#11 閃光の危険性とその対策について


「一時停止、停止、非表示」についての説明回はこちら:

#7 ウェブアクセシビリティと動くコンテンツの関係:前編

#8  ウェブアクセシビリティと動くコンテンツの関係:後編


アクセシビリティサポーテッドとは:

「アクセシビリティサポーテッド(accessibility supported)」は、ウェブアクセシビリティにおいて使用される重要な概念で、特定のウェブ技術や機能が、アクセシビリティ支援技術(スクリーンリーダー、音声入力、拡大鏡など)と適切に連携し、利用者がその技術や機能を使用できることを意味します。


「チャコウェブラジオ」は株式会社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:05
ゆみこ:こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティやSNS運用など、ウェブに関するテーマについて楽しくお話しするポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ:みあです。よろしくお願いします。
ゆみこ:本日のテーマは「WCAGにおける非干渉の考え方」です。
みあ:これまでに、「音声の制御」、「キーボードトラップなし」、「3回の閃光、又は閾値以下」
「一時停止、停止、非表示」という4つの達成基準を紹介しました。
ウェブページ上の全てのコンテンツは、この4つの達成基準に適合させる必要があると言われています。
それは、非干渉という考え方が元になっています。
今回は、この非干渉についてお話ししたいと思います。
ゆみこ:はい。早速ですが、非干渉とは何でしょうか?
みあ:はい。非干渉とは、ある技術がアクセシビリティサポーテッドではない方法や、
適合しない方法で用いられている場合でも、
ユーザーが他のコンテンツへアクセスすることを妨げない状態を指します。
ゆみこ:アクセシビリティサポーテッドとは何でしょう?
みあ:アクセシビリティサポーテッドとは、ユーザーエージェントと支援技術の両方でサポートされており、
ユーザーが実際に利用できる状態のことを言います。
ユーザーエージェントは、簡単に言うと、ウェブを使うためのソフトウェアのことです。
Chromeのようなブラウザや、Googleのような検索エンジンが当てはまります。
支援技術は、スクリーンリーダーや拡大鏡などの補助ツールを指します。
ゆみこ:なるほど。アクセシビリティサポーテッドというのは、
EdgeやChromeのようなユーザーエージェント、そして音声読み上げなどをしてくれるような補助ツールである支援技術、
両方にサポートされる状態というわけですね。
逆に、アクセシビリティサポーテッドではないというのは、
ユーザーエージェントや支援技術でサポートされていないために、
ユーザーが実際に利用できる状態ではないということですね。
みあ:はい、その通りです。
最初に紹介した非干渉の説明をすごく簡単にすると、
「ある技術がアクセシビリティ的にサポートされておらず、
その技術を使用したコンテンツが特定のユーザーにとって利用できない場合でも、
03:04
その他のコンテンツは影響を受けずに利用できる状態」といった感じになります。
ゆみこ:特定のユーザーが利用できないコンテンツがある場合でも、
その他のコンテンツには影響がない状態ということですね。
ただ、特定のユーザーが利用できないコンテンツがあるというのは、
ウェブアクセシビリティ的には良くないですよね。
みあ:はい、そうですね。
ですので、何か対応を行う必要があります。
例えば、特定のユーザーが利用できないコンテンツがある場合、
そういったユーザーに対応する代替版を用意することで、
ウェブアクセシビリティを向上させる方法があります。
ゆみこ:おお、そのような対応方法があるんですね。
何か具体例はありますか。
みあ:例えば、あるウェブページに複雑なグラフが掲載されているとします。
このグラフを代替テキストで説明しようとすると、
そのテキストは非常に長く分かりにくくなる可能性があります。
一方、すべての説明をウェブページにテキストで掲載すると、
視覚から情報を得る人にとって見にくくなる可能性があります。
このような場合には、主に聴覚で情報を得る人向けに、
詳細なテキストによる説明を提供する別ページを用意します。
こうすることで、視覚から情報を得る人と聴覚から情報を得る人の
両方にとって分かりやすくすることができるんです。
ゆみこ:うーん、なるほど。あえてページを分けて、
分かりやすい方を利用してもらうんですね。
みあ:はい、そうです。
こういった場合、グラフが掲載されている方の元のページは、
ウェブアクセシビリティに対応しているコンテンツと
対応していないコンテンツが混在することになりますよね。
そのように、コンテンツが混在している場合、
ウェブアクセシビリティに対応していないコンテンツの影響で、
対応しているコンテンツまでもが利用できなくなるという事態が
発生することがあります。この状態を干渉と言います。
ゆみこ:せっかくウェブアクセシビリティに対応しているコンテンツがあるのに、
対応していないコンテンツの影響で、特定のユーザーにとっては
使えなくなってしまうということがあるんですね。
これは良くない事態ですよね。
みあ:はい。ですから、WCAGでは干渉を起こしてはいけないとされています。
この一連の考え方が非干渉と呼ばれるものです。
ゆみこ:うーん、なるほど。少し難しいですが大切な考え方ですね。
06:04
ちなみに、非干渉はどのように実現すればいいのでしょうか。
みあ:ウェブページ全体が次の3つの条件を満たした上で、
WCAGの適合要件を満たしている必要があります。
少し言葉が難しいのですが、
WCAGに記載されている通りの表現で説明しますね。
条件1つ目が、依存していない技術がユーザーエージェントで有効になっているとき。
2つ目が、依存していない技術がユーザーエージェントで無効になっているとき。
3つ目が、依存していない技術がユーザーエージェントでサポートされていないとき。
つまり、依存していない技術がブラウザなどのユーザーエージェントで有効か無効か、
またはサポートされているかに関係なく、ページ自体はWCAGの適合要件を満たしている必要があります。
ゆみこ:んー、難しいですね。もう少し詳しく教えてください。
みあ:はい。例えば、メニューの上にカーソルを置くと詳細メニューが表示されるウェブページがあるとします。
詳細メニューがJavaScriptによって表示される仕様だとすると、JavaScriptが無効な場合は詳細メニューが表示されません。
そのため、こういった場合でも詳細メニューが使用できるように、詳細メニューを別途、HTMLでも提供するようにします。
先ほど出てきた依存していない技術というのは、WCAG適合の根拠になっていない技術を指します。
反対に、依存している技術というのは、WCAG適合の根拠になっている技術を指します。
今の例の場合、適合の根拠になっているのは、HTMLで詳細メニューを提供していることだと考えると、HTMLは依存する技術となり、JavaScriptは依存していない技術となります。
ゆみこ:そうなると、JavaScriptがユーザーエージェントで有効であっても無効であっても、またはサポートされていなくても、このページがWCAGの適合要件を満たしている必要があるということでしょうか?
みあ:はい、そうなります。
そしてさらに、WCAGに適合するために依存していないコンテンツも含めて、前回までに紹介した4つの達成基準をクリアする必要があります。
09:07
先ほどの例でいうと、WCAGに適合するために依存していないコンテンツは、JavaScriptで表示される詳細メニューとなりますね。
ゆみこ:なるほど。JavaScriptで表示される詳細メニューも含めた、このページ上のコンテンツすべてで、「音声の制御」、「キーボードトラップなし」、「3回の閃光、又は閾値以下」、「一時停止、停止、非表示」これら4つをクリアしている必要があるということですね。
みあ:はい、そうなんです。
まとめると、非干渉を実現するためには、
1. ある技術がアクセシビリティサポーテッドではない方法、またはWCAGに適合しない方法で使用されているとしても、それがユーザーがウェブページの他部分にアクセスする妨げにならない。
2. 依存していない技術がブラウザなどのユーザーエージェントで有効か無効か、またはサポートされているかに関係なく、ウェブページ自体はWCAGの適合要件を満たしている。
3. WCAGに適合するために依存していないコンテンツも含めて、「音声の制御」、「キーボードトラップなし」、「3回の閃光、又は閾値以下」、「一時停止、停止、非表示」をクリアしている、という3つが必要になります。
ゆみこ:うーん、なるほど。結構複雑な考え方なんですね。
みあ:そうですね。聞き慣れない用語がたくさん出てきますし複雑ですよね。正直、今回のお話はちょっと難しいと思います。
ただ、ウェブアクセシビリティに関わっていく中で少しずつ理解できる部分も出てくると思います。
まずは、WCAGに非干渉という考え方があることと、WCAGの中で最も重要な4つの達成基準として、「音声の制御」、「キーボードトラップなし」、「3回の閃光、又は閾値以下」、「一時停止、停止、非表示」があることを覚えていただければと思います。
ゆみこ:はい、本日のテーマは「WCAGにおける非干渉の考え方」でした。
お聞きいただきありがとうございました。
感想をいただけるととっても嬉しいです。
12:00
ハッシュタグ、チャコウェブラジオをつけて、ぜひSNS、X(旧Twitter)で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
12:29

コメント

スクロール