勝手に動き出すスライドショーはNG!?‐第27回‐

イラスト:左下に「秘書」、右下に「師匠」、中央には右手を上げた「見習い君」

イラスト:笑顔の秘書秘書:勉強のために様々なウェブサイトを見て回っている見習い君。スライドショーを使って効率的に情報を伝えているページに魅力を感じたようですが、どうやらアクセシビリティ上問題があるようで…。

ウェブアクセシビリティ職人「見習い君」と「師匠」がアクセシビリティな世界を目指す
このストーリーは、新人ウェブアクセシビリティ職人「見習い君」とベテラン職人「師匠」、解説を担当する「秘書」を通して特に障がい者をはじめ身体的な制約がある人たちがウェブ利用時にどのような障壁にぶつかり、どのような工夫をして克服しているかなど「ウェブアクセシビリティ」の実例をはじめ「ウェブアクセシビリティ」と共に重要な「社会的アクセシビリティ」についても紹介していきます。

自動で動くスライドには要注意

イラスト:笑顔で答える見習い君

見習い君:ふむふむ、なるほど。このスライドショーは便利だな…

イラスト:笑顔で後ろで手を組む師匠

師匠:ほう、珍しくずいぶん真面目に勉強しているみたいじゃな。何か気になるページでも見つかったかい?

見習い君:師匠、「珍しく」ってひどくないですか?…いやそれより、すごく効率的に情報を伝えているスライドショーを見つけて、感心していたんです。目を引くデザインだし、自動的にスライドが移動していくから狭い範囲でも情報量を詰め込むことができるし、スライドの画像にもしっかりと代替テキストが設定されているのでアクセシビリティも高いですよね!

イラスト:スライドショー(再生ボタン・一時停止ボタンがないもの)

師匠:どれどれ?うむ、確かに代替テキストは設定されているな…だがこのスライドショーには1つ大きな問題があるんだが、わかるかな?

イラスト:右の手のひらを差し出し意見を聞く見習い君

見習い君:問題?使いやすくていい感じですけど…。

師匠:それなら一度、視点を変えて考えてみてほしい。例えば画面を拡大して一部分ずつ画面を確認しなければならない弱視の利用者はどうしても文字を追うのに時間がかかってしまうだろう。そんな時、どんどんとスライドが進んでいってしまったらどうだろうか。

見習い君:なるほど、ゆっくり時間をかけて読むことができなくなって、もう一周するのを待たないといけなくなってしまうんですね。それは面倒ですよね…。

イラスト:人差し指を出して説明する師匠

師匠:そうじゃろう。以前入力フォームのアクセシビリティについて教える際にも紹介したが、WCAG2.2の達成基準2.2.1、「タイミング調整可能」では、利用者の意思で制限時間を解除・調整・延長できるようにしなければならないと定められているんじゃ。これには操作のタイムアウト(時間制限)だけでなく、スライドショーのように情報を閲覧・確認するための時間制限も含まれているんだ。

イラスト:困り顔の見習い君

見習い君:ああ、あの時の会員登録は本当に大変でしたらからね…。

師匠:それだけではないぞ。次に、注意欠陥障がいのある利用者について考えてみよう。一つの文書に集中し続けることが難しい彼らにとって、スライドショーの下にある文章を読もうとしているのに、そのすぐ近くでスライドが次々と切り替わっていたら、重要な部分にさらに集中しづらくなってしまうのではないか?

見習い君:そうか、元々注意して文章を読むことが苦手なのに、動き続けるスライドショーのせいで更に集中力を持続させるのが難しくなってしまうんですね…それなら、スライドショーは使わない方が良いんでしょうか?

イラスト:笑顔で後ろで手を組む師匠

師匠:いやいや、見習い君が初めに言ってくれた通り、スライドショーは情報を効率的に伝達できる、便利なツールだから、何も使うなということではないんだ。ただWCAG2.2の達成基準2.2.2「一時停止、停止、非表示」では「自動的に始まり、他のコンテンツと並行して5秒間以上動き続けるものについては利用者側で一時停止、停止、頻度調整、もしくは非表示にすることができるようにする」と決められているんだ。だから一時停止/再生ボタンを用意するだけでも、アクセシビリティは改善できるんだよ。

イラスト:スライドショー(再生ボタン・一時停止ボタンが追加されているもの)
イラスト:手をポンと叩く見習い君

見習い君:そっか、動画のように一時停止・再生できれば、その間にゆっくりスライドの内容を読んだり、それ以外の箇所に集中できたりするんですね。

師匠:その通り。因みにスライドショーに限らず、動き・点滅・スクロールを伴うものは情報を伝える上で必要不可欠な場合を除き全てこの基準に当てはまるので要注意じゃな。

見習い君:わかりました、スライドショーや動きのあるコンテンツを使う時には注意します!

イラスト:案内する秘書

秘書:今回はスライドショーなど動きのあるコンテンツのアクセシビリティについて学んだ見習い君。スライドショーは便利な反面、アクセシビリティ対応がとても重要になる要素でもありますので、だれでも無理なく使える仕組みを考える必要がありますね。

もっと詳しく知りたい方は、下記リンクから達成基準の内容を読んでみてくださいね。

特別協賛企業の製品・サービスのご紹介

  • NTT ExCパートナーの公式サイトへ
  • 特別協賛企業の製品・サービスのご紹介_日本電信電話
  • NTTファイナンス株式会社の公式サイトへ
  • NTTアドバンステクノロジ株式会社の公式サイトへ

お知らせ

編集部のおすすめ記事

  • ゆうゆうゆう便り(メルマガ読者募集中)
  • ゆうゆうゆうのfacebook
  • 広告バナー募集中
ページの先頭へ