1. チャコウェブラジオ
  2. #56 どんなaltが適切?パーソ..
2025-09-25 13:37

#56 どんなaltが適切?パーソナリティ2人で代替テキストを考えてみる

身近にあるけれど、適用が難しい「alt(代替テキスト)」。

適切な代替テキストについて考えます。

・装飾画像は空の alt=""で良いけれど、思想によって扱いが異なる

・「文脈次第」

・アイコンの代替テキストは空にすればよいという単純なものではない

・AIは補助に使えるが要チェック

「チャコウェブラジオ」は株式会社Cyber Catsが運営するチャコウェブのスタッフが、ウェブアクセシビリティを実践したい制作者やウェブ担当者に向けて、ゆっくりじっくり解説していくポッドキャストです。

ご感想やチャコウェブへのご相談はメールフォームよりお寄せください。

https://www.chaco-web.com/contactus.html

出演:

やまぐちみあ(ウェブアクセシビリティマネージャー)

https://x.com/chacoweb_ymgc

社内で定期的に開催している勉強会では、制作メンバーとウェブアクセシビリティ関連の知識を共有したり、意見交換を積極的に行っています。

お客様のホームページ制作にあたっては、ディレクター、デザイナーとの打ち合わせ時にウェブアクセシビリティの観点からデザインや仕様の決定に携わっています。

また、ウェブアクセシビリティに関するブログ記事の更新も担当しています。

よこやまゆみこ(ウェブマーケティングマネージャー)

https://x.com/chacoweb_yama

ブログを10年以上運用してきた経験から実践的なアドバイスを得意とし、コンテンツ発信を活用して企業の価値を高めるサポートをしています。

400件を超える中小企業のホームページ制作に関わり、SEO、コンテンツマーケティング、ライティングの知識を使ったコンテンツ制作で利益につなげる制作ディレクションと利益獲得のアドバイスをしてきました。

ウェブの情報発信力を存分に活用する考え方を基礎からお伝えし、運用能力を身につけていただくお手伝いをしています。

チャコウェブ公式サイト

https://www.chaco-web.com/

チャコウェブ公式X

https://x.com/_chacoweb

株式会社Cyber Cats公式サイト

https://cybercats.jp/

ポッドキャストの書き起こし「LISTEN」はこちら

https://listen.style/p/chacoweb?k2xLjX2w

サマリー

ポッドキャストでは、ウェブアクセシビリティの重要性や代替テキスト(オルト)の適切な使用方法について議論されています。特に、アイコンや画像に対して文脈に応じたテキストの付け方が強調されています。このエピソードでは、オーディオブックや新聞記事の具体例を交えながら、代替テキストの適切な表現について議論されています。また、情報を視覚化することによって聴覚的な理解が深まり、代替テキストの重要性が考察されています。

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

コメント

スクロール