ラベルをつけるのかい？つけないのかい？どっちなんだい！

## ラベル
皆さんは画像やアイコンに対してアクセシブルネームを追加する、しないをどう決めていますか？
この記事は

- altに何を入れればいいかわからない
- altを入れない基準がわからない
- アクセシビリティの指摘をされたが、よくわからない

という人のため（主にデザイナー）にヒントとなる考え方を共有します。

## 例1　背景にパーティクルが舞っている画像

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/0b8f31a7-e146-4e33-167f-093bcf4fdc6a.png)

背景に点と点が線で繋がった画像の上に「イけてるテキスト」と書いてある画像です。

「イけてるテキスト」という文字も含めて画像になっている場合、この画像のaltには「イけてるテキスト」と記載するといいでしょう。

もしこの画像が「めっちゃイけてるでこのサイト！このサイトの雰囲気を感じ取ってくれ！」という意図で作られており、それを視覚に寄らず提供したいのであれば、
背景画像をimg、altに「点と点が線でつながり、形を変えながら移動している画像」などのテキストをいれ、テキスト部分をpやh2などで実装すると良いでしょう。

## 例2　マップのアイコンの横にテキストが書かれたもの
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/0659fcd0-ec39-d6c4-6b03-1feeb3a29e15.png)

マップの横に「梅田駅」と書いてある画像です。
マークアップ的には以下のような感じです。

```html
<p><svg>…</svg> 梅田駅</p>
```

このような例では、周辺のテキストから「梅田駅」というテキストの意味を理解できるならsvgにアクセシブルネームを追加する必要はないでしょう。

もしそうでないなら、
```html
<p><svg aria-label="最寄駅">…</svg> 梅田駅</p>
```
や、
```html
<p class="sr-only" id="label">最寄駅</p>
<p><svg aria-labelledby="label">…</svg> 梅田駅</p>
```
のようにするといいでしょう。

そもそもこのようなデザインはアイコンの意味が正しく伝わるとは限らないので、目に見えるテキストとして「最寄駅」というテキストを表示することを優先しましょう。

## 例3　クリックするとポップアップが表示されるアイコンボタン
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/fcdc52dd-c128-0375-9345-adf0a4631e3d.png)

クリックするとポップアップが表示されそうなアイコンが真ん中に配置された正方形のボタンです。

```html
<p>京都府</p>
<button aria-haspopup="true">
  <img alt="" />
</button>
```

ボタンをクリックすると京都府の観光地の一覧がポップアップで表示されるとします。
この場合buttonにはどんな属性をつけたらいいでしょうか？

```html
<p>京都府</p>
<button aria-haspopup="true">
  <img alt="京都府の観光地詳細メニューを開く" />
</button>
```
このように書くと一見良さそうですが、「メニューを開く」の部分は`aria-haspopup`の付与によってスクリーンリーダーが読み上げてくれるので、冗長です。
京都府　の部分もbuttonの近くにあるテキストが使えそうです。
また、このアイコン画像は必ずしも京都府の観光地を指すアイコンではなく、あくまで場所を表すための目印として使用されているアイコンです。
そのようなアイコンのaltに「京都府の観光地詳細メニューを開く」と書いてしまうのは微妙でしょう。

改善してみるとこうです。

```html
<p id="area">京都府</p>
<button aria-label="観光地詳細" aria-describedby="area" aria-haspopup="true">
  <img alt="" />
</button>
```
こうしておけばスクリーンリーダーの読み上げ的にもbuttonの前にあるテキストが最後に読み上げられるので良いでしょう。

## 例4　サムネイル付きの記事リンクカード
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/a9bc5612-895d-91ea-7400-6d77a62db95d.png)

左にサムネイル画像、右に記事タイトルと投稿日が表示されている画像です。

```html
<article><a href="">
  <img alt="" />
  <div>
    <h1>ラベルをつけるのかい？つけないのかい？どっちなんだい！</h1>
    <time datetime="2024-12-10T09:00:00">2024-12-10</time>
  </div>
</a></article>
```
このようなマークアップの時、imgのaltには何も指定しない方がいいでしょう。
もしサムネイル画像に記事を説明する重要な何かが含まれているのであれば指定してもいいかもしれませんが、サムネイル画像はあくまでちょっとした目線を引くための飾りであることが多いため、大体の場合は指定しなくてもOKだと思います。

もしaの中にテキストが何もなかったり記事タイトルが入っていないのであれば画像のaltに入れてもいいでしょう。
aにはアクセシブルネームが必要です。（なんのリンクかわからなくなってしまうので）

## 例5　操作する方向を示すデザイン

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1677134/c471619e-08a1-ff7a-9799-683da3644dee.png)

ポケポケのパックの左から右にスワイプするUIの画像です。

ここをWebで実装する場合どういう実装がいいのかはわからないですが、目が見えない人にも「パックを切って開封する」体験を届けるのであれば単純にここにフォーカスしてenterキーなどで開けられる実装では体験として不十分でしょう。

このUIはユーザーが左から右へスワイプすることを体験の一つとして取り入れているので、
例えばinput rangeのように値を0から100くらいまで増加させることがユーザーに通知される仕組みがいいかもしれません。（input rangeは不適切なマークアップかもしれません…）

アクセシビリティに多少難がありますが、例えば右キーを3秒間押したままにし、3秒後にパックが開封されたことがスクリーンリーダーに通知されるような実装をすれば晴眼者と似た体験を提供できそうです。

そのインタラクティブな要素のアクセシブルネームには
```html
<button aria-label="右キーを3秒長押しでパックを開封、もしくはEnterキーで開封"></button>
```
のように指定することになるでしょう。

## まとめ
まとめると問うべきは以下です。

- 画像やアイコンをどんな意図で配置しましたか？
    - テキストの代替として画像やアイコンを使用したのであればアクセシブルネームにそれを指定しましょう
- 周りにその画像やアイコンを説明するテキストがありますか？
    - あるならスクリーンリーダーでの読み上げが冗長にならないようにしましょう
- それは視覚に依存していませんか？
    - 視覚以外から同じ情報を得られないようになっている場合は改善の余地があります
- 視覚から得られる以上の情報を含めてしまっていませんか？
    - 視覚、聴覚など特定の五感だけでしか得られない情報がないようにしましょう

スクリーンリーダーやアクセシビリティ対応が…と考えるのではなく、
このデザインはどういう意図で作ったものか、それがマークアップに反映されているか
を考えるようにしましょう。

altに関しては[altディシジョンツリーのページ](https://www.w3.org/WAI/tutorials/images/decision-tree/ja)も参考にしてください。