代替テキスト

代替テキストを使用

プロジェクト内の画像（または複数の画像）に代替テキストを設定すると、スクリーンリーダーがその代替テキスト画像の説明を読み上げます。画像に代替テキストを設定することで、視覚障害のある人や視覚障害のある人にとってウェブサイトがよりアクセス可能になります。また、感覚処理障害や学習障害のある人々にも役立ちます。

知っておくべきこと： スクリーンリーダーは、主に視覚障害のある人が使用する支援技術です。テキスト、ボタン、画像、その他の画面要素を音声で読み上げたり、点字で表示したりします。

代替テキストは、画像が正しく読み込まれなかった場合や、画像の表示をオフにしたブラウザでもブラウザのビューポートに表示されます。

画像コンテンツに代替テキストを付けることで、検索最適化の成功に近づけることができます。画像をすべてのユーザーに適切に説明すれば、検索エンジンもそのコンテンツをより正確に取り込み、解釈できるようになります。

ほとんどの場合、デザインに含まれる画像の大部分は、ウェブサイトの訪問者（および検索エンジン）に意味を伝えるために代替テキストを付けることで利益を得るでしょう。ただし、サイトには関連する意味を伝えない装飾的な画像がいくつか含まれている場合があり、その場合は代替テキストは不要です。

関連性のある代替テキストを書く

代替テキストは、画像の内容を説明し、意味を伝えるものであるべきです。時には、それをニュースの画像のキャプションを書いているかのように考えると役立つことがあります。例えば、画像を説明する前に「Image of」や「Picture of」といった言葉を含める必要はありません。それらの言葉の追加が説明に価値や意味を付ける場合を除いてはです。

代替テキストをいつ、どのように書くかを選択する際には、常にあなたの対象となる観衆と、彼らがあなたのデザインを使用する際の経験について熟考することが最善です。以下の点を考えてみてください：

• スクリーンリーダーを使用してページをナビゲートするとどのような体験になるか？
• 画像がない場合、何が変わるのか？
• 代替テキストを含めないとユーザーが関連するコンテンツを見逃すことになるでしょうか？

これらの考慮事項をデザインと開発のプロセスに取り入れることは、単に包括的であるだけでなく、コンセプトから公開まで、ビルドにかかる時間を効率的にします。

効果的な代替テキストの例

ニューヨーク・タイムズ』紙の画像のaltテキストには、"今月、フローレンス（カンザス州）上空でスペースX社のスターリンク衛星を長時間露光している "とある。

アップルからの画像のaltテキストは、"スマイリーフェイスの絵文字でパーソナライズされたAirTagの正面図と背面図 "と書かれている。

Slackの画像のaltテキストには、"SalesforceやGoogle DriveなどのアプリがSlackに接続するためのアイコン "と書かれている。

個々の画像に代替テキストを設定する

通常、画像に代替テキストを追加する最も拡張可能で時間の節約になる方法は、アセットパネル（Assets panel）内の画像アセット自体に代替テキストを設定することです。代替テキストが設定されたアセットを含むImage要素を使用する場合、そのImage要素はすでにアセットに設定されている代替テキストを継承します。Image要素をプロジェクトに何度でも追加でき、その要素の各インスタンスは常に使用されたアセットに設定された代替テキストから取得します。

Assets panelでImageに代替テキストを設定するには：

1. Assets panelを開きます。
2. 代替テキストが必要なImageの上にカーソルを合わせます。
3. 画像のAsset detailsモーダルを開くための「歯車」アイコンをクリックします。
4. 空白のフィールドにalt textを入力し、作業が完了したらアセットの詳細モーダルを閉じます。

Asset panelでアセットに代替テキストを設定した場合、Image要素は自動的に使用するアセットから代替テキストを取得します。

また、Imageアセットごとに代替テキストを設定することもできます。たとえば、すでにアセットパネルのImageに代替テキストが設定されている場合、それを異なるものに上書きできます：

1. 代替テキストを上書きしたいキャンバス上のImage要素を選択します。
2. Imageの設定にアクセスするために「歯車」アイコンをクリックします。
3. Alt text dropdown をクリックし、カスタム代替テキストを設定する場合は「Custom description」を選択し、画像を装飾的に設定する場合は「decorative」を選択します。

上記の手順は、更新したImage要素のインスタンスにのみ影響します。同じ画像の新しいコピーをデザインにドラッグすると、代替テキストは以前にアセットパネルで設定した代替テキストにデフォルトで設定されます。

注意: これらのImage要素の代替テキスト設定には、Designerの右側にあるElement settings panel からもアクセスできます。

また、Rich text要素にもImageの代替テキストを追加できます：

1. Rich text要素内のImageを選択します。
2. 「レンチ」アイコンをクリックします。
3. Alt textドロップダウンをクリックし、「Custom description」を選択してカスタムの代替テキストを設定するか、「Decorative」を選択して画像を装飾的に設定します。

注意：リッチテキスト要素がCMSコレクションのリッチテキストフィールドからテキストと画像を取得する場合、コレクションアイテム自体のリッチテキストフィールドで画像のaltテキストを更新する必要があります。

Rich text要素とRich text fieldについて詳しく読む。

CMS画像に代替テキストを設定する

ブログ投稿シリーズの例を使用しましょう。それぞれのブログ投稿には、全体のブログ投稿内容に文脈を追加する有意義なヒーロー画像があります。ヒーロー画像は、CMSコレクション内のImageフィールドを介して各投稿に取り込まれます。各ブログ投稿のヒーロー画像に意味のある代替テキストを設定するには、CMSコレクションに新しいテキストフィールドを追加し、代替テキストを追加するための専用のスポットを提供します。

1. CMS panelを開きます。
2. Collection（例：「ブログ投稿」）の上にカーソルを合わせ、その「レンチ」アイコンをクリックして設定を開きます。
3. Add new fieldをクリックし、Plain textを選択します。
4. label（例：「ブログ画像の代替テキスト」）を付けます。
5. 「Save field」およびSave collectionを押して、変更内容をsave your changesします。

コレクションに代替テキストフィールドを追加したら、各コレクションアイテムのブログ画像に意味のある代替テキストを記述することを忘れないでください。

1. Collection（例：「ブログ投稿」）を開きます。
2. Collection item （例：ブログ投稿の1つ）に入ります。
3. 新しいテキストフィールド（例：「ブログ画像の代替テキスト」）までスクロールし、コンテンツに意味を追加する記述テキストを書きます。
4. Saveボタンを押します。

上記の4つの手順を、代替テキストが必要な画像を含む各コレクションアイテムに対して繰り返します。

コレクションアイテムのすべての画像に代替テキストを追加したら、デザイナーに戻り、ブログ投稿のヒーロー画像に代替テキストを設定できます：

1. 任意のImage要素を選択し、それが変更したばかりのコレクションにリンクしていることを確認します。
2. Element settings panelを開きます。
3. Get alt text from your Collection name（例：「ブログ投稿から代替テキストを取得」）をチェックします。
4. 新しい代替テキストフィールド（例：「ブログ画像の代替テキスト」）を選択して、新しい代替テキストフィールドのコンテンツをImage要素の代替テキストにバインドします。

新しい代替テキストフィールドを各ブログ投稿のヒーロー画像に接続したため、各画像には独自のユニークな代替テキストがあります。今度は、スクリーンリーダーを使用する人が、各画像の代替テキストを読み上げ、コレクションアイテムの各項目に含まれる情報を使用します。

プロのヒント: コレクションアイテムを素早く切り替えるには、Shift + Option + 左矢印または右矢印（Macの場合）またはShift + Alt + 左矢印または右矢印（Windowsの場合）を押します。

Collection items および Collection fields について詳しく読む。

Multi-image CMSフィールドの画像に代替テキストを設定する

画像グリッドのようなものに表示される複数の画像を読み込み、各画像に代替テキストを含めたい場合があります（各画像には意味のあるコンテンツが含まれているため）。

複数の画像に代替テキストを追加するには：

1. キャンバス上のCCMS itemを選択します。
2. CMS panelを開き、Collection（例：「写真撮影」）を選択します。
3. マルチイメージフィールドを含むCMS itemを開き、画像の上にホバーします。
4. 3つのドットをクリックし、「Edit alt text」を選択します。
5. 利用可能なフィールドにalt textを入力します。

Multi-image field内の各画像に対してこのプロセスを繰り返してください。これで、コレクション内のImage要素に代替テキストを紐付けることができます。

これで、すべての意味のある画像に説明を追加する準備が整いました！

リソース: 画像の代替テキストとスクリーンリーダーについてもっと学びたい場合、How to Design Great Alt Text: An Introduction と Images must have alternate text を Deque University からチェックしてみてください。