代替テキスト道場【AccessiブルGoGo! Meetup #1】に参加しました！
2020年8月2日｜ memo accessibility
8月1日にオンライン開催された代替テキスト道場【AccessiブルGoGo! Meetup #1】に「UDトーク編集枠」で参加しました！
4月に開催された Webアクセシビリティの学校で「代替テキスト道場をやるかも」という話が出ていて、開催されるならぜひ参加したい！と思っていました。主催の植木ししょー、辻さんもですが、ゲストの酒谷さんや杉崎さんのお話が伺えるのも楽しみ！
実はもともとは一般参加しようと思っていたのですが、参加費のお支払いがなぜかうまくできなくて、これは参加費無料のUDトーク編集枠で参加して、UDトーク編集をやってみよという神の思し召しだ！と思うことにして、ちょっと不安ながらもUDトーク編集枠で参加申し込みをしたのでした。
UDトーク編集は、初めての方向けに練習会もやっていただけました。私も編集初体験ではないものの練習会に参加したかった！（急用でドタキャンしました・・・すみませんでした。）
代替テキストとは？
「代替テキスト」とは、ウェブコンテンツにおいて、画像などの非テキストコンテンツに対して、同等の情報をユーザに提供するテキストのことです。
詳しくはエー イレブン ワイの用語集へ！
今回の「代替テキスト道場」は、イメージ要素のalt属性値をどういうものにしたらいいかみんなで考えよう！、実際にスクリーンリーダーを利用してウェブサイトを見ている（聴いている）方たちにどういうものがいいかきいてみよう！というイベントでした。
宿題が出た！
予告されていたことではありましたが、宿題が出ました。8問だったかな。この画像にあなたならどんな代替テキストを付けますか？という宿題です。文字画像、リンク画像、棒グラフに写真に組織図など、悩ましいものも多かった。
代替テキストは画像などの非テキストコンテンツと同等の情報を与えるものであることが大前提です。私は、ウェブページを見ている人と、スクリーンリーダーで聞いている人とで、受け取る情報に差があるのが嫌いです。なので気をつけておかないと、代替テキストが長めになりがちです。
たとえば棒グラフ。縦軸に件数、横軸に時間がとられていれば、図としてのグラフがあることで、見える人にはそのデータが時間的にどう変化していったのか、大体の傾向を把握することができます。それを聞いている人にも伝えたい！と思ってしまうタイプ。
他にも、イラストに文字も乗っているバナー画像のような場合、そのイラストも説明したほうがいいのかな？と思ってしまう。ガイドラインでは修飾画像の alt は空（なし）で良いことになっていますが、イメージ画像だと分かっていても、ここに笑顔の子どもの写真があるよとか、ここに太陽のイラストがあるよとか伝えたくて、代替テキストに入れたくなります。
代替テキストの好みは三者三様だった
「代替テキスト道場」では主に、参加者が宿題で答えた代替テキスト案を、日頃からスクリーンリーダーを利用して代替テキストを利用しているゲストの酒谷さんと杉崎さん、それから主催者でもある辻さんに確認してもらって、どういう代替テキストが良いかご意見を伺う形で進みました。（宿題以外の画像についてもいくつかやりました。）
同じ画像の代替テキストでも、好みの代替テキストは三者三様で興味深かったです。3人のご意見を聞いたあと、植木さんから、ガイドライン的にはJIS的にはどうなのかや、スクリーンリーダー以外の閲覧環境も考えると、こういう代替テキストがいいかも、という提案があり、とても勉強になりました。
「代替テキスト道場」で考えたこと
以下、「代替テキスト道場」に参加して、私が思ったことです。（間違っていたらこっそりご指摘いただけると嬉しいです。）
どんな代替テキストがいいかは人によって好みがある
たとえばバナーの背景にある画像の情報も代替テキストにあると嬉しいという人もいれば、修飾の画像の情報はなくていいという方もいました。
3人とも意見がバラバラなものもあったりして、本当に興味深かったです。
ガイドライン的には修飾目的の画像の alt は空でOK、だけど…
ガイドライン的には修飾目的の画像の alt は空でOKです。だけど、修飾目的の画像でも、そこにどんな画像があるのか知りたいという人もいるんだと知りました。以前は見えていたけれど見えなくなったという方で、画像に説明があることでそれがどういうものかを思い浮かべることが出来るから、代替テキストを入れてほしいという方もいるということでした。
私自身は、そこにどんな画像があるか知らせたい人なので、知りたい人がいてくれることは嬉しかったのですが、でも、場合によっては、本当に伝えたい情報にたどり着いてもらえない可能性もあるなと思ったりしています。
修飾目的の画像、特にイメージ画像などは、そのページの雰囲気や伝えたい印象を、代替テキストとして入れるのもありかもしれません。ただ、やっぱり雰囲気を画像で醸し出すだけではなくて、コンセプトだったり社風だったり、伝えたいことを本文テキストとして提供し、しっかりと言葉で伝えるのが良いのかなと思いました。
その画像が何なのかわかるテキストをはじめの方に入れておくのが良さそう
代替テキストはスクリーンリーダーではひとかたまりに一気に読み上げられます。なので、長い代替テキストは最後まで聞くのが面倒だったり、最後まで聴いていたら最初の方がわからなくなったりしてしまいそうです。
代替テキストが長くなる場合はその画像がどういうものなのか、たとえば「棒グラフ：」とか「写真：」とか「組織図：」のように、画像が示しているものをあらわす言葉を代替テキストの頭に書いて、その後に説明や画像の内容を書いておくと、スクリーンリーダーで最後まで聞くべきか、読み飛ばしても大丈夫か判断できて良さそうです。
代替テキストが長くなる場合は本文テキストにすることも考える
代替テキストが長くなるものは、本当に画像で提供するのが適切なのか、本文テキストで説明する方が良いのではないか、考えてみる必要がありそうです。
私もよくやりがちなのですが、写真なんかの代替テキストに説明をもりもり入れてしまって、あれ？これって代替テキストの方が説明が詳しくない？代替テキスト読まないと伝わらない情報がない？ってなることがあります。そういうものはやはり、代替テキストではなく本文テキストで説明するべきなんだと思います。私も気付いたら、代替テキストはなるべく簡潔にして、見る人にも聞く人にも差がなくなるように、本文テキストに説明をもってくるようにしています。
見ながら聴いている人もいる
ロービジョンの方など、画面を見ながらスクリーンリーダーで聴いている人もいます。私自身もアクセシビリティの診断をやるときは、見ながら聴いて確認するのですが、見えるものと聞こえるものが大きく違うと混乱してしまいます。 基本的には、聞いている人に特別なことをするよりも、見える情報と聞こえる情報が同じになるようにするのがいいのではないかなと思っています。
今日のいちまい
宿題にあった「組織図」では、私が書いた代替テキストを辻さんが「これがいい」と言ってくれました。嬉しくてハートマーク書いてます。でもでも、私の説明では課題の組織図のとおりに正しく伝わってないかも…と思います。比較的単純な組織図なのに、難しい。
サイボウズさんの組織図は図ではなくテキストで書かれているそうです。見た目もきれいなのにテキストなら最強ですよね。
