代替テキスト道場【AccessiブルGoGo! Meetup #1】まとめ

yshimizu @yshimizu125

辻ちゃん「僕も、検索でいいかなという気はしています。僕も虫眼鏡から検索するという状況がなんとなく想像しづらい」 #a11ygogo

yshimizu @yshimizu125

植ちゃん「少なくともinput要素でボタン作ってる場合は、a要素のときにリンクという言葉を補うと同様、ボタンのときはボタンというふうに読んでくれるんですよね」 #a11ygogo

yshimizu @yshimizu125

（キャプションがついている写真） 辻ちゃん「説明のテキストが本文にあるという前提なので、写真であること、何の写真かである情報があるだけでよさそうな気がします」 #a11ygogo

yshimizu @yshimizu125

杉崎さん「写真：写真の説明でいいかなと思っています。本文でかなり詳細な説明がされているので、代替テキストにはそこまで説明しなくても伝わると思います。figcaptionと同じ文言を入れてくださった方がいましたが、スクリーンリーダーは二重に読むので特に要らないです」 #a11ygogo

yshimizu @yshimizu125

酒谷さん「私も、あんまり情報があるとパンクしちゃう（ので、写真：写真の説明が良い）」 #a11ygogo

yshimizu @yshimizu125

植ちゃん「お話聞いていてまず一ついえそうなのは、画像の下に説明のテキストがある場合、それと同じ文言は代替テキストの方では書かなくてよさそうですね」 #a11ygogo

yshimizu @yshimizu125

植ちゃん「今日度々お話に出てますが、まず最初に写真：写真の概要とあって、その後に詳しい描写があって、詳細聞くかどうかを選択する考え方はいかがでしょうか？」 お三方「良いとおもいます」 #a11ygogo

yuka_free @yukafree7

「スクリーンショット」「画面キャプチャ」はある意味、専門用語かもしれない。ベストというわけではないがおすすめは「画面イメージ」。by植木さん #a11ygogo

yshimizu @yshimizu125

（画面キャプチャによる説明について） 杉崎さん「自分はそこまで画像に価値を見出していなくて、画像ではないテキストの方を参考にします（続く）」 #a11ygogo

yshimizu @yshimizu125

杉崎さん「でも、空altにするとスクリーンリーダーが読み上げをスキップしてしまうので、画像があるということ自体は分かったほうが良いと思います。行き詰まったときに晴眼の方に依頼をするなどの選択肢が考えられるので」 #a11ygogo

yuka_free @yukafree7

情報の取得の仕方は人それぞれ好みがある。それは視覚障害がある人でも晴眼者でも同じ。だから「これをすればいい」という正解を求めるのは違う。読み手の文脈・環境を考えた伝えたいことが伝わりやすいように情報を整理することが大事なのだとあらためて思った。 #a11ygogo

yshimizu @yshimizu125

個人的に「晴眼者の方に依頼をする」という選択肢もあるのだということは盲点だなあと……。そう考えると、やっぱり空altにするシーンって本当に少なくなるね。 #a11ygogo

いとひろ @cornusflorida99

ロービジョン からすると、画像のどこが囲まれてるかという情報は助かります。 #a11ygogo

yshimizu @yshimizu125

（組織図について） 酒谷さん「組織図という概要は押さえておきたいところですね。上から、というふうに書いてあるのもわかりやすいです」 杉崎さん「酒谷さんと同じで、上から下にってトップダウン構造で説明しているのはイメージがつきます」 #a11ygogo

yshimizu @yshimizu125

辻ちゃん「個人的な好みの問題なんですけど、基本的に組織図って文言がでてきたら僕はこの図から得られるものは少なかろうって感覚がします。詳細に説明されればされるほど、頭の中でイメージして理解できないのが申し訳なくなってしまう（続く）」 #a11ygogo

yshimizu @yshimizu125

辻ちゃん「でも、上からとか、何々のトップにという書き出しの説明はすごく分かりやすそうな感じがします。」 #a11ygogo

yuka_free @yukafree7

組織図の代替テキストの場合。「組織図：上から社長〜」というように、画像の種類と大枠を合わせた「組織図」を頭に入れて「上から」を入れてから具体的な組織体制の説明をすることで、イメージしやすくなる。「上から」と入れるのがポイント。 #a11ygogo

yshimizu @yshimizu125

サイボウズさんのサイトの組織図はテキストベースかつ入れ子のリストで非常にわかりやすいとのこと。このページかな……確かにソースみたらきれいな入れ子になってて良いですね。私もできるなら組織図はテキストベースで組みたい。 cybozu.co.jp/company/organi… #a11ygogo

smatico @smatic0

理解しないと代替テキストを丁寧に書いてくれた人に申し訳ないなんて思っている…辻ちゃん優しい。 からの～代替テキストのない組織図には「僕には教える気ないのね」と拗ねる(笑) 愛すべき辻ちゃん #a11ygogo

yshimizu @yshimizu125

お三方ともスクリーンリーダーの使い方は自己流とのこと。スクリーンリーダーのマニュアルを読んだりとかはするけど、誰かに教えてもらったりしたことはない。 #a11ygogo

yshimizu @yshimizu125

代替テキストについて、スペースを入れても連続して読み上げてしまう。基本的にスクリーンリーダーはデフォルトの設定ではスペースを読み飛ばしてしまうので、例えばスペース10個入れたからすごく改行をされたのと同じように間隔があくわけではない。 #a11ygogo

yshimizu @yshimizu125

こういうのを見ると、「本当にそれは画像で提供するべき情報か？」というのを考えさせられるな…… #a11ygogo

yshimizu @yshimizu125

杉崎さん「CMSの設定とかで代替テキストを任せるとかしてると、『altが入ります』とかいうわけわかんない代替テキストが入ることがある」 辻ちゃん「あるある(笑)」 そんなもんあるのか……（困惑） #a11ygogo

yshimizu @yshimizu125

辻ちゃん「今日参加者の皆さんに知っていただきたかったのは、（中略）代替テキストには正解があるわけじゃなくて、ユーザーによって欲している情報にも差があるし、好みが違うんだよっていうところ」 #a11ygogo

yshimizu @yshimizu125

辻ちゃん「コンテンツを提供する側と制作者のコミュニケーションをしっかりとって、使いやすい代替テキストが増えていくといいなと思いました」 #a11ygogo