はじめのalt

alt属性(オルト属性)というものをご存知だろうか。

Webコンテンツにおいて、HTMLのimg要素に記述される、画像の代替となるテキスト情報のことだ。Alternative text - 代替テキスト。よくaltタグと言われたりするがタグではない。imgタグの属性だ。しかしタグとうっかり言われてしまうぐらい、画像の本質と深く結びついている。

alt属性はそのWebコンテンツの画像を、ユーザーが知覚できない状況で利用される。視覚障害のある方達が利用する、スクリーンリーダーでの読み上げ時はもちろん、画像の読み込みが遅かったり、画像が何らかの理由で破損している場合に、その代替として表示される。

画像が知覚できない状況というのは、実はそれほど特殊ではない。帯域制限があったり、電車の中でブログなどの記事をiPhoneのスピーチ機能で聞いたり、スマートスピーカーで読み上げながら家事をしたり、今日のWebコンテンツへのアクセスは多様だから。

この代替テキストを書いているのは一体誰なのかというと、コンテンツの提供者である。画像に対して一つ一つ、その代替となるテキストを考えて入れていく。どのようなテキストを入れるかについては色々な考え方がある。しかし画像を代替するものなので、程度の差はあれ、ある種の客観性をもってつけられる。

Webコンテンツに使用される画像は、文字がそのまま画像になったものから装飾的なものまで多種多様だから、どういうテキストで代替すればいいか、迷うことも多い。
そんな時は、たとえばWeb Accessibility InitiativeによるAn alt Decision TreeはYes/No式で最適な代替テキストを書く助けになる。

👉🏻SAWADA STANDARD DESIGN さんによる 日本語版のPDF

FacebookやInstagramでは、画像に含まれる要素を解析して、自動的に代替テキストを入れる技術も進んでいる。しかしまだ十分に代替できているかというと、やはりその画像を投稿した人の手によるものには及ばないようだ。

たとえばInstagramに投稿したお弁当の写真に設定されたalt属性はたいていこうなっている。

alt="画像に含まれている可能性があるもの:食べ物"

間違ってはいないけれど、画像の代替にはなっているとは言えない。もちろん、それでもないよりは良い。

Webサイトのフロントエンドエンジニアでもないかぎり、日常生活で代替テキストを書くことは少ないかもしれない。しかし我々デザイナーにも無関係な話ではない。

実はInstagramに投稿した写真の代替テキストは、自分で任意のものを設定することができるのだ。
投稿時の下の方に小さく書かれた [ 詳細設定 > ] をタップすると [ 代替テキストを書く ] という項目があり、そこに自分で代替テキストが入力できる。

SNSなどのサービス利用者が画像を投稿する時、その代替テキストを設定できるサービスは意外と多い。もし「画像を見ることができない人が、画像を投稿するサービスを利用するのか」と疑問に思ったのなら、自身の思考の狭窄こそを省みた方が良いだろう。もちろん利用する。

先に紹介したInstagram以外でも、たとえばTwitterはTwitterアプリの 設定とプライバシー ] > アクセシビリティ ] > 画像の説明を追加 をオンにすると、写真投稿時、写真の上に [ 説明を追加 ] というボタンが表示されるようになり、それをタップすると代替テキスト入力画面になる。

ちなみにTwitterの代替テキスト設定機能は、現在アクセシビリティ設定をオンにしなくても使えるようにするテストをしているらしく、アカウントによってはあらかじめ設定する必要がない場合もある。

アクセシビリティってよく聞くけど、なんか難しそうだし、デザイナーは何をやればいいのだろう、実際の案件ではなかなか実践できないし、と思っていて、最初の一歩を踏み出せない人はけっこういるんじゃないかと思う。

それならまず、いつも使っているInstagramで、Twitterで、代替テキストを自分で考えて入れてみることからはじめてはどうだろう。アカウントさえ持っていれば、今日からはじめられる。

そして実際にやってみたらわかるのだが、画像の内容をテキストで代替するのはけっこう奥が深い。

それは現象を言語によって表す行為だからだ。客観性をもつが、主観性を完全に消し去ると、イメージに含まれる意図まで消えてしまう。主客を統合して現象を言語にコーディングする...俳句の、たとえば写生句に近いのではないかと私は思う。このあたりは、異論がある人もいるかもしれない。色んな考え方があっていいと思う。それも含めてコンテンツだから。

デザイナーは視覚優位で生きている人が多いから、視覚情報をテキストで表現し直すことは、いつもと違った領域を使って思考することになり、いいトレーニングになる。上手く言えないけれど、これがわりと楽しかったりするのだ。

まあ、あまり考えすぎて手が止まってしまっては意味がないので、そんなに構える必要はない。別に ”お弁当の写真” でもかまわない。機械が自動で設定するものよりはずっといい。まずは代替テキストツリーを片手にやってみよう。

ところでこのnoteというサービスはまだ、投稿画像にalt属性を設定することができない。この記事には画像をあえて入れなかった。

しかし過去に投稿された記事の画像を見てみると、alt属性っぽいものが入っていたりするものもあり、なんだか実装が検討されているようなのだ。
どんな制作にも困難はあって、今どうしてもそれが叶わないという状況はあると思う。けれどぜひ実装してほしい。きっと、たくさんの人が待っているから。

実装されるのは明日かもしれないし、来月かもしれない、もっと先になるのかもしれない。けれど「 誰もが創作をはじめ、続けられるようにする 」というコンセプトをもつこのサービスが、いつまでも特定の環境や状態の人達を排除し続けることはないはずだ。

だから、設定できるようになったとき、すぐに対応できように、はじめておこう。だって今日からはじめることができるのだから。

アクセシビリティの、はじめのalt。
そしてそれは、行き着く先でもあるらしい。

そんな楽しい世界に、ここから一歩踏み出してみよう。

* * *

書き手:デザイン部 高取 藍


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

68

Fenrir Designers

Fenrir Designersマガジンを運営しています。 https://designers.fenrir-inc.com/

スキマガジン

僕のスキなnoteをまとめたマガジン
2つ のマガジンに含まれています

コメント1件

興味深い記事でした。高取さんの記事をいつも楽しみにしています。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。