OmniDoc画像の alt はキーワードを詰め込む場所ではありません: 翻訳時に目的を保つ方法
画像の alt はキーワードを詰め込む場所ではありません。 Web ページを翻訳するときは、情報グラフィック、装飾グラフィック、および機能グラフィックの alt を個別に処理する必要があります。この記事では、Beautiful Soup を使用して alt 属性を検証し、メモリ合成の例、受け入れチェックリスト、および手動レビューが必要な状況を示します。
Web ページ上の画像代替テキスト (alt)は、多くの場合、キーワードを補足する場所として使用されたり、一律に「欠落」としてマークされて補完されたりします。これらの実践はいずれも、アクセシビリティ エクスペリエンスを悪化させる可能性があります。この記事は、Web ページの翻訳とローカリゼーションを担当するチームを対象としています。情報グラフィック、装飾グラフィック、機能グラフィックを区別する方法、事前検証に Beautiful Soup を使用する方法、および手動レビューに引き渡す必要がある状況について説明します。
この記事を読むと、実行可能な分類ルールのセットを構築し、どの代替ファイルを空のままにしておくべきか、どの代替案を完全に翻訳する必要があるか、どの代替案を人間による確認が必要かを知ることができます。
Web 画像の alt を翻訳するにはどうすればよいですか?一文の結論
まず目的別に画像を分類し、それから画像を翻訳する方法を決定します。インフォグラフィックはデータを完全に伝え、装飾グラフィックは空の代替のままにし、機能グラフィックは外観ではなく動作を説明します。
| あなたの状況 | 推奨される実践方法 | 理由 |
|---|---|---|
| 画像には、テキストでは繰り返されないデータやプロセスが含まれます (インフォグラフィックス) | alt の完全な翻訳（必要に応じて文化的背景メモを追加） | 読者はこの視覚的な情報を alt から取得する必要があります |
| 仕切り、背景テクスチャ、テキストのないイラストなどの純粋な装飾 | alt="" を保持し、翻訳中に直接スキップします | 空の alt は正当であり、スクリーン リーダーに画像をスキップするように指示します。 |
| 虫眼鏡、封筒などのアイコン コントロール | alt は、「検索」や「電子メールの送信」などのアクションまたは目標の状態を説明します。 | 外見の描写では手術の目的が不明確になる |
| 代替案が見つからないか、目的が不明瞭です | 警告を記録し、手動で確認し、推測内容を自動的に入力しない | 機能の説明が間違っていることは、機能が欠落していることよりも危険です |
| alt にはブランド名または固有名詞が含まれています | 用語集をチェックして、翻訳の一貫性を確保してください | ページ上で同じ用語の複数の翻訳を避ける |
空の alt が欠落しているとみなせないのはなぜですか?
翻訳チームが一律に <img alt=""> を「代替テキストが欠落している」としてマークし、補完を要求すると、Web ページのアクセシビリティ エクスペリエンスが破壊される可能性があります。空の alt 属性は HTML 仕様で正当であり、スクリーン リーダーに画像をスキップするように明示的に指示します。
本当の問題は、alt が空であることではなく、その画像がコア データを含むチャートなのか、純粋な雰囲気の装飾なのか、クリックするとアクションをトリガーするボタン アイコンなのかを翻訳者が区別できないことです。すべての画像代替文を長い説明文に翻訳することは冗長であり、視覚障害のあるユーザーがナビゲーション中に多くの無効な情報を聞くことを余儀なくされます。この問題を解決する鍵は、翻訳者の主観的な判断に頼るのではなく、実行可能な分類および検証メカニズムを確立することです。
3 種類の画像の意味境界と翻訳戦略
画像代替テキストを扱う場合、まず分類してから翻訳を検討する必要があります。
インフォグラフィック
インフォグラフィックスには、本文では繰り返されない重要なデータやプロセスが含まれています。その代替文は、この視覚的な情報を完全に伝える必要があり、翻訳時には独立した段落としてローカライズされ、必要に応じて文化的な背景のメモが補足される必要があります。
装飾画像
装飾画像は、仕切り、背景テクスチャ、テキストのないイラストなど、レイアウトの美化や感情的なレンダリングにのみ使用されます。このような画像の alt は空の文字列 "" として保持する必要があり、説明を追加せずに翻訳タスクはスキップされます。
機能図
関数図は、検索用の虫眼鏡アイコンや連絡先用の封筒アイコンなどの対話型コントロールとして存在します。その alt は、外観 (例: 「青い虫眼鏡」「白い封筒」)ではなく、アクションまたは目標の状態 (例: 「検索」「電子メールの送信」)を説明する必要があります。
これら 3 種類の画像を混同すると、翻訳に情報が多すぎるか、キー操作が見つからなくなる可能性があります。エンジニアリングの実践では、この分類は手動の記憶だけに頼ることはできず、識別用のスクリプトを支援できるルールに変換する必要があります。
合成例: 正しい出力と境界入力
以下の構成例には、データチャート、装飾パターン、送信ボタンアイコンの 3 つの画像が含まれています。期待される結果は、データ チャートには詳細な中国語の説明が保持され、装飾パターンの alt="" は変更されず、送信ボタン アイコンの alt が「送信フォーム」として変換されることです。
2 つの一般的なエッジケースには特別な注意が必要です。
- 装飾的な絵が誤って説明テキストとしてマークされる: たとえば、装飾的なパターンは
alt="decorative flower"と書かれます。これを「装飾的な花」として翻訳する代わりに、スクリプトはそのセマンティックな役割を認識し、それを null 値に修正する必要があります。 - 関数図に alt がありません: この時点で警告がログに記録されますが、間違った関数の説明は欠落しているものよりも危険であるため、推測的な説明は自動的に入力されるべきではありません。
これらの判断は状況に応じた人間のレビューに依存しており、コードは疑わしいアイテムにフラグを立てるのにのみ役立ちます。この例は完全にメモリ内に構築されており、外部ファイルの読み取りやネットワーク リクエストを必要としないため、教育環境で安全に再現することが簡単です。
Beautiful Soup を使用して alt 属性を検証する
次の Python の例では、Beautiful Soup 4.12.x (beautifulsoup4 を自分でインストールする必要があります)を使用してメモリ内にサンプルを構築し、img タグの alt 属性を抽出して最初に分類する方法を示します。
from bs4 import BeautifulSoup
# 合成示例HTML，包含三类图片及一个边界案例
# 注意：此为教学演示数据，无需准备外部文件
html_snippet = """
<div>
<img src="chart.png" alt="Q3 revenue increased by 15% compared to Q2">
<img src="divider.svg" alt="">
<img src="submit-icon.png" alt="Submit">
<img src="flower-bg.jpg" alt="decorative flower">
</div>
"""
# 使用html.parser解析器，避免XML模式对多值属性的特殊处理
soup = BeautifulSoup(html_snippet, 'html.parser')
imgs = soup.find_all('img')
results = []
for img in imgs:
# 使用.get()安全获取属性，避免KeyError
alt = img.get('alt')
src = img.get('src', '')
# 简单启发式分类（非标准，仅作演示）
# 实际项目中应结合ARIA角色、CSS类名等更多上下文
if alt is None:
category = 'missing'
elif alt == '':
category = 'decorative'
elif any(kw in src.lower() for kw in ['icon', 'btn', 'button']):
category = 'functional'
else:
category = 'informative'
results.append({'src': src, 'alt': alt, 'category': category})
# 断言校验脚本自身逻辑是否正确执行
assert len(results) == 4
assert results[0]['category'] == 'informative'
assert results[1]['category'] == 'decorative'
assert results[2]['category'] == 'functional'
# 边界案例：误标的装饰图被归为informative待审，而非自动修正
assert results[3]['category'] == 'informative'次の 3 つの点を説明する必要があります。
- スクリプトは単なる周辺検証ツールであり、完全な翻訳意思決定エンジンではありません。実際のアプリケーションでは、依然として手動によるレビューが必要です。
- この例では外部ファイルは読み取られません。すべての HTML コンテンツはコードで定義されます。アサーションは、翻訳品質を検証するのではなく、スクリプト自体の解析ロジックが事前に設定されたルールに準拠しているかどうかをチェックします。
- 公式ドキュメントによると、Beautiful Soup は HTML ドキュメントを Tag や NavigableString などのオブジェクト ツリーに変換します。
.get('alt')を介してプロパティにアクセスするコードにより、KeyError 例外を回避できます。
承認リストと手動レビューのトリガー条件
| 現象を観察する | 処理決定 | 手動レビューが必要かどうか |
|---|---|---|
| alt は空で、src には装飾、bg、パターンなどのキーワードが含まれています。 | 翻訳をスキップするには、空の alt のままにしておきます | いいえ |
| alt が空で、src に装飾の手掛かりがなく、周囲のテキストが画像の内容について言及していない | 「行方不明の疑い」としてマークされていますが、まだ翻訳されていません | はい |
| alt が空ではなく、src にアイコン、ボタン、ボタンが含まれています | alt が外観ではなくアクションを説明しているかどうかを確認する | はい |
| alt は空ではない説明テキストですが、本文にはすでに同じ情報が含まれています | 冗長性を評価します。空の alt に変更される可能性があります | はい |
| alt にはブランド名または固有名詞が含まれています | 用語集の一貫性をチェックする | はい |
この表では、一般的なパターンのみを取り上げています。 SVG インライン テキスト、Canvas 描画、または動的に生成された画像を使用した場合は、フロントエンドの実装に詳しい人がレビューする必要があります。このスクリプトは分類ラベルのみを出力します。エンドツーエンドの効果は、ページ レンダリングとアクセシビリティ テスト ツールを組み合わせて検証する必要があります。
スクリプト内のヒューリスティック ルールはファイル名のキーワードに基づいており、CSS 背景画像、データ URI、ARIA ロールなどの複雑なシナリオは考慮されていないため、自動翻訳の唯一の基礎として使用することはできません。
📊 コア比較: 3 種類の画像の処理の違い
| タイプ | 代表的な例 | altには何を書けばいいのでしょうか？ | 翻訳処理 | 不適切な取り扱いによる結果 |
|---|---|---|---|---|
| インフォグラフィック | データまたはプロセスを伝える図 | 完全なビジュアルメッセージ | 必要に応じて背景メモを補足しながら、独立した段落としてローカライズします。 | 情報が不足しているため、読者はグラフのコンテンツにアクセスできません |
| 飾りフィギュア | 仕切り、背景テクスチャ、テキストなしのイラスト | 空の文字列 "" | スキップして説明を追加しないでください | 無効な情報により読書の負担が増大する |
| 機能図 | 虫眼鏡、封筒、その他のインタラクティブなアイコン | 行動または目標の状態 | 「検索する」や「メールを送信する」などのアクション単語に翻訳されます。 | 外観を説明すると重要な操作ができなくなる |
🎯 どの方法があなたに適していますか?
大量の画像を含む Web ページの翻訳を担当している場合
まず画像を 3 つのカテゴリにマークし、次に、保持するか、翻訳するか、代替を追加するかを決定します。
自動検証プロセスを維持している場合
ヒューリスティック ルールをフラグ ツールとして使用し、疑わしい項目はそれに基づいて翻訳を直接変更するのではなく、人間によるレビューに提出します。
ページに SVG、キャンバス、または動画が含まれている場合
手動レビューに直接移行し、スクリプト化された結果に依存しないでください。
❓ よくある質問 (FAQ)
1. alt が空であるということは、画像に代替テキストがないということですか?
いいえ。 HTML 仕様によれば、空の alt は正当であり、スクリーン リーダーに画像をスキップするように指示します。装飾画像は空の代替のままにする必要があります。
2. 関数図の alt で見た目を書けますか？
お勧めしません。関数図の alt は、「青い虫眼鏡」「白い封筒」ではなく、「検索」「電子メールの送信」などのアクションまたは目標の状態を記述する必要があります。
3. 画像に alt がない場合、スクリプトは自動的にそれを補完できますか?
自動補完は行わないでください。誤った機能の説明は、機能が欠落していることよりも危険であるため、警告は記録され、人間によるレビューのために提出される必要があります。
4. スクリプトは SVG と Canvas をカバーできますか?
できません。これらのシナリオはスクリプトの範囲外であるため、フロントエンドの実装に詳しい人がレビューする必要があります。
5. スクリプトを実行するだけで翻訳品質を確認できますか?
できません。スクリプトは分類ラベルのみを出力します。例のアサーションは解析ロジックをチェックするものであり、翻訳の品質を表すものではありません。
📝 概要
画像代替の本質はセマンティックキャリアであり、SEO キーワードコンテナではありません。翻訳の目的は、画像の本来の目的を復元することであり、別の説明を作成することではありません。
次のステップと参考資料
現在のプロジェクトで画像を含む 5 ～ 10 の HTML ページを選択し、上記のカテゴリに従って手動で一度マークし、検証スクリプトを実行して結果を比較します。特定のカテゴリの画像に逸脱が集中している場合は、スクリプトのしきい値を調整するよりも、そのカテゴリの翻訳ガイドラインを見直すことを優先してください。
参考： Beautiful Soup 公式ドキュメント - 属性: https://www.crummy.com/software/BeautifulSoup/bs4/doc/#attributes
ドキュメントの翻訳にはこのチェックリストを使用してください
Web ドキュメントのテキスト、リンク、コード、構造は個別に処理する必要があります。保護された部分を受け入れリストに追加し、翻訳後の読みやすさとページの表示効果を評価します。
OmniDoc (製品ポータル)はマルチフォーマット文書翻訳ポータルを提供しており、公式 Web サイトでは OCR、用語集、対訳比較機能が導入されています。ファイルから直接作業したいチームにとって、これは実際のサンプルを使用して評価する価値のあるパスです。アップロード許可のある感度を下げたファイルを使用し、この記事のチェック項目を使用して結果を確認してください。この記事は、OmniDoc が記事内で説明されているオープン ソース ライブラリまたは内部アルゴリズムを使用しているとは主張しません。また、例は製品パフォーマンス テストの代替となるものではありません。
