Skip to content

Instantly share code, notes, and snippets.

@yamanoku
Last active August 24, 2023 11:46
Show Gist options
  • Save yamanoku/7318df47e26289c17edd46f6298e21b7 to your computer and use it in GitHub Desktop.
Save yamanoku/7318df47e26289c17edd46f6298e21b7 to your computer and use it in GitHub Desktop.
Alt Text Hall of Fame( https://alttexthalloffame.org/ )の非公式日本語訳

altテキストとは?

代替テキスト(略してaltテキスト)とは、ウェブサイトやソーシャルメディアで画像を公開する際に、画像を説明するために使用できるテキストのことです。

なぜaltテキストが重要なのでしょうか?

ブラウザが画像を表示しなくなったと想像してみてください。それでも、記事の中で画像が参照されているのを見たり、画像についての会話を読んだり、人々がジョークを言っているのを読んだりするでしょう。この経験はあなたにとってどのようなものだろうか?かなり取り残された気分になるだろう。

これが、目の見えない人や視覚障害者にとっての現実なのです。しかし、状況は良くなっている!

Tanya Harrison

今回、画像の説明を追加してくれたすべての人に感謝したい。僕のような全盲の人間にとって、皆さんの画像、特に動物の写真を頭の中でイメージできることは、とても意味のあることなんだ。

StormyNight

Fediverseへの初投稿は、ここ2、3日で、文字通りこれまでの人生で見たことのないほど多くの #alttext を見たということを言いたい。それが何なのかは分からないが、盲目のユーザーとして、コンテンツと実際に対話できることに感動している。近いうちに紹介文を書こうと思う。 #accessibility #Mastodon #redditMigration

画像にキャプションをつけることは、目の不自由な人だけを助けるわけではありません。画像の背景を理解したり、ポップカルチャーのミームを説明したり、欠落した画像のプレースホルダを提供したり、低速のインターネット接続で画像を読み込んだりするのにも役立ちます。

私たち全員が協力することで、ウェブは誰にとってもより良い体験となるのです。

それは素晴らしい!では、画像にaltテキストを追加するにはどうすればいいのでしょうか?

ソーシャルメディアサイトを含め、ウェブ上の多くのパブリッシング・ツールでは、アップロードした画像に説明を追加することができます。以下はその例です:

いいね!でも、どう書けばいいんだろう?

あなたがアップロードしている写真を見て、それを見ることができない友人が隣にいると想像してみてください。あなたならどう説明しますか?重要なディテールは?なぜ面白いのか?それとも悲しい?なぜそれを共有するのですか?

Gambolloch

altテキスト画像の説明は詩ではないが、それを書くことは詩を書く練習のように感じていた。私はそれを期待していなかった。

Francois Heinderyckx

マストドンの投稿に写真を添付する際、人々が丹念に作り上げる画像の説明の多くが、ほとんど文学的であることに驚かされ、魅了される。その中には、私が気づかなかった細部を明らかにしてくれるものもある。また、私が見逃していた微妙なジョークを理解させてくれるものもある。また、本当の詩のようなものもある。ALTは、あなたが写真にカーソルを合わせることでその姿を現す、独自のマイクロブログの世界なのだ。そして、私はホバーし、ホバーする。 #AltText #inclusivity #Mastodon #netiquette #tootiquette

画像にキャプションを付ける方法はたくさんあります。本当に詳しく、説明的にすることもできる。

John Overholt: "Optometrist George Mayerle’s 1…" - glammr.us Mastodon

「チャートの中央を縦に貫く7つのパネルは、ローマ字(英語、ドイツ語、その他のヨーロッパの読者用)、日本語、中国語、ロシア語、ヘブライ語の文字で視力を検査する。中央のパネルは、文盲の子供や大人、あるいは他の文字が読めない人のために、アルファベットを記号に置き換えたものである。

Velocirooster adminensis :bc:: "Happy International Women's Day! Just a reminder …" - beige.party

マーガレット・ハミルトンがアポロ司令船に乗っている60年代のモノクロ写真。彼女は宇宙飛行士が打ち上げのときにするように仰向けになり、カメラに向かって微笑みながら頭上の巨大な計器パネルのスイッチを押している。長いストレートの髪に眼鏡をかけた若い女性だ。四角い模様の入った長袖のワンピースを着ている。彼女は、自分の領分を完全にマスターして楽しんでいる人物の気楽さと自信を映し出している。

artwells: "Extensive alt text A wall pai…" - Mastodon

青く塗られた壁だが、塗装が朽ち果て、上部中央は灰色の合板がむき出しになっている。ひび割れは主に水平方向に入り、波打つように、あるいは紙の皮が剥がれるようにカールしている。残っている青は2トーンで、上部の大部分は濃い色調で、塗装の境目はスプレー塗りのように見える。左下には、同じく水色に塗られた円形のステッカーが縦に皺を寄せており、その右端は右に鋭い影を落とすほど浮き上がっている。

そして、それを楽しむこともできる。

The Mïghty Kräcken: "I had a friendly hitchhiker on…" - Mastodon

ラブクラフト的なホラーが、私のフロントガラスに、より弱い従兄弟たちの飛び散った残骸の隣にしゃがみ込んでいる。ほとんどが白で、ティム・バートンがデザインしたクリーチャーを思わせる縞模様で飾られている。この悪魔があなたを地獄に引きずり込み、悲鳴を上げると考えるのが妥当だろう。

Surprised Eel Historian, PhD: "Do you fear you've being cheat…" - Mastodon

ミーム。中世の、樽を作る樽職人の姿。彼は木槌とノミを持って1つの樽の前に立ち、明らかに懸命に作業している。彼の周りには、様々な準備状態の樽がいくつもある。忙しい男だ。ピンクのシャツにブルーのタイツという出で立ち。髭は剃ってあり、赤い帽子の下は短髪。エプロンをつけ、黒い靴を履いている。彼は、今日あなたが目にする中で最高の中世のクーパーであることは間違いない。もしかしたら一週間中かもしれない。樽の蓋には穴が開いているので、彼がパンゴリンを密輸している可能性は否定できない。パンゴリンは地球上で最も密輸されている動物だと思われがちだ。しかし、そうではない。ウナギです。もっとも密輸されている哺乳類は人間だ。ともあれ、センザンコウの密輸は悪いニュースだ。ミームの文章はこうだ:「ウナギは樽に入る。樽は市場に入る。ウナギは市場へ。いいウナギだ。」

もっと例を知りたい? alttexthalloffame@mastodon.social をフォローしてください!

Stefan Bohacek: "Question for #blind #VisuallyI…" - Stefan's Personal Mastodon Server

自動アカウントによって投稿された画像についてはどうですか?

これは少し厄介です。画像のコレクションがあれば、それぞれの画像について説明すればよいのです。

Book dedications bot: "Wild Things by Laura Kay #book…" - botsin.space

今まで片思いをしたすべての人へ。たくさんのネタをありがとう。

そしてまた、描写に工夫を凝らすことができる。

https://botsin.space/@1994clipart/110839754005679214

東部シマリスのカラーイラスト。リンネによってSciurus striatusと命名されたシマリスの学名は、後にTamias striatusと改名された。そう考えると、シマリスとマストドンの間には微妙なつながりがあるのかもしれない。

場合によっては、掲載されるまでに何が写っているのか正確にはわからないかもしれない。私が担当したプロジェクトでの例です。このアカウントは、ニューヨーク周辺のオンライン・ウェブカムからの画像を共有しています。それぞれのウェブカメラが通常何を映しているかを説明し、天気についての情報を加えました。

Views from New York: "Statue of Liberty TorchCam 📷 …" - botsin.space

このウェブカメラは通常、自由の女神の上から下を向いた景色を映している。ニューヨークは快晴。気温は華氏84度。

そして、これも私のプロジェクトだ。ここでは、それぞれの画像がどのようなものになるのか見当もつきません。一般的に画像の意義、なぜ共有されるのかを考える必要があるだろう。

Curator and the machine: "Curated anonymously. A random…" - botsin.space

直線または曲線の1つ以上の線で構成される、ランダムに生成される抽象的なデジタル絵画。

私は、これらの例があなたにインスピレーションを与え、ウェブが誰にとってもよりアクセスしやすくなるよう、あなたが自分の役割を果たすことを願っています。

あなたのお役に立つかもしれないリソースをいくつかご紹介しましょう。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment