# alt属性についての基本方針
`alt`
この属性は、画像を説明する代替文字列を定義します。

ブラウザーが画像を表示しない状況はいくつかあります。

- 視覚ブラウザー以外のブラウザー (視覚障がい者向けの物を含む) で閲覧された場合
- ユーザーが画像を非表示に設定している場合 (帯域の節約、なにかしらの理由)
- 画像が無効であったり未対応の画像形式であったりした場合
※そのようなことがないように制作することは前提

このようなとき、altの値は代替テキストとして利用されます。
一方で、冗長な値は、ユーザーの内容への理解を妨げる要因にもなりかねません。

できる範囲でひとりでも多くの人にとってわかりやすい（使いやすい）Webサイトにするために、適切な実装をお願いします。

---

## altの値は必須
- [1.画像にしか含まれていない情報がある場合](#1.画像にしか含まれていない情報がある場合)
- [2.a要素で画像を括っていて、a要素にテキストがない場合](#2.a要素で画像を括っていて、a要素にテキストがない場合（画像リンク）)

## altの値を入れるか要検討
- [3.画像がイメージを訴求する、アイキャッチである場合](#3.画像がイメージを訴求する、アイキャッチである場合)
- [4.a要素で画像を括っているかつ、テキスト情報もある場合](#4.a要素で画像を括っているかつ、テキスト情報もある場合（画像リンク）)
- [5.画像に個人情報が含まれる場合](#5.画像に個人情報が含まれる場合)

## altの値は空
- [6.画像のまわりのテキストが画像と同じ内容を説明している場合](#6.画像のまわりのテキストが画像と同じ内容を説明している場合)
- [7.画像が純粋な装飾である、見た目の整形のためだけに用いられている場合](#7.画像が純粋な装飾である、見た目の整形のためだけに用いられている場合)

:warning: altの値が空の場合でもalt属性自体は削除しないでください [※1](#※1)
省略する場合はPull Requestの際に、理由を添えてお知らせください。

---

## 詳細
### 1.画像にしか含まれていない情報がある場合
- 例えばテキストを画像化している、かつそれが重要な情報のときは、画像テキストになっている内容をaltの値に記載します。

*例）重要な画像（応募期間などサイトに必要な情報）*

*例）重要な画像（無くても成立するが、ブランドにとって伝えたい内容がある）*

*例）重要でない画像（にぎやかし、無くても情報が成立する画像）*
画像にしか含まれていない情報だが、なくても成立する。「パカッ！」と開くことが重要なのであれば、そのようなテキスト情報を設けることを検討すべき。

### 2.a要素で画像を括っていて、a要素にテキストがない場合（画像リンク）
- altの値は必須です。画像を表示できない環境ではリンクが存在しないことになってしまいます。リンク先のタイトルなどを記載してください。

### 3.画像がイメージを訴求する、アイキャッチである場合
- 基本的にはaltの値は空とします。その画像がなくても、伝わる情報に差がなければ、altの値は空で問題ありません。
- だだし、重要な内容なのであれば、alt単体で読んでも違和感のない適切な文を記載してください。※括弧や記号など、表示はされても読み上げは行われません。それがなくても理解できる文章にしてください。
- その画像の内容がテキストと重複しないのであれば、意味をもたせることも可能です。

*例）"横7センチ、高さ12.5センチ、厚さ7ミリ程度のアルミシートに10粒ずつセットされている商品の画像"*

このaltでは、画像を見ることでしか得られない情報（情報格差の解消）、商品画像であること（事実）をテキストの内容と重複せずに表しています。
ただし、このように別で意味をもたせる場合、制作側で原稿を新たに作ることにもなるので、正しい情報になっているか、表現がふさわしいかはコンテンツオーナーの確認が必要です。

### 4.a要素で画像を括っているかつ、テキスト情報もある場合（画像リンク）
- 基本的にaltの値は空とします。このようなケースでaltに同じような値を入れるのは、かえって冗長です。
- だだし画像とテキストでひとつの意味を成していたり、重要な情報となるときは、よく検討のうえ判断してください。（場合によってはaltの値が空で済むよう、構成やテキストを変更することもひとつの手。）

### 5.画像に個人情報が含まれる場合
- コンテンツ特性、他のケースを踏まえaltの値の必要性についてよく検討してください。

注意）altの値に個人情報を含めると判断したとき、ディレクターは画像がGoogleなどの外部検索エンジンにクロールされ、インデックスされることについて該当する個人に承諾を得ているかをコンテンツオーナーに確認してください。
なお、画像自体はインデックスさせないよう robots.txt で制御します。設定が入っているかもあわせて確認してください。

### 6.画像のまわりのテキストが画像と同じ内容を説明している場合
- altの値は空とします。このようなケースでaltに同じような値を入れるのは、かえって冗長です。

### 7.画像が純粋な装飾である、見た目の整形のためだけに用いられている場合
- altの値は空とします。このようなケースでaltに同じような値を入れるのは、理解の妨げにつながります。

---

## 最後に…
### 心得え
- alt属性は画像の説明ではなく、代役。前後の文脈とつながりを持たせ、そこに画像があったことにすら気づかせないaltを目指しましょう。（不要であれば無理に入れない）
- 逆にその画像の内容がテキストと重複しないのであれば、新たな意味をもたせることも可能です。ただし、その場合はコンテンツオーナーと一緒に作り上げるようにしてください。
- 値を入れたときは、あなたが視覚的な情報を得られない環境にあると仮定。そのaltの値で、通常時と格差ない情報が得られるかを検証してみましょう。
- 一枚の画像に沢山の情報があり、値に記載する文章をまとめきれないときは、ひとりで悩まず、意図の情報をより多く持っているデザイナーや、ディレクターに相談してみましょう。

-----
### 脚注
#### ※1
HTML5ではalt属性自体を省略できるようになりましたが、推奨してはいません。
（省略するときの条件として、figure要素内に含むか、title属性をつける必要があります。（詳細は割愛））

---

### 参考リンク
:link: 1. WCAG2.0 日本語翻訳
[Web Content Accessibility Guidelines (WCAG) 2.0](https://waic.jp/docs/WCAG20/Overview.html#perceivable)

:link: 2. WHATWG HTML Living Standard

**4.8.4.4画像の代替として機能するテキストを提供するための要件**
┣ [日本語翻訳版](https://momdo.github.io/html/images.html#alt)
└ [英語原文](https://html.spec.whatwg.org/multipage/images.html#alt)
余談: 日本語翻訳版より英語原文を翻訳機能にかけたほうがわかりやすい気がします

:link: 3. MDN 開発者向けのウェブ技術
[開発者向けのウェブ技術 > HTML: HyperText Markup Language > HTML 要素リファレンス><img>: 画像埋め込み要素](https://developer.mozilla.org/ja/docs/Web/HTML/Element/img)