1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ユーザー投稿画像のaltと装飾

1
Last updated at Posted at 2026-08-01

ユーザー投稿画像のaltとアクセシブルネーム

プラットフォームの運営において、ユーザーは大きく分けて二種類。

  • 一般ユーザーに情報発信する側
    • 直接声をかけたり強制したりするのは一般ユーザー側に比べるとやりやすい
    • 本来アクセシビリティを強く意識すべき
  • 一般ユーザー側
    • 直接声をかけたり強制したりするのは難しい
    • アクセシブルなコンテンツの発信は個人に委ねられる

情報発信側に関してはある程度強制することが可能だが、入稿するのは人なので完璧にはできない。
システムで強く縛ったり警告を出したりすると逃げ口を探す方に誘導してしまうこともあり、逆にアクセシビリティが下がる対応が取られてしまうこともあるので、慎重にやる必要がある。

じゃあAIでいれたらいいのでは?

まず、画像の権利はユーザーにある。
また、画像の意味やその画像の意図を知っているのは投稿者本人だけ。AIが正解を知っているわけではない。

一般ユーザーが投稿する画像には「想い」が詰まっていることもある。
思い入れのある写真に対してAIで無機質な情報を、コンテキスト抜きに、何の連絡もなしに入れるのは避けたい。
だが、入れた方がいいのは確か。

ユーザーに生成ボタンを押してもらう

勝手に入れるのではなくユーザーが自分の意思で入れられるようにし、AIによる生成をサポートとして受け入れられる実装にする。

なるべくaltを入れて欲しいという理想はあるが、その実現のためにAIで知らないうちに勝手にaltを入れるような、ユーザーを無視した、ユーザーに思想を押し付けることはしない。
自らの意志で入れてもらえるように取り組む。

alt属性と空のalt

altを省略するとファイルのパスが読み上げられることもあるので、alt属性は常につけておく。
通常はユーザーが受け取る画像のaltは装飾であれ、altを指定しなかったのであれ、alt=""
これでいいのだろうか?

altを入れる重要性を知らずに設定しなかったのか、それとも意図して設定しなかった(装飾画像だった)のかのコンテキストが不足しているのでは?

装飾画像に設定する という設定

ユーザーが意図して装飾画像に設定したというコンテキストを残す。

  • altがあった場合:そのままaltに使う
  • altがない場合(装飾に指定あり):投稿者はこの画像を装飾として指定していますとaltに入れる
  • altがない場合(装飾にも指定なし):投稿者による画像の説明はありませんとaltに入れる
<!-- 状態1: altが入稿されている(通常ケース) -->
<figure>
  <img src="…" alt="湖畔に停まる赤いキャンピングカー">
</figure>

<!-- 状態2: 装飾マーク済み -->
<figure>
  <img id="dialog-img" src="…" alt="投稿画像"
       aria-labelledby="dialog-img dialog-img-status">
  <figcaption class="hidden" id="dialog-img-status">投稿者がこの画像を装飾画像に設定しました</figcaption>
</figure>

<!-- 状態3: alt入れ忘れ -->
<figure>
  <img id="dialog-img" src="…" alt="投稿画像"
       aria-labelledby="dialog-img dialog-img-status">
  <figcaption class="hidden" id="dialog-img-status">投稿者による画像の説明はありません</figcaption>
</figure>

なぜaltに入れたか?

最初は<img alt="" role="img" aria-labelledby="label-id" />で同様のテキストをアクセシブルネームに指定していたが、これだとiOSのVoiceOverで画像に辿り着けない。

2026年7月31日現在ではアクセシブルネームがあってもiOS VoiceOverでは空altの画像は完全に無視される。
MacのVoiceOverでは問題ないが、iOSのVoiceOverユーザーにはそもそも画像があることさえ認識してもらえないので、これではAIによる助けを求めることすらできない。

また、装飾であるかどうかを指定できたとしても、ユーザー投稿画像に関しては投稿者のリテラシーが高いという前提で扱うのは難しい。
つまり、装飾画像であるとの意図は伝える意味があるのだが、本当に情報をもたない装飾画像なのかどうかはわからない。
よって、画像にaltを空以外の指定を行い、画像の存在を伝えた方が良い。

また、装飾のためのイラストなどであっても中途失明者がそのaltを求めることもあるのに加え、青眼者が視覚的に得られている雰囲気なども同様に感じとれるようにしたいことも踏まえると、画像のaltは基本的には指定した方がいいのかもしれない。

もちろんリストのアイコンなど明らかに不要な情報を増やすだけのものなのであればaltは指定する必要がないと考えるが、そのような画像はそもそも背景画像として指定するべきなのでimgのaltとは別の話になる。

まとめ

  • ユーザー投稿画像は慎重に扱う
  • アクセシビリティを高めるために(あるいはそれ以外でも)ユーザーの時間を奪う場合極力労力を減らす
  • 空のaltをもつimgに対してアクセシブルネームを付与してもiOSのVoiceOverは無視する
  • OSがもつ画像の説明が一般的に利用でき、認知も高いのであればそれを活かす実装に変えていく

補足

altにテキストを入れることでOS側の説明生成機能が働かなくなるのではないかという懸念があったが、iOSに関してはaltに画像が入っていても画像の説明設定がオンになっていればaltの後に生成された内容がちゃんと読み上げられた。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?