はじめに
こんばんは。立命館大学4回生で学生IT団体watnow所属の藤堂ゆうかです。
普段はWebフロントエンドエンジニアとして、趣味の開発をしています。UXやアクセシビリティが大好きです。
watnow Advent Calendar 2024の15日目の担当として、代替テキストの重要性とその使い方を共有したいと思い、この記事を書きました。
Web・モバイルのフロントエンドを担うエンジニアにおける、
- 代替テキストを知らない人
- とりあえず全画像につけている人
- たまに意図的にプロパティをつけていない人(私はこれでした)
に、適切な使い方を知ってもらいたいです。ぜひ最後まで読んで、明日から実践してみてください。
代替テキストとは
代替テキストとは、Webページにおける画像や動画の代わりとなるテキストのことです。画像が表示されないときや、スクリーンリーダー・音声読み上げソフトなどを使用するときに用いられます。
代替テキストを設定するメリット
代替テキストを設定することで、主に3つのメリットがあります。
1. さまざまな理由で画像が表示されないとき、代わりに画像を説明する
Webページでは時折、画像が表示されないことがあります。例えば、次のような場合です。
- 何かしらのエラーで画像が読み込めない場合
- ユーザーが画像の読み込みを無効にしている場合
こうしたケースでも、適切な代替テキストがあれば、画像の意図が正しく伝わります。
| 代替テキストなし | 代替テキストあり |
|---|---|
 |
 |
| アイコン以外何も表示されていない | アイコンと共に画像の代替テキストが表示されている |
2. アクセシビリティの向上
代替テキストを設定することで、スクリーンリーダーやその他の支援技術で画像内容が視覚的に確認できないユーザーをサポートします。
これは三つのメリットの中でも特に重要であり、アクセシビリティ対応において欠かせない要素です。
これにより、画像が表示されない場合でも、その内容や意図を理解することが可能になります。
3. SEO効果が高まる
検索エンジンは画像を直接認識できません。代替テキストを介して画像の内容を理解し、SEOに役立てることができます。
参考ページ: Google 画像検索 SEO ベスト プラクティス
代替テキストの設定の仕方
Web(HTML)
画像埋め込み要素<img>にalt属性を指定することで設定することができます。
| alt属性 | コード | 表示結果 |
|---|---|---|
| あり | <img src="profile.png" alt="プロフィール画像" /> |
|
| なし | <img src="profile.png" /> |
|
alt属性説明の簡略化のためにsrcとaltのみを指定していますが、他にもloadingやheightなどの効果的なプロパティがあります。詳しくは、mdn web docsにおけるimgタグの属性一覧を参考にしてください。
alt属性を指定する上での注意点
1. 明確で簡潔に画像の内容を説明する
alt属性に指定する内容は、画像と同じ意味が伝わるようなものが望ましいです。特に、下記のような書き方では適切に画像の意味を伝えることができません。
- 画像そのもの存在を説明するもの
- 例:
alt="画像"
- 例:
- 画像のファイル名:
- 例:
alt="profile.png"
- 例:
2. 装飾画像には空文字列のalt属性を指定
代替テキストは、その画像を説明するための重要なテキストです。逆にいえば、装飾のためだけに表示された画像には、代替テキストを指定しない方が良いです。
ここで注意したいのが、alt属性を完全に省略すると、画像ファイル名が読み上げられることがあります。そのため、装飾画像の場合は、alt属性に空文字列を指定しましょう。
| コード | 表示結果 | |
|---|---|---|
| 装飾画像 | <img src="decorative.png" alt="" /> |
 |
そのほかの注意点に関しては、HTMLImageElement: alt プロパティ 使用上の注意を参考にしてください。
モバイル(Flutter,Swift)
モバイルにもWebページと同じように、画像表示における代替テキストが存在します。この記事では、FlutterとSwiftの2つを取り上げて紹介したいと思います。
Webを基準にして記述しているため、詳しい点については記事内で紹介したalt属性を指定する上での注意点や公式サイトを参考にしてください。
Flutterにおける代替テキストの設定
-
Image class
- 代替テキストの設定には、
semanticLabelを使用- 例:
-
dart
Image.asset( 'assets/profile.png', semanticLabel: 'プロフィール画像', )
- 装飾画像の場合は、
excludeFromSemanticsをtrueに設定- 例:
-
dart
Image.asset( 'assets/decorative.png', excludeFromSemantics: true, )
- 代替テキストの設定には、
Swiftにおける代替テキストの設定
- UIKitのUIImageView
- 代替テキストの設定には、
accessibilityLabelを使用- 例:
-
swift
let imageView = UIImageView(image: UIImage(named: "profile.png")) imageView.accessibilityLabel = "プロフィール画像"
- 装飾画像の場合は、
isAccessibilityElementをfalseに設定- 例:
-
swift
let decorativeImageView = UIImageView(image: UIImage(named: "decorative.png")) decorativeImageView.isAccessibilityElement = false
- 代替テキストの設定には、
- SwiftUIのImage
- 代替テキストの設定には、
accessibilityLabelを使用- 例:
-
swift
Image("profile") .accessibilityLabel("プロフィール画像")
- 装飾画像の場合は、
accessibilityHiddenをtrueに設定- 例:
-
swift
Image("decorative") .accessibilityHidden(true)
- 代替テキストの設定には、
おわりに
ここまで読んでくださり、ありがとうございました。
この記事では代替テキストについて紹介してきましたが、これは、私が伝えたいアクセシビリティのほんの一部に過ぎません。もし興味があれば、去年アクセシビリティについて頑張ってまとめた記事があるので、ぜひ読んでみてください。
この記事をきっかけに、アクセシビリティ対応を意識してくれるエンジニアが少しでも増えたら嬉しいです。大変だよ！という方は、まずは代替テキストの設定から始めてみませんか？
去年書いたアクセシビリティに関する記事
今日から始めるアクセシビリティ~少しの気遣いでより使いやすいアプリへ~