How to write alt text and accessible image captions for your online posts

あなたのオンライン コンテンツやソーシャル メディア プロフィールに、あなたの投稿に遭遇する大多数の人がアクセスできるようにすることは、意図的な行為です。からインスタグラムそしてツイッター写真の説明へTikTokビデオの音声にキャプションを付ける、ユーザーはこれらに注意する必要があります。アクセシビリティ考慮事項。そして、これは、さまざまな障害を持つ人々がアカウントを確実に操作できるようにするための重要な方法です。

心配しないでください。ほとんどのツールはすでに自由に使えるようになっています。

プロフィールにアクセスしやすくする最も簡単な方法の 1 つは、投稿に代替テキスト (代替テキスト) 画像の説明を追加することです。このシンプルな実践は、何百万ものアメリカ人視覚障害者や弱視の人から、画面読み上げデバイスを使用するその他の多くの人まで、インターネットにアクセスするために支援技術を使用している人たちです。記述された説明は Web サイトの HTML に追加され、画像をスクリーン リーダー、音声コントロール、さらには点字に直接翻訳することも容易になります。

ほとんどの場合、代替テキストは Web サイトデザイナーの責任であり、コーディングプロセスで実装されますが、画像や装飾要素を頻繁に追加するプロファイルでは、自分で行うことも検討する必要があります。これらの追加にはそれほど時間はかかりませんが、代替テキストの画像説明を他の技術者が簡単に読み取れるようにするにはコツがあります。

画像に独自の代替テキストを追加する準備をするときは、次の 3 つの主な点に留意する必要があります。

1. 画像の目的

代替テキストの説明のほとんどは、ワールドワイド ウェブ コンソーシアム (W3C)、国際的な Web アクセシビリティ標準グループ。これらの標準は、Web 開発者、企業、さらには個人ユーザーにも指針を提供します。 W3C は、ユーザーに次のことを考えるよう指導することから始まります。イメージコンセプト「投稿しているものについて説明するとき: 本質的に、インターネット上での画像の目的は何ですか? 投稿しているものの主なコンテンツは何ですか?

すごく可愛い自撮りですか？それは多くの物体があるにぎやかな風景ですか?面白いツイートのスクリーンショットなので、テキストがたくさん含まれていますか?それとも、カスタム Tumblr テーマのようなものをコーディングしている場合、画像はサイトの見栄えを良くするためだけに存在するのでしょうか?この情報を知っておくと、そもそもどの画像に説明的な代替テキストが必要なのか、説明自体で何を優先する必要があるのか​​を判断するのに役立ちます。

W3C はそのガイドライン内でさまざまな画像概念を説明していますが、日常のソーシャル メディア ユーザーや在宅プログラマーは、おそらく次の 3 つのタイプのうちの 1 つだけを説明しているでしょう。有益な画像、テキストの画像、 そして画像のグループ（インスタグラムのカルーセルを思い浮かべてください）。デジタルアクセシビリティ相談グループとしてしたがってその中に書きます代替テキストガイド、装飾的な画像など、他のタイプの画像では、情報を提供しないデザイン要素を追加することのみが目的の場合、代替テキストの説明は必要ありません。この例としては、ホームページの装飾ヘッダーや、美的理由のみで使用されるカラフルな背景画像などがよく挙げられます。

2. カスタム説明と自動説明

これは、画像を投稿する場所によって完全に異なります。サイトによっては、編集機能を提供せずに画像の説明を自動的に生成する場合もありますが、ユーザーが必要に応じて代替テキストを追加できるサイトもあります。たとえば、Twitter に投稿している場合は、自分のツイートの設定で短い画像の説明を記述するオプションがあります。つまり、ツイート自体に説明を追加する必要はありません。他のアプリにはそのオプションがないため、もう少し創造性を発揮する必要があります。

これらのアプリや Web サイトのそれぞれで自由に使えるツールに留意してください。

ツイッター

Twitterがカスタムを追加しました2016 年の画像キャプション ツールアクセシビリティ機能をより多くのメディアに拡張し、GIFを含む、2020年に。2022年に、サイトは機能を作りましたさらにシンプルかつ直接的。そして 2023 年には、統合 GIF ライブラリが登場します。GIPHY がデジタル アクセシビリティ プロバイダー Scribely と提携最も人気のあるすべての GIF に社内の代替テキストを提供します。

デスクトップ サイトまたはモバイル アプリから、元のツイートに画像や GIF の説明を追加または編集できるようになりました。デスクトップの場合は、次の場所に移動します。「ツイート」画像を追加し、選択します「説明を追加」画面の下部にあります。モバイルユーザーには小さな表示が表示されます「+ALT」画像右下のボタン。写真に代替テキストを追加するには、これを選択します。

Twitter の代替テキストには 1,000 文字の制限があり、Web サイト独自のテキストを参照できます。アクセシブルな画像の説明を書くためのアドバイス、 同じように。

ツイートは削除された可能性があります

代替テキスト Twitter ボットをフォローすることもできます@AltAwarenessそして@get_AltTxt代替テキストのサポートを取得したり、ツイートにすでに画像の説明が含まれているかどうかを確認したりできます。

フェイスブック

Facebook の画像投稿の場合、ユーザーは次のことができます。独自の代替テキストをカスタマイズするサイトが独自の説明を自動入力した後。投稿に画像またはビデオを追加するときは、投稿の上部にある編集メニューをクリックします。をクリックしてください「代替テキスト」。写真の左側に、Facebook 独自の自動生成された代替テキストの説明が表示されます。人工知能プログラミング。説明に満足できない場合は、次のテキスト ボックスまでスクロールしてください。「カスタム代替テキスト」独自の説明を追加します (説明を追加した後、このボックスの横にあるドットを必ず選択してください)。

すでに投稿されている画像の代替テキストを変更するには、投稿の右上にある 3 つの点 (小さな鉛筆アイコンとして表示される場合もあります) に移動し、「代替テキストを変更します。」前と同じ手順に従ってカスタム代替テキストを追加します。

インスタグラム

Instagram では、オブジェクト認識テクノロジーを使用して、画像投稿にメタデータ内で自動的に画像の説明が与えられます。しかし、コンピューターは常にすべてを正確に記述できるわけではありません。多くの活動家は、インスタグラムの説明文の最後に、障害者擁護団体による以下のような独自のアクセシブルな説明文を追加することを検討すべきだと主張している。モリー・バーク。

3. 代替テキストの作成

ここで、ニュアンスと少しの先見性が必要になります。

簡潔だが意味のある説明を書く

代替テキストの説明は、画像の内容と意味の両方を明確に伝える必要があり、次のことを目指す必要があります。必要最小限の単語を使用する。投稿された写真の意図を理解する (そして楽しむ!) ために何が重要かを説明します。すべての視覚要素について文章を追加する必要はありませんが、画像を正確に描写するために必要なだけの内容を含める必要があります。不要な単語を削除し、別々の文章を可能な限り結合します。通常、何が起こっているかを説明するには 1 ～ 2 文で十分です。

前述したように、これらの写真は、フィードを明るくするために投稿しただけであっても、ページをスクロールしているユーザーに情報を伝えます。これらには目的があるため、代替テキストは画像の美しさよりも画像の意味に重点を置く必要があります。これは、写真の中の物体だけに焦点を当てていないことを意味しますのように見えます、しかしそれは何ですかそしてなぜそれは投稿されました。

これを明確にするために、画像の目的を決定したことに戻ります。これはアカウント自体によっても異なる場合があります。どのようなコンテンツを、なぜ、誰と共有しますか?必要なだけの詳細を含めるようにしてください。特定の対象者また​​はコンテキストあなたはのために投稿しています。上記の Burke の Instagram の例では、彼女の説明は、擁護に加えて、楽しいファッション関連のインフルエンサー コンテンツを求めて彼女のアカウントを頻繁に訪れる視聴者を引き付けるのに役立ち、説明にはその論調が反映されています。

「写真」は必要ありません

「の写真」や「の画像」などの語句は文字スペースを占めます。投稿した画像がスクリーンショットまたは GIF であることをフォロワー、ユーザー、または読者に確実に知らせたいと思うかもしれませんが、スクリーン リーダーの仕組みにより、グラフィックにスクロールしたことを彼らはすでに知っている可能性が高いです。 Web 要素を区別します。これらのフレーズを代替テキストに追加しないようにして、貴重な単語を節約してください。画像が提供する情報に応じて、絵画、イラスト、アニメーションの区別が役立つ場合があります。画像が棒グラフと円グラフなど、特定の方法で情報を伝えるグラフや図を描いている場合を区別することも重要な場合があります。

必要な場合を除き、物理的なアイデンティティを避ける

他の人の写真や自分が撮ったものではない画像を投稿するときの経験則は、性別、人種、障害、年齢などの身体的記述を避けることです。固定観念を永続させたり、誤った情報を広めたりする可能性があります。これらの記述子のみを含めます本当に関連性があり、確認できる場合。この選択は、コンテンツに誰が参加すると予想されるかによっても異なります。

あなたのミームについて説明してください

特定のトーンや社会的文脈を持つミーム、編集、または面白い GIF を投稿している場合は、簡潔な説明を追加する代替テキストの説明に。特に GIF の場合、スクリーン リーダーは静止画像として読み取ることが多いため、代替テキストに何が動いているのか、何が起こっているのかを理解できるようにしてください。

絵文字は使用せず、ハッシュタグは大文字にしてください

絵文字は多くの場合極端ですスクリーンリーダーとそのユーザーにとって難しい理解すること。単語を置き換えるために絵文字を使用することは避け、問題の絵文字についての単純で文脈に応じた説明を使用してください。

看板やシャツに書かれた言葉を伝えるためなど、画像の説明にハッシュタグを含める必要があると感じる場合は、ハッシュタグ内の各単語の最初の文字を必ず大文字にしてください。これにより、スクリーン リーダーがハッシュタグを理解するのに役立ちます。スペース。

句読点を軽視しないでください

スクリーン リーダーは、人間が書いたテキストを読み取って繰り返すように設計されているため、代替テキストの説明を通常の読み書きにできるだけ近づけることで、ユーザーは何が起こっているのかをよりよく理解できるようになります。複数のオブジェクトを説明したり、写真に表示されているテキストを伝えたりする場合は、必要に応じてカンマ、ピリオド、引用符を使用します。

代替テキストの説明で何が機能し、何が機能しないのかの例をいくつか確認してください。

例：「外で二人が砂をはいて、ジャンプしている。」

代替：「大人と子供が屋外の公園で楽しく遊んでいます。」

例： "青いコートを着た若い女性がハンバーガーを持ち、フライドポテトを食べている様子を撮影した画像。彼女は外のテーブルに座っていて、後ろには建物があります。男性が彼女の隣に座って、彼女が食事をしているのを眺めています。」

代替： "ある人は友人と外でハンバーガーとフライドポテトを楽しんでいます。」

例： "iPhone を持つ手の薄暗い写真。携帯電話の後ろには明るく照らされた青と白のスクリーンがあり、スクロール中に Twitter のロゴが表示されます。」

代替： "認証済みの Twitter アカウントをスクロールしている人。」

代替テキストの説明は非常に状況に応じたものであり、個々のソーシャル メディア ユーザーにとって進化する技術であり、あなた、あなたのフォロワー、一般大衆にとって何が実際に役立つかを理解するプロセスの一部です。説明を試して失敗しても問題ありません (または、代替テキストを改善できる可能性があることに気づいても)。アクセス可能なオンライン スペースの構築をまったく試みないよりも、試みる方が良いでしょう。

についての話をもっと読みたいアクセシビリティ技術的には？に登録するMashable のトップ ストーリー ニュースレター今日。