1. チャコウェブラジオ
  2. #8 ウェブアクセシビリティと..
2024-06-20 10:51

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

ウェブアクセシビリティと動くコンテンツの関係について解説します。

前編ではユーザーが動きを調節できる必要性を話しました。後編の今回は、ウェブアクセシビリティを確保しながらアニメーションや動きを付ける方法について説明します。

WCAGの達成基準2.2.2「一時停止、停止、非表示」では、「動き、点滅、スクロール」に関してと「自動更新」に関しての2つに分けて書かれています。

動きや点滅、スクロールが自動で開始し、5秒以上続く場合、他のコンテンツと一緒に表示されている場合の3つが揃う時には、ユーザーが一時停止や停止、非表示にできる機能が必要です。

自動更新コンテンツについても同様の基準が適用されますが、5秒以上続くかどうかは考慮しません。

チャコウェブラジオ

「チャコウェブラジオ」は株式会社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:04
ゆみこ:こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティやSNS運用など、ウェブに関するテーマについて楽しくお話しするポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みあ:みあです。よろしくお願いします。
ゆみこ:本日のテーマは、「ウェブアクセシビリティと動くコンテンツの関係 後編」です。
みあ:以前から、ウェブアクセシビリティを考える上で、動くコンテンツの取り扱いは重要だとお伝えしています。
前回は、ユーザーが動きを調節できるようにする必要性について、詳しくお話ししました。
ゆみこ:動くコンテンツは、人によって気が散る原因になったり、読んでいる最中に文字や文章が切り替わってしまったりすることで、使いにくさの原因になるというお話でしたね。
ただ、ウェブサイトにおいて、アニメーションなどの動きは重要な要素の一つなので、
こういった動きとウェブアクセシビリティを両立させることができるというお話もありました。
みあ:はい。今回は、ウェブアクセシビリティを確保した上で、アニメーションや動きをつけるにはどうしたらよいのかを解説したいと思います。
ゆみこ:おー、今回はかなり重要な内容になりそうですね。早速ですが、どんなことを考える必要があるのでしょうか。
みあ:それを理解するために、国際的なウェブアクセシビリティのガイドラインであるWCAGを見てみましょう。
動くコンテンツについては、達成基準「2.2.2 一時停止、停止、非表示」に動き、点滅、スクロールに関してと、自動更新に関しての2つに分けて書かれています。
ゆみこ:WCAGの達成基準「2.2.2 一時停止、停止、非表示」は、動くコンテンツについて書かれている項目なんですね。
それが2つの内容に分かれていて、動き、点滅、スクロールの場合と、自動更新の場合があるということなんですね。
みあ:はい、そうなんです。まず、動き、点滅、スクロールの場合について見ていきましょう。
ここでは、動いたり、点滅したり、スクロールするコンテンツが自動的に開始し、5秒よりも長く続き、その他のコンテンツと一緒に表示される場合は、ユーザーがそれらを一時停止や停止したり、非表示にできるようにする必要があると書かれています。
03:18
ゆみこ:自動的に開始とはどういうことでしょうか?
みあ:ユーザーの意図に関わらず、自動で始まるもののことですね。
例えば、ページが読み込まれるとスライドショーが始まるとか、ページのある部分まで行くと、自動的にコンテンツが表示されるようなものです。
ゆみこ:なるほど。ウェブサイトを開くと、トップページでスライドショーが始まるものをよく見かけますね。
ああいう感じで、動きが開始するタイミングをユーザーが調節できない場合ということですね。
みあ:はい、そうです。
そして、5秒よりも長く続くということなので、5秒までの動き、点滅、スクロールは許容されることになります。
ゆみこ:最後の、他のコンテンツと一緒に表示される場合とはどういうことでしょうか?
みあ:動くコンテンツが他のコンテンツと一緒に画面に表示されている場合を指しています。
例えば、あるウェブページの上部にスライドショーがあるとします。
スライドショーの下に他の画像や文章がある場合、動くコンテンツであるスライドショーと他のコンテンツである画像や文章が一緒に画面に表示されていることになります。
これは、動くコンテンツが他のコンテンツと一緒に表示されている状況にあたります。
ゆみこ:なるほど。それでは反対に、一緒に画面に表示されていない状況とはどんなものでしょうか?
みあ:はい。えー、例えば、ページ読み込み中のアニメーションが挙げられます。
ユーザーの通信状況などによっては、ページの読み込みに時間がかかることがありますよね。
そういった場合に、画面にページ読み込み中のアニメーションだけが表示される状況が考えられます。
ページ読み込み中のアニメーション以外に他のコンテンツが表示されていないので、この場合は動くコンテンツが他のコンテンツと一緒に表示されている状況には当たりません。
ゆみこ:なるほど。ここまでをまとめると、自動的に開始する、5秒以上続く、他のコンテンツと一緒に表示される、これら3つ全てに該当する場合には、一時停止や停止、非表示ができる機能が必要ということですね。
06:06
みあ:はい、そうなります。
ただし、動き、点滅、スクロールが必要不可欠な動作である場合は例外とされていて、3つ全てを満たしていても、タイミング調節の機能は不要です。
ゆみこ:例外があるんですね。どういったものが例外になるんでしょうか?
みあ:WCAGでは、具体例は取り上げられていません。ただ、必要不可欠なものの定義としては、もし取り除いてしまうと、コンテンツの情報あるいは機能を根本的に変えてしまい、かつ、適合する他の方法では情報及び機能を実現できないものとされています。
ゆみこ:取り除くことで、コンテンツの情報や機能が変わってしまって、他の方法ではその情報や機能を実現することができないということですね。
うーん、これに当てはまるものはなかなかなさそうですね。
みあ:そうですね。例外ですから、該当するものは多くないと思います。
ゆみこ:そうなんですね。
それでは、もう一つの自動更新の場合について教えてください。
みあ:はい。まず、自動更新するコンテンツというのは、あらかじめ設定された間隔で更新したり消えたりするコンテンツのことを指しています。
例としては、自動的に更新される天気情報やニュースとか、あとは株価のチャートなどが考えられます。
ゆみこ:リアルタイム情報が自動的に更新されていくものなどということですね。
みあ:はい、そうですね。
自動更新するコンテンツに関するWCAGの記述は、コンテンツの更新が自動的に開始し、そのコンテンツがその他のコンテンツと一緒に表示される場合は、
ユーザーが自動更新を一時停止や停止したり、非表示にできる必要があると書かれています。
ゆみこ:基本的には、動き、点滅、スクロールと同じなんですね。
みあ:はい。ただ、5秒間だけ自動更新をして、その後に更新が止まるというのは、自動更新するコンテンツとしてはほとんど意味がない
ということで、こちらには5秒よりも長く続きという条件がありません。
また、自動更新の場合も、必要不可欠な動作の一部である場合は例外となっています。
ゆみこ:まとめると、動き、点滅、スクロールに関しては、自動的に開始して5秒よりも長く続くもので、他のコンテンツと一緒に表示されている場合には、ユーザーがタイミングを調節できるようにする必要があるということですね。
09:18
そして、自動更新するコンテンツは、自動的に更新が開始されて、かつ他のコンテンツと一緒に表示されている場合に、ユーザーがタイミングを調節できるようにする必要があるということですね。
みあ:はい、そうなります。アニメーション等の場合、5秒以下のものなら、タイミング調節の機能は不要です。
反対に、ユーザーがタイミングを調節できるようにすれば、スライドショーのようなものや長めのアニメーションも取り入れることができるということです。
ゆみこ:うん、その点を意識しながら、デザイン性とウェブアクセシビリティのバランスを取ったウェブサイトにするというのが理想的ですね。
本日のテーマは、「ウェブアクセシビリティと動くコンテンツの関係 後編」でした。
お聞きいただきありがとうございました。感想をいただけるととっても嬉しいです。
ハッシュタグチャコウェブラジオをつけて、ぜひSNS、X(旧Twitter)で投稿してください。
また、概要欄にメールフォームリンクをご用意しています。
ウェブアクセシビリティに対応したい方、チャコウェブにお仕事を依頼したい方や、ご相談がある方は、お気軽にメッセージをお寄せください。
次回もお楽しみに。
10:51

コメント

スクロール