見出し画像

見えなくて困った！〈図解と代替テキスト〉

間嶋沙知🐖majima DESIGN

急に秋めいてきて、お鍋の恋しい季節になりました。
X（Twitter）で、こんなポストを見つけました。「いいね！」が2万以上ついている人気のポストです。もし何らかの理由でこの画像が見えなくても、「おでんタイムテーブル」がどんなものか知りたいですよね。

代替テキストをつけよう

このような図解や写真、イラストなどの画像が見えない場合に、そこに含まれる情報を伝える手段のひとつが代替テキストです。テキスト情報は、音声で読み上げたり、点字に変換したり、他言語に翻訳したりと情報を受け取る人が柔軟に形を変えられるメリットがあります。

「おでんタイムテーブル」に次のような代替テキストをつけてみました。

0分〜45分の円グラフに、おでんの具材を入れる順に描いた図。
①スタート（0分）：鍋に入れて火にかけます。沸騰したら弱火で30分 煮えにくいものから順に煮ます。 汁（つゆ）、大根、卵、牛すじ、こんにゃく、しらたき、ちくわぶ、結び昆布
②30分：さらに弱火で15分。 餅入り巾着、ちくわ、さつま揚、つみれ、ウィンナー、厚揚げ
③なめらかでソフトな魚河岸あげはほかの具より後から入れます。
④45分：はんぺんは火を止める直前に加え、汁をかけてあたためます。 約45分でできあがり

@mjmjsachi による引用ポスト

工夫した点

  • 図中では「スタート」と「約45分でできあがり」の文字が大きく強調されていてまず目につくので、調理時間（0分〜45分）を先頭に書いた

  • 具材を書く順は、上から順ではなく図から読み取れる時間経過順にした

悩んだ点

  • 「円グラフ」より「時計」のほうが良いか

  • ①の説明文と汁（つゆ）を入れる順序

  • 大根やこんにゃくのイラストに隠し包丁が入っていることを書くかどうか

フィードバックと改善

確かに、魚河岸あげとはんぺんを入れるタイミングで時計の色分けがされています。はんぺんに関しては「火を止める直前」と書いてあるので時間は明記せず、③を次のように改善することにします。

「③40分：なめらかでソフトな魚河岸あげはほかの具より後から入れます。」

答え合わせ（？）と考察

ポスト元の紀文公式サイトに、おでんの作り方の詳細ページがありました。「おでんタイムテーブル」は、1960年代後半に紀文が考案した歴史ある『時計』だそうです。元の図やレシピを見ると、大根やこんにゃくの隠し包丁は代替テキストにも書いたほうが良さそうなこと、魚河岸あげを入れるタイミングは40分くらいで正解だったことがわかります。

しかし、画像を見ただけではこれらの意図を正確に読み取ることはできません。

図解は文字だけでは把握しにくい複雑な情報を、視覚的にわかりやすく伝える力をもっています。図解やチャート、インフォグラフィックには、伝えたい情報の元となるテキストがあるはずです。それをどのようにビジュアルに置き換えたか、最もよく理解しているのは図を作成した人です。

適切な代替テキストは画像の置かれる文脈によって変わります。画像のそばにレシピが書いてあれば、「おでんタイムテーブル」の代替テキストは簡略化できるでしょう。つまり、適切な代替テキストを判断できるのは、そのコンテンツを作った人といえます。

みんなが知りたい、有益で価値のあるコンテンツをもっと多くの人に届けるために、SNS担当者のみなさんもぜひ代替テキストを考えてみてください。

関連ページ

『見えにくい、読みにくい「困った！」を解決するデザイン【改訂版】』では、5-7「見えなくて困った！」（178〜181ページ）で代替テキストについて解説しています。

関連するウェブアクセシビリティのガイドライン

WCAG 達成基準 1.1.1  非テキストコンテンツ（レベルA）

いいなと思ったら応援しよう！