HTML Living Standard/translate属性

translate属性

translate属性は、HTML要素が翻訳対象となるかどうかを指定するためのグローバル属性です。この属性は、翻訳ツールやサービスが対象要素を翻訳するかどうかを判断する際に使用されます。

基本構文

<element translate="yes|no"></element>

yes: 要素の内容を翻訳可能と指定します（デフォルト値）。
no: 要素の内容を翻訳しないよう指定します。

使用例

以下は、translate属性を使用した例です。

<!-- 翻訳対象とする要素 -->
<p translate="yes">This is a translatable paragraph.</p>

<!-- 翻訳対象外の要素 -->
<p translate="no">商品コード: ABC123</p>

<!-- 属性なし（デフォルトで翻訳可能） -->
<p>This is another translatable paragraph.</p>

動作の概要

翻訳ツールへの影響:
- translate="no"が指定された要素は、Google翻訳やMicrosoft Translatorなどのツールにおいて翻訳対象から除外される可能性があります。
属性のデフォルト動作:
- translate属性が明示されていない場合、ブラウザや翻訳ツールはtranslate="yes"と同じ動作を行います。

translate属性の利用シーン

固定データの保護:
- 商品コードやユーザーIDなど、翻訳してはいけないデータを明示的に保護します。
ブランド名や専門用語の保護:
- 翻訳すると意味が失われる可能性のある固有名詞や専門用語を対象外とします。
多言語ウェブサイトの管理:
- ユーザーが提供する入力データやシステム生成テキストが翻訳されないよう制御します。

translate属性のアクセシビリティ

translate属性は主に翻訳ツールや多言語対応システム向けに使用されます。以下の点を考慮してください。

翻訳ツールの互換性:
- 一部の翻訳ツールでは、translate属性を完全にはサポートしていない場合があります。
ユーザーエクスペリエンス:
- 翻訳対象外の要素が意図通りに動作するかどうかをテストし、ユーザー体験を向上させる必要があります。

JavaScriptを使用した動的変更

JavaScriptを使用して、translate属性を動的に設定することが可能です。

<p id="example">This text will not be translated.</p>

<script>
  document.getElementById("example").setAttribute("translate", "no");
</script>

この例では、指定された段落が翻訳対象外としてマークされます。

注意点

translate属性は翻訳ツール向けのヒントであり、翻訳が完全に制御されるわけではありません。
固有名詞やコードなどの翻訳不可データは、CSSやARIA属性を使った明示的なスタイリングでさらに補強することが推奨されます。

互換性

互換性
ブラウザ	サポート状況
Chrome	対応
Edge	対応
Firefox	対応
Safari	対応
Opera	対応

参考文献