音声入力で、伝わる画像の代替テキストを書く
記事を書き終え、画像もアップロードしたのに、代替テキストの欄だけが空いている。その画像を載せる理由は説明できても、短い文章にまとめようとすると、もう一つ執筆作業が増えたように感じることがあります。
そんなときは音声入力を下書きに使ってみましょう。Macで画像と文書を並べ、重要な点を声に出してから、文章を整えて投稿ツールに入力します。画像の内容と文脈を判断するのは自分です。音声入力は画像を解析するのではなく、自分が話した説明をテキストにします。
1. このページで画像が果たす役割を確認する
まず、W3Cのalt属性の判断フローを参考に、画像の役割を確認します。すべての画像に説明文を付けるとは限りません。
- 情報を伝える画像: 画像が伝える意味を説明します。情報を伝える画像の解説を参照してください。
- 装飾のための画像: 属性を省略せず、空の代替テキスト
alt=""を使います。装飾画像の解説に詳しい説明があります。 - リンクやボタンの唯一のラベルとなる画像: 移動先や操作を伝えます。機能を持つ画像の解説が参考になります。
- 複雑なグラフや図: 短い代替テキストに、アクセス可能な詳しい説明を組み合わせます。複雑な画像の解説を確認しましょう。
この判断を先に済ませれば、ページに不要な説明文を時間をかけて磨くことを避けられます。
2. 三つの問いに声で答える
情報を伝える画像なら、下書き用の文書で次の問いに答えてみてください。
- 中心となる物や動作は何か。
- この記事にとって重要な、目に見える特徴は何か。
- 画像を指させないとしたら、何を言葉で伝える必要があるか。
画像と前後の文章を見ながら、一枚ずつ説明します。複数の画像を扱うときは、下書きにファイル名を添えておくと、説明文の取り違えを防げます。
最初は普段どおりに話して構いません。「ここにあるのは」といった前置きや言い直しは、後から削れます。完成した一文を考える前に、伝えるべき観察内容を残しましょう。
3. 話した内容を代替テキストに整える
荷造りのガイドに、ノートPC用バッグの内側を写した写真を載せる場面を考えます。この架空の例では、周囲の文章に書かれていない収納部分の配置を写真が補っています。
音声での下書き:「机の上でバッグが開いています。ノートPCがクッション付きの収納部分に入っていて、充電器は別のファスナー付きポケットにあります。別々に収納されているのがポイントです。後ろには観葉植物もあります」
編集後の代替テキスト:
開いたノートPC用バッグ。クッション付きの収納部分にノートPCが入り、別のファスナー付きポケットに充電器が入っている。
必要な配置を残し、下書き中の補足や背景の植物は省きました。ブランド名や容量、破損を防ぐ効果など、確認できない情報も付け加えていません。これは、商品説明を書くときにも使える、観察してから編集する進め方です。
4. 実際の画像と照らし合わせる
記憶ではなく、掲載する画像を見ながら読み直します。商品名、画面上のラベル、数字の誤変換を直し、確認できない内容は削除してください。ページ本文と続けて読み、不要な繰り返しや説明不足も確かめます。
他言語版では、その言語のページと画像を一緒に確認します。スクリーンショットのボタン名が英語のままで、操作箇所を特定するために必要なら、その表記を正確に残しましょう。画像にない翻訳済みの画面を前提に書かないことが大切です。
5. 投稿ツールで仕上げる
確認した文章を画像の代替テキスト欄に入れ、保存結果を確かめます。装飾画像の場合は、エディターの設定が意図した空の代替テキストを生成しているか確認してください。似たサムネイルが並ぶ場合は特に、アップロードを確認するまでファイル名と説明文の対応メモを残します。
この確認をブログ記事の執筆手順に組み込み、画像の説明も本文と一緒に仕上げましょう。
TypeFreeは、話した内容を編集可能なテキストに変え、文章をすばやく書くためのシンプルな方法です。まず一枚の画像を自分の言葉で説明し、ページ内での役割に合った代替テキストに整えてみてください。