こんにちは。チャコウェブラジオは、株式会社Cyber Catsが運営するチャコウェブのスタッフが、
ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。
進行を担当するゆみこです。よろしくお願いします。
みやです。よろしくお願いします。
今回は、アクセシビリティに関する雑談会です。
テーマを一つ取り上げて、アクセシビリティについて考えたことや感じたことなどを、自由にお話ししていきます。
はい。よろしくお願いします。
今回のテーマは、「どんなオルトが適切?パーソナリティ二人で大体テキストを考えてみる。」です。
はい。これは、けっこう難しいというか、深いテーマですね。
そうですね。出してしまいましたが、深いという、ちょっと打ち合わせ時の話になりました。
そうですね。けっこうこれは、とりあえずオルトをつけておけばOKって思っている方もいらっしゃったりするんですけど、
はい、はい。
全部が全部つければいいわけでもないし、だからといって、じゃあ全部つけないほうがいいのかっていうと、そういうこともないので、
そのケースバイケースが多すぎるんですよね。
そうですね。
っていうんで、例えばですけど、装飾のアイコン。
はい。
例えば、箇条書きの行頭で、キラッとアイコンつけてみるとか、あると思うんですけど、デザインで。
ああいうのは、なんか基本的にオルトはカラーでもいいのかなっていう、その装飾でつけてるだけであって、文章に意味があるので。
はい。
なんですけど、例えば、検索ボタンとかってあるじゃないですか。検索する。
はい。
あれで、虫眼鏡が書いてあるボタンを押したら、検索できるみたいなときって、
その虫眼鏡のアイコンには、検索とか、検索ボタンとか、検索するとかつけないと、スクリーンリーダーとかでわからなくなっちゃうんですよね。
こう、何のボタンなのか。
そうですよね。
だから、アイコンだったら一律つけなくていいとか、アイコンは一律つけたほうがいいとか、そういうわけではないっていうのがあって。
ね。
そうですね。しかも検索も、検索って漢字で書いてある、そのテキストと虫眼鏡のアイコン、どっちもあるみたいな場合は、
アイコンに検索ってつけちゃうと、なんか検索検索とかって読まれちゃうので、テキストリーダーに。
そうすると、逆にわかりにくくなっちゃうんですよね。
そうですね。
検索検索とか、資料ダウンロード、資料ダウンロードみたいな。
はい。
だから、これはアイコンだけでも、やっぱりつけるつけない、だいぶ変わってくるんで、一律で考えられないところとか、人によっても変わるかなっていうところもあるのが難しいなって思いますね。
そうですね。今のお話でいくと、文脈をちゃんと読んでおかないと、誤解されるような、だいたいテキストをつけてしまうこともあったりとか、欲しい場面で抜いてしまったりとかっていうことが起こってしまうってことですよね。
そうですね。それこそ、そのボタンは何で使うボタンなのかとか、虫眼鏡マークだけなのか、虫眼鏡のマークのほかに検索っていうテキストがあるのかとか、そういう周りのこともしっかり確認して、で、何をつけるかを決めなきゃいけないっていうのがあって。
そうですね。
で、それはアイコンの話なんですけど、画像も、その画像がどういう意味を持ってる画像なのかによって、だいぶ変わってくると思うんですね。だいたいテキストとかっていうのは。
そうですね。
それこそ、画像がもうめちゃくちゃ重要な場面にだいたいテキストをつけてないってなると、大問題だと思うんですよ。
例であげるなら、オンラインショップとかですね。
そうですね。
商品画像。
あれっていうのは、買うために商品画像で確認するじゃないですか。
そうですね。様子がわかるってことですよね。
そうですね。
どんな商品か。
だから、それがわからないと困るので、テキストリーダーを使って読み上げるような時でも、どういうものなのかっていうのが伝わるような、だいたいテキストにする必要があるっていうのがあって。
はい。
同じような写真だったとしても、それが使われてる場面がまた変わって、イメージ画像として、商品画像としてではなくって、サイトの中に、なんかまあちょっとこう装飾として、
ちょっとこの辺寂しいし、こういうイメージ画像も付け加えておこうかなみたいな感じで、デザイン性でというんですかね。
意味合いというよりはデザイン性で置かれた画像だと、だいたいテキストがない方がすっきりわかりやすい、そのスクリーンリーダーで読んだときに。
そうですよね。例えば、企業イメージに沿った緑の多い風景写真だけれども、ホームページで書かれてる内容は、企業の説明のときにいきなり風景画像の描写が出てきても、え、どういうこと?っていうふうにはなりますよね。
そうですね。ただ、それも人によって、そこの画像にだいたいテキストが必要か、空欄にするべきかっていう意見は分かれてくるかなと思っていて。
はいはい。
例えば、会社概要とか、企業の今までの実績とか、いろいろ何か載ってたとして、本社の写真とかが載ってたとするじゃないですか。
はい。
そう、装飾と見なして、空欄にするのか、例えば、本社の写真って一言でも、そこに本社の画像が入ってることが分かるようにした方がいいのかっていうのは、そのときによると思いますし、その人の、作ってる人の判断にもよると思うんですよね。
うーん、そうですね。
例えば、物件紹介とかだったら、絶対必要だと思うんですけど。
そうですね。
どういう雰囲気の画像かって。
はい。
そのホームページで、その本社の写真が出てきたときに、それを本社の写真って伝えるかどうか。
あとはその本社の写真とか、そういう一言で伝えるのか、本社の写真、何階建ての建物が写っているみたいな感じで伝えるのかとか。
このあたりも難しい。
そうですね。これはサイトにもよると思うんですね。
はい。
確かにな。ちょっと1つダメな例を。
はい。
1つ言っていいですか?私が前にやってたのが、
はい。
例えばこの商品の説明ページの中で、赤いスニーカーの商品を展示していましたと。
はい。
で、そこのオルトに、商品画像1とか。
あー、はいはいはいはい。
やったことがあって。
で、次に、黄色いスニーカーになるので、商品画像2っていう。
これは、たぶんありがちだと思います。
やってたんですけど、表してるようで、表してないっていう。
そうですね。
うん。
それは、わりとあるあるだと思ってて。
その、商品画像1、商品画像2とか、イメージ画像1とか。
うん。
そういうのとか、あとはファイル名をつけちゃうとか。
あー、はい。imgなんとかかんとかというやつですね。
そうですね。そうなっちゃうと、読み上げで意味も伝わらないですし、ややこしくなっちゃったりとか、逆に。
うん。
なので、だったらオルトからのほうがましじゃない?ってなるときもあるんですよね。
そうですね。たしかに。
だから、これは難しいですよね。
その、商品画像1とかは、たしかにあると思いますね。
うん。
あと何ですかね、なんかこう、カルーセルみたいなときにスライドショー1、スライドショー2みたいな。
はい、見ますね。
私も見たことあるので、これはあると思いますね。
うん。
なので、結構どこまで書くのかが難しいなって思いますし、いい例っていうのをわかるといいなと思っていて。
はい。
そのときに、昔ちょっと話したかもしれないんですが、オーディオブックで、
あ、良かったこと探しから始めるアクセシブル社会っていう書籍の大体テキストがすごいわかりやすくて、耳で聞いていたんですが、
例えば今見ているページだと、本にルーペを当てて書籍を読んでいる画像があるんですが、
はい。
で、本を読む羽賀優子さんっていうふうに、何をしてるのかがすごいわかりやすくて、
端的ですし、これはわかりやすいなと思ったんで、いい実例をみんなよく知っておくとつけやすくなるんじゃないかなっていうことがありますよね。
それでいうと結構、新聞とかネットニュースの画像とかで、
なるほど、はい。
またちょっとオルトとは別なんですけど、画像の下に何々の写真とかって入ってたりするんで、
あれも勉強になるなって思ってますね。
うんうんうん、確かに。
誰々が例えばですけど、映画で賞取ったみたいなニュースとかあったりすると、
何々賞のトロフィーを手に並ぶ誰々みたいなのとか、
あ、書いてますね。
ありますよね。あと何々する何々さんの写真、左から3番目みたいな、
そういう、なんか位置も特定できるってやつとか。
それだと、本当に耳で聞いてるだけでイメージできるので、すごいわかりやすいオルトが作れるっていうことですよね。
あれの意外と日常的に見ておくと、勉強になるかなと思います。
あーなるほど、それはいいかも。新聞とかを、この写真の下に書かれてる情報。
そうですね。で、実際あれも代替テキストで、代替テキストの提供方法っていくつかあるんですけど、
画像にオルトをつけて、で、スクリーンリーダーで読み上げたときにオルトが読み上げられるっていう作り方もあれば、
オルトが空でも画像の下に、そういう何の写真っていう説明を入れておくっていうやり方もあったりするので。
はい、ありますね。
で、そっちのやり方だと、視覚的に見えるので、例えばスクリーンリーダー使ってない方でも、
どういう様子なのかみたいなのを見てほしいときには、そっちで提供したりとか、
そういうやり方もあるんですよね、実際に。
なので、今回オルト、どういうオルトが適切かっていうテーマでしたけど、