noce
2018年9月に始まった、『Readableな夜』の第２回に参加してきました。
『Readableな夜』とは、「Web アクセシビリティに関する情報共有を中心に、より多くの人へ Web コンテンツを届ける」ための方法を考えていく勉強会です。
日時：2018年11月5日（土）19:30〜21:00
場所：岡山大学内 岡山大インキュベータ2F 会議室
講師：澤田望さん
会場は、岡山大学の中の会社が数社入っているインキュベーターというビルの2Fです。
平日ということもあり、みなさんのお仕事終わりを待って19時30分スタートです。
今回のテーマは、「代替テキスト」
画像に対する代替テキスト、すなわちimg要素のalt属性を考えていきました。
ワークショップ：「代替テキストを書いてみよう」
まず、宗安沙希恵さん司会で、ワークショップが始まりました。
5つのお題（サイトのイラストや写真、図）に代替テキストをつけていきました。
うーん、以外と難しい。
日頃結構簡単につけていたことに気づきました。
特に5つめの説明図が考えさせられました。
セッション：代替テキストの基本から応用まで
次は、澤田望さんのセッション。
まずは、
「代替」は、「だいがえ」ではなく「だいたい」
「alt」は、「アルト」ではなく「オルト」
「altタグ」ではなく「alt属性」
というところから。
そもそも、代替テキストとは何か
処理することができなかったり読み込めなかったりする画像に「等価なコンテンツ」を与えるもの。
画像が表示されなかった時に代替テキストが表示されます。
スクリーンリーダーが読み上げてくれます。
SEO効果も期待できます。
代替テキストの基本
必須である
空（alt=””）はだめだけど例外あり
画像を適切に代替する
値の適切さは表現しているものや文脈によって異なる
本文にあることを２回繰り返さない
結構空にしていたなと反省。
スクリーンリーダーで読み上げたものを聞いたのですが、altが空だと読み上げが無くてその画像が無いかのように感じてしまいます。
画像の側に文字があり、その文字と画像が重複する場合は、重複して読んでしまうので空で良い（w3c的には）のですが、隣接しているテキストは画像が伝えている情報を本当に全て伝えているのか考えて、できれば空にしない方が良い場合もあるのではとお話されました。
自分が画像が見えないことを想像すると、たとえ意味はテキストで分かってもそこに画像があることを知っておきたいと思うのでした。
また、隣接している時は、figure要素で説明するとグループ化できるそうです。
「視覚から得られる情報」と「聴覚から得られる情報」が
”限りなく近づくようにするには”どうすれば良いか
電話の相手に画像を含んだページを読み聞かせるつもりで！！
（ワークショップで５つ目にしたような）複雑な図は、少し長くなっても良いので内容が伝わるように情報を整理して文章にする必要があるのですね。
以下、とても良い資料だったのであげておきます。
（参考：澤田さんより）
迷った時はこれ！とても分かりやすいです。
画像グループの書き方、目から鱗、どこかで使ってみたい。
ガヤガヤ会：みんなの代替テキストでガヤガヤ
最後に、ワークショップでつけた代替テキストを元にガヤガヤしました。
澤田さんの説明を聞いた後では、自分のつけた代替テキスト恥ずかしい・・
代替テキストを考えるって、その画像・写真のサイト内での意味を考えることだな〜と、当たり前だけど奥が深いと感じたのでした。
＊次回は2019年1月15日（火）の予定です。
番外：カラアゲバル フリット！グリルと！
岡山大インキュベータのセミナー後はここ！
夜の９時半から、唐揚げと生ビールを堪能しました。
唐揚げは好みが分かれるようですが、黒酢が効いていて私は好きです。
次回もアクセシビリティと唐揚げを楽しみに！
番外の番外：g.o.a.tでaltは入らない？？？
早速学んだことを実践しようと写真にaltつけようとしたのですが、どうやってつけるの？？
g.o.a.tでは代替テキストつけられないのか？
＊この記事は、「g.o.a.t」で書いたものをWordPressへお引越ししています