twitterで画像のALT機能がさまざまな使われ方をしている件について、ALTとはなにか？
twitterで何があったか
twitterで画像をアップロードするとき、その画像に対して「ALT」というテキストを設定することができます。
このALTテキストを、本来の用途とは違う使い方をしている人がいる、という指摘を見かけました。違う使い方というのは、おおむね次のようなもののようです。
画像をタップしないと読めないため、隠しコンテンツのように使う
字数制限が1000文字もあるため、長文を書くスペースとして使う
そして、これらの用途は間違っていて、「ALTは視覚障害者のための機能であるから、遊びに使うのはダメ」という指摘や、さらに指摘の指摘として「画像が読み込めないとき、画像の代わりに表示するテキストであって、視覚障害者のための機能ではない」といったものも見受けられます。
どちらの指摘も間違ってはいないのですが、情報が錯綜してケンカのようになってしまっており、非常に悲しい。ケンカしないで。
そこで、仕事でALTテキストについて頭を悩ませまくりの、いちWeb制作者として、ALTとはなんなのか、主な3つの仕事について、解説してみたいと思います。
ALTは、画像の”代わりになる”テキスト
ALT(オルト)テキストは、代替テキストともいいます。
下記のような画像を表示させるためのHTMLコードの中に存在します。
<img src="画像" alt="代替テキスト" />はぁ？なに？HTML？？？コード？？？ ワケわからんこと言うな！
すみません、分からなくて大丈夫です。
理解していただきたいのは、プログラムくんが、画像の中にそっと仕込んでおくテキストであるという性質です。
この”そっと仕込まれたテキスト”は、どんなときに力を発揮するのでしょうか？
ALTの仕事その① 画像が読み込めないときに出てくる
先ほどのHTMLコードを解読すると、「こんな画像を表示させてね。ちなみに、画像のALTテキストはこれだよ」という意味になります。画像を表示させるためのコードに、ALTテキストが添え物として存在している。
この添え物は、画像を表示することができないときに力を発揮します。たとえば、次のような場合です。
プログラムは「画像を表示して」って言ってるけど、画像のデータが見つからない
「この画像、載せといて！」って言われたけど…これってどれだよ！見つからないんだけど！？
…というシチュエーションです。
もうちょっと踏み込んで言えば、画像のパスを指定したのに、その場所に画像ファイルが存在しない、という場合ですね。
こういうとき、プログラムくんは、「画像みつかんねー…しゃあねえ、ALTテキストを表示しとくか」といって、画像の代わりにテキストを表示して、その場をやり過ごします。
作りかけのウェブサイトとか、ずーっと放置されている古いウェブサイト、なんかめっちゃエラーを起こしてるウェブサイトなどに行くと、見ることができるかと思います。
インターネット通信がしょぼくて、画像を読み込めない
先ほどの場合と違って、画像は存在しているのですが、通信くんがゼェハァ息切れしていて画像を持ってくることができないという場合です。
通信くんは、プログラムくんに「すまん…画像、あったんやけど…重くて…ワイの細腕ではとてもとても…持ってこられへんかった…」と謝罪しますので、プログラムくんがまた「しゃーねえ（略）」といって、ALTテキストを表示します。
普段はあまり見かけないと思いますが、昔のよわよわインターネット回線でネットサーフィンを楽しんでいた方は見覚えがあるかも。
現代でも、スマホでYouTubeを見すぎて通信制限がかかったときや、お目当てのサイトにアクセスが集中しているときなどに見ることがあるでしょう。
ALTの仕事その② Googleの画像検索などにテキスト情報を伝える
※Googleの検索アルゴリズムについては推測の域を出ない部分が多いので、めちゃくちゃ間違ったことを言っているかもしれません。フワっと聞いてください。
Google画像検索って使ったことありますか？ ないですか？
では、試しにGoogleの検索ボックスに「柴犬」と入れて、検索してみてください。そして、検索ボックスのすぐ下にある「画像」という部分を開いてみてください。
柴犬の画像がいっぱい出てきましたね。かわいいね。
ただ、ちょっと不思議じゃないですか？
こっちは「柴犬」というテキストで検索をしたのに、Googleが返してきたのは画像です。Googleは、なんでこの写真が柴犬だってわかるんでしょうか？
Google画像検索は、写真が載っている記事のタイトルや、写真の近くにあるテキストを認識して、ユーザーが検索したテキストと、インターネット上に無数にある画像を結びつけています。
画像の中にそっと仕込んでおくテキストであるALTも、Google画像検索の結果づくりに一役買っていることがあります。
ALTに「柴犬」と書かれているんだから、「柴犬」というテキストで検索されたときにこの画像を出してね、という役割を果たします。
※ただしGoogleくんは賢いのでALTの言うことをそのまま鵜呑みにはしません
ALTの仕事その③ 音声読み上げソフトで画像の代わりに読み上げられる
音声読み上げソフトってなに？
平たく言えば、インターネット上にあるテキストを機械が声で読み上げてくれる機能です。
多くの視覚障害者が利用する機能ですが、健常者でも使うことができます。お皿を洗いながらpixiv二次小説を読みたいときに使ったっていいわけです。
ちなみに、最近のパソコンやスマートフォンには標準装備されていますので、皆様も今すぐ使うことができます。それぞれ、次のような名前で呼ばれています。
Windowsでは「ナレーター」
MacやiPhoneでは「VoiceOver」
Androidでは「選択して読み上げ」
これ以外にも、音声読み上げ専用ソフトなども存在します。
twitterで話題になっていた、視覚障害者のための機能である、という主張は、これに該当するといえるでしょう。
音声読み上げって、どういうこと？
たとえば、次のような1つのツイートがあるとします。
「絶対に許さねえ…戦争だ…！」というテキスト
「きのこの山」と「たけのこの里」がスーパーの店頭に並ぶ写真。きのこの山だけ値下げされている
これを読んだ貴方は、「コイツ、きのこの民だな」「は？人気すぎて大量入荷の果てに値下げされたんだが？」「いつものインターネットあるあるじゃん」などと思うでしょう。
しかし、視覚から情報を得られず、音声読み上げソフトでのみ情報を得ていた場合、次のようなツイートになります。
「絶対に許さねえ…戦争だ…！」というテキスト
なんということでしょう。ただただ物騒なだけのツイートです。何もおもしろくないし、オチも伝わってきません。
なんでこんなクソツイに成り下がってしまったのでしょう？
音声読み上げソフトは、画像を読むことができないのです。そのため、画像の情報がまるまるすっ飛ばされ、テキストだけが情報として伝わってしまいました。
この悲劇を回避するにはどうしたらいいか？ そう…ALTテキストを使うのです。写真に、適切なALTテキストを書き入れておけば、音声読み上げソフトにも次のような爆笑ギャグを伝えることが可能です。
「絶対に許さねえ…戦争だ…！」というテキスト
「きのこの山」と「たけのこの里」がスーパーの店頭に並ぶ写真。きのこの山だけ値下げされている。というALTテキスト
よかった。ALTテキストのおかげで、世界中の人類がきのこたけのこ戦争に参加できますね。
ALTの仕事をざっくりまとめると”アクセシビリティ”というやつ
ま〜た横文字かい！勘弁してくれ！ とお思いかもしれません。すみません。これが最後です。
これまでに紹介した、ALTテキストの3つの仕事をまとめてみましょう。
画像が読み込めないときに出てくる
Googleの画像検索などにテキスト情報を伝える
音声読み上げソフトで画像の代わりに読み上げられる
2つめは、記事のタイトルや近くのテキストなどでも代わりをすることができるので、ALTにしかできない仕事は、1つめと3つめです。
ALTによるこれらの仕事がないと、次のような困った状況が起こり得ます。
災害に遭って、インターネットの回線がものすごく遅くなってしまった。自治体のウェブサイトに「避難所の地図はこちら」と書かれたページを見つけたのに、肝心の地図が画像になっているせいで、読み込むことができない。ALTテキストもないので、避難所の地名がわからない。
燃えるごみって何曜日だっけ？ 視覚障害者なので、いつもの音声読み上げソフトを使ってググるぞ…。あった！市のウェブサイトだ。えーっと「○○地区ごみカレンダーはこちら……ん？ これだけ？ もしかして、ごみカレンダーが画像で掲載されていて、ALTテキストが書かれてない？
困りましたね。それぞれ、ALTテキストに、画像が伝えている情報を過不足なく伝える文章が書かれてさえいれば、回避できる状況です。
こういった、非常時のインターネット利用や、高齢者・障がい者などのユーザーを含む、さまざまな状況において過不足なく情報にアクセスできる度合いのことを、アクセシビリティ（アクセスしやすさ）といいます。
では、それぞれどんなALTテキストが適切と考えられるでしょうか？
避難所の地図の場合、必要なALTテキストは…
避難所の地図。○○地区の避難所は北から順番に次の五ヶ所です。A小学校、B公民館、C体育館、D幼稚園。A小学校の住所は××町××番地××号。B公民館の住所は⭐︎⭐︎町⭐︎⭐︎番地⭐︎⭐︎号。C体育館の住所は△△町△△番地△△号。D幼稚園の住所は◇◇町◇◇番地◇◇号。
ごみカレンダーの場合、必要なALTテキストは…
2022年7月のごみカレンダー。○○地区の燃えるごみの日は、毎週火曜日と金曜日です。今月は5日、8日、12日、15日、19日、22日、26日、29日が該当します。資源ごみの日は、第二水曜日と第四水曜日です。今月は13日、27日が該当します。金属ごみの日は、第一月曜日と第三月曜日です。今月は、4日、18日が該当します。
は？ 長くない？
そう。ALTテキストって、場合によってはめちゃくちゃ長くなることがあるんですよね。
なぜかというと、地図やカレンダー、チラシやポスターなど、1枚の画像に情報がギュっと詰まっている場合、それを過不足なく伝えるためのテキストは、どうしても長文になることが多いためです。
140字制限のTwitterにおいて、ALTテキストだけ1000字も書くことができるのは、こういった場面を想定してのことだと思います。
アクセシビリティは法律やJIS規格でも触れられている
ALTテキストは、アクセシビリティの向上を考えるとき、忘れてはいけないものです。
そして、このアクセシビリティを向上させる目的というのは、視覚障害者のインターネット利用に限らず、ネットがめっちゃ遅いときとか、ケガしてマウス使えないときとか、図書館だと音が出せないから動画で何を言ってるかわかんないんだけど！みたいな状況もカバーしていて、誰もがお世話になる可能性があります。
階段に手すりをつけたり、段差をなくしたりすることで、健常者にとっても歩きやすい街づくりができるのと同じように、インターネットを利用するための障害となるものを排除して、インターネットを最高の空間にしていこうぜ！というのを、アクセシビリティを向上させていこうぜ！とかっこよく横文字で言っているのです。
たとえば、法律では…
障害者基本法、障害者差別解消法など
また、障害者基本法では、障害者の自立及び社会参加の支援等のための施策の総合的かつ計画的な推進を図るため、障害者基本計画を策定することが定められている。障害者基本計画は、政府が講ずる障害者のための施策の最も基本的な計画として位置づけられるものであり、同計画の「基本的な考え方」においては、各分野に共通する「横断的視点」の一つとして「アクセシビリティの向上」が挙げられ、ソフト、ハード両面にわたる社会のバリアフリー化を推進し、アクセシビリティの向上を図ることが言及されている。
JIS規格でも定められていて…
JIS規格「JIS X 8341-3:2016」
『JIS X 8341-3:2016』は、高齢者や障害のある人を含む全ての利用者が、使用している端末、ウェブブラウザ、支援技術などに関係なく、ウェブコンテンツを利用することができるようにすることを目的としている。そのためにウェブコンテンツが満たすべきアクセシビリティの品質基準として、レベルA、レベルAA、レベルAAAという3つのレベルの達成基準が定められている。
https://waic.jp/docs/jis2016/understanding/201604/
総務省も、こういうふうにALTテキスト使ってね〜って言ったりしています。
音声ブラウザを利用する視覚障害者やテキストブラウザのユーザーには、テキストで提供された情報しか得ることができません。そのため画像によって表現された情報には、その代わりとなるテキスト情報を用意することが必要になります。ここでは静止画像のウェブアクセシビリティ対策について解説します。
急にむずかしい話すなや！
すみません。ふだんの生活ではあまり縁がないと思いますが、自治体、病院、図書館、消防、警察などなど…公共性の高いウェブサイトでは、実際にこういった基準を守ったウェブサイトづくりが重視されています。
「色を識別しやすくして」「動画には字幕つけて」「キーボードだけで操作できるようにして」…などなど、よりアクセスしやすいウェブサイトを作るためのいろ〜〜〜〜〜〜〜んな細かい決まりが存在し、そのうちの一つとして、「画像には適切なALTテキストをつけといてよね！」があるワケです。
ちなみにこういう、いろ〜〜〜〜〜〜〜んな細かい決まりのあるウェブサイトを作ることでお給料を得ている人間がたくさんいます。私とか。
結論：TwitterでALTテキストを使うにはどうすれば？
ALTテキストを適切に使うのってかなり難しいです。
ゴールデンボンバーの鬼龍院翔さんが、ものすごく上手なALTテキストの使い方を続けていてひそかに尊敬しています。
ファンクラブイベント名古屋1日目ありがとうございました！
— 鬼龍院翔(ゴールデンボンバー) (@kiryuintw) July 2, 2022
とっても広い！圧巻！1階から4階まで皆さんありがとうございました😆
順番の撮影も、長い時間お待たせしました🙇♂️楽しい思い出になってくれていましたら幸いです📷
2日目の明日も頑張ります！🎤
水分塩分摂ってね〜☀️(^-^) pic.twitter.com/MnnjKuw3Ff
※1枚目の写真には「鬼龍院翔」というALTテキスト、2枚目の写真には「空の客席の様子」というALTテキストが設定されている。
個人的には、無理して使う必要はないけど、こういうものだって知っておいてくれたら嬉しいと思っています。
自分が視覚障害者じゃなくても、災害に遭ってネット回線がめちゃくちゃ重たくなって、Twitterに流れている画像が…見えない…見たいのに…読み込めない…これは何！？重要な画像なの？それともどうでもいい画像？って不安になるかもしれない。
そんなとき、altテキストに「被災した○○地区の交通規制マップ」と書いてあれば、ブックマークして後ですぐ見よう！と思えるし、「ピカチュウの笑顔のイラスト」と書いてあれば、ブックマークして後でゆっくり見よう…って思えて、情報の取捨選択ができる。
悲観的なものの見方をすると、もしもtwitterで「altテキストは何を書いてもいい場所！」として定着してしまったら、Twitterが大好きだけど音声でしか情報を得られない人が、悲しい思いをするかもしれない。そういう懸念はあります。
その一方で、TwitterにALT機能が実装され、話題になることで認知度が上がり、より万人にとって快適なインターネットへ、一歩前進するかもしれないという期待があります。
例えば、配達ピザのお店が、さまざまなピザのメニューが載ったチラシの画像をアップして、「注文してださい！」とツイートしても、今まではチラシを見ることができる人にしか、情報が伝わらなかった。
でも、ALT機能を使って、チラシに書かれている文字情報をそのままALTテキストとして書き起こせば、チラシを聞くことで、自分で好きなピザを選んで、注文することができるわけです。
いずれにせよ、より快適なインターネットのための機能で、ケンカしないでくれという気持ちです。
まめちしき：ウェブアクセシビリティのJIS規格「JIS X 8341」の「8341」は、「やさしい」の語呂合わせなんだって。やさしいね。
この記事が気に入ったらサポートをしてみませんか？