はじめに：魅力的なデザインとアクセシビリティのジレンマ
こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
ミヤです。よろしくお願いします。
今回はアクセシビリティに関する雑談会です。
テーマを一つ取り上げて、アクセシビリティについて考えたことや感じたことなどを自由にお話ししていきます。
よろしくお願いします。
今回のテーマは、アクセシビリティ的には工夫が必要だけど、魅力的なサイトデザインについてです。
これは私的に思うところがありまして、このテーマにしました。
アクセシビリティ必要ないよとか、アクセシビリティはちょっとやだなっていう方がいらっしゃったりするんですけど、
ウェブアクセシビリティはちょっとみたいな。
その方がおっしゃるようなことで多いのって、アクセシビリティに対応すると、サイトのデザインが限られてくるから、
なんかちょっと良くないサイトとか、ちょっとダサいサイトになっちゃうんじゃないのっていう心配というか、
あとはこういうオシャレなサイトが作りたいのに、アクセシビリティ的にはこれはちょっとってなっちゃうんだったら、
アクセシビリティを満たすよりも、そのオシャレさを優先したいっていう方がいらっしゃるなと思って、
サイトデザインとしては魅力的だけど、アクセシビリティには問題があって、
でもやっぱりこれデザインとしては素敵だから入れたいよなってものって結構あるなと思って、このテーマをちょっと選びました。
よくあるジレンマというか。
はい、ありますよね。
結構ありますね。
お客様とお話ししていたりして。
そうですね。こうしたいんだけどっていうお話をいただいて、
アクセシビリティ的には、こうしてしまうと実現が難しいっていうお話をしなければならないことがあるわけですよね。
そうですね。
最初はアクセシビリティにしっかり対応するように作りたいっておっしゃっていても、
こういう表現だとちょっと難しいので、こういうふうに変える必要があるかもしれないですみたいなお話をすると、
それだったらじゃあアクセシビリティはいいかなってなっちゃうみたいなこともありますよね。
あります。
スライドショー：華やかさとアクセシビリティの両立
そうですね。個人的にアクセシビリティとしてそのまま使っちゃうと問題だけど、やっぱり魅力的だなって思うものの一つにですね、
ファーストビューとかに使うスライドショーというか、画像が切り替わるものがあるなと思っていて、
やっぱり写真が何枚もあって、それがこう次々に出てきて、こんな写真すごい素敵だなぁみたいなのは、
こっちもいいなっていうのは、すごい興味も低くし見栄えがいいと思うんですよね。
そうですね。
それこそ、どっか旅行行こうかなって思ってて、どこの旅館にしようかなとか思って、
じゃあここちょっと見てみようって公式サイト開いた時とかに、お料理の写真が出てきて、
あ、こんな料理食べられるんだって、あ、すごいな、あ、お部屋こんなに綺麗なんだって、
あ、これロビーなんだみたいな、え、中庭があるんだみたいになってくると、
あ、ここいいな、泊まりたいなってなると思うんですよね。
なりますね。
そういう意味で、スライドショーってやっぱり華やかだし、サイトデザインとしてすごいいいなと、
中には本当に素敵な写真1枚と、コピーでバッと決められてるサイトもありますけど、
これももちろん素敵だと思うんですが、そのスライドショーもすごいやっぱりあるといいなと思っていて、
そうですよね。
ただやっぱそのまま画像が切り替わるだけでっていうのをやってしまうと、いろいろ引っかかっちゃうんですよね。
そのタイミング調整ができないとか。
だからそこは一時停止ボタンつけるとか、前後の写真で行き来できるようにするとか、
1枚の画像の表示時間長めに撮るとか。
そうなんですよね。なのでスライドショーが全く使えないっていうわけではないんですよね、実は。
そうですね。
結構スライドショーもアクセシビリティだったらダメなんだよねって思われてる方もいらっしゃると思うんですけど、
工夫すればできるよっていうのがあって。
そうですね。
よく私たちの制作でもやらせていただいてますけど、再生と停止とか、画像を選べたりとか、そういうカソルつけたりとかですね。
それをすると動いたり、動かしたり止めたりとかを自由にできるので、アクセシビリティにも配慮したものができると。
で、これアクセシビリティの観点から大事ってだけじゃなくて、便利だなって個人的にすごい思ってて。
っていうのが、中にはスライドショーの画像が任意で前に戻ったり次に進んだりできないサイトってあると思うんですよ。
ありますね。
なんですけど、何今の写真すごいみたいになった時に、その写真を見るために一周待たなきゃいけないみたいな。
あります。
ありますよね。
待ったことあります。
何今の変わっちゃったって、もう一回その写真を見るために一周ひたすら待つっていう。
何枚あるかっていう、例えば下にポッチが4つあって、4枚だなとか5枚だなっていって、変わっていくのを待つとかっていうのができるところもありますけど、場合によっては何枚あるのかもわからないっていうスライドショーが。
わからないんですよ。で、いつ終わるのかちょっと予想つかないので、じーって待って、何待ってたかちょっと忘れるみたいになりました。
ありますよね、そういう。文字が入ってたりするのを使ってるっていうサイトもありますし。
はい。
パッと変わっちゃって文字が読めなかったとか。
そういうのを考えると、アクセシビリティに配慮してとかっていうことだけじゃなくて、普通にもう便利だからあったら嬉しいみたいな。
そうなんですよね。気になるところ見にまっすぐ行けるっていうところがいいですよね。
これはすごい、個人的にはスライドショーもすごいあるといいし、でも一時停止ボタンとかに画像行き切りきるようにするボタンもあるといいなっていう、前へ次へボタンも欲しいなっていうところですね。
それをやるとアクセシビリティに配慮できるみたいな。
個人的にはいいことがいっぱいみたいな感じなんですけど。
動画とモーダル：利便性とアクセシビリティへの配慮
私も本当にそう思って。
あと、聞いてて思って、最近は動画も増えていますよね。
ありますね。
はい。動画コンテンツも増えているので、そこにも、むしろ動画には停止ボタンとかついていたほうが、やっぱり動画流れてしまって、結構あれ?って気になったところでちょっと止められるとか。
他の文章を読みたいから、一回止めて読みたいとか、そういったときにすごく便利なので、そこはぜひともアクセシビリティに配慮するしないにかかわらず、つけたほうがいいことがいっぱいあるなということがありました。
そう思いますね。
あと個人的にですけど、他にこの機能すごい便利だけど、アクセシビリティとしては工夫が必要だなと思うものいくつかあって、例えばモーダルとかは工夫必要だなと思うんですよね。
そうですね。モーダルっていうのが、何て言うんですか、少しちょっと画面の中で一部ポンと出るような。
そうですね。なんか例えば写真とかをクリックすると、その拡大とかが画面に、別のウィンドウに映るとかではなくて、もうその画面の中でシュッと出てきて、バツを押したら閉じられるみたいなのをモーダルって呼んだりするんですけど、
それだと、やっぱり何か例えばですけど、ウェブサイト見てて写真ちょっと拡大で見たいなと思ったときにポチッと押して拡大するとか、あとは何か通販みたいなの、何かそのネットショップとかで商品選んでるときとかに押して拡大で見られるとかは、すごい便利だなと思うんですね。
そうですね。
なんですけど、あれを特にアクセシビリティのことを考えずに実装してしまうと、スクリーンリーダーで読んだときに、モーダルが開いてないのにもかかわらずモーダルの中身まで読み上げちゃうとか、
あとはキーボードで操作したいのに、キーボードで開けない、キーボードで閉じられないとか、そういうのも出てくるんですよね。
だからそういうのは、いろいろ工夫というか対応が必要になってきますけど、ただそれをすれば実装はできるし、あると便利な機能だなとは思うので、これも魅力的であり、でもアクセシビリティ的には工夫が必要だなと思うものの一つですね。
そうですね。これも、じゃあ付けちゃいけないよっていう、このゼロか1かという話よりは、付けてわかりやすくするために、一旦こういうふうなキーボードで操作しても制御できるようにしようとか、スクリーンリーダーで読んだときにも正しく読み上げがつながるようにしようっていう、
そこのところをクリアすれば、すごく便利な機能になるし、デザイン的にもいいよっていうことですよね。
タブ：情報整理とアクセシビリティの工夫
そうですね。あと、チャコウェブのサイトにも使ってるんですけど、タブも便利だけど工夫が必要なものだなと思ってて。
なるほど。
チャコウェブって、お役立ち資料を配布しているページで、カテゴリーごとに分けてるんですよね、タブで。
そうですね。
で、このカテゴリーはこの資料をこちぽちってタブを押したら別の、何て言うんですか、パネルが開いてっていうのがあるんですけど、それでやっぱりキーボード操作ができないと、
そうですね。
マウスとかが使えない環境で操作してる方が、
確かに。
もう特定の、最初から開いてるところしか見られないみたいな状態になってしまうので。
そうですね。気になるタブに移動できないとなると、ちょっともったいないんですよね。
ただ、じゃあそれをタブをなくして全部一箇所にまとめればいいかっていうと、それしちゃうとそれしちゃうで見づらくなるんですよね。
はい。長くなったりとか、あとはここの情報は別に自分は興味がないのに、全部通り過ぎなければ次に行けないとか、
はい。
そういった、それはそれで不便なので、いいということでもないんですよね。
うん。
だからそうなると、やっぱりうまく使うというか、
はい。
実装した上でどういうふうに工夫すればアクセシビリティもちゃんと満たせるのかっていうのを考えて実装するっていうのが必要だなっていうふうに思います。
結論：アクセシビリティはプラスの効果をもたらす
そうですね。これは結局、アクセシビリティイコールデザイン的な諦めというよりは、
アクセシビリティという視点を持って実装することで、読めなかったりとか、あとは自分が見たいところにすぐにアクセスできるようにすることができるとか、
はい。
プラスの効果を実は追加できるんだなというふうに今お話ししてて思ったんですね。
はい。
スライドショーとか動画とか、あとはタブとかで、特に行きたい場所で一旦止めたりとか戻ったりとか、本当に自分が見たい場所に自由に移動できるっていうところですね。
きっとモーダルもその実例だと思うので、注目したいところにアクセスしやすくなるので、ぜひアクセシビリティに配慮した形で実装していただくと、みんなが使いやすくなって情報が読みやすくなるっていういいコンテンツになるんじゃないかなと思いました。
はい。そう思います。本当に。
そうですね。なので、ぜひアクセシビリティやりましょう。
そうですね。今後も頑張っていくっていうところかなと思います。
はい。そうですね。はい。今日はこんなところですね。
はい。ありがとうございます。
はい。お聞きいただきありがとうございました。感想をいただけるととっても嬉しいです。
次回もお楽しみに。
