translate
translate グローバル属性 は列挙型属性で、要素の翻訳可能な属性の値や Text 子ノードを、ページをローカライズする際に翻訳するべきか、あるいは変更せずにおくかを指定します。
以下の値を使用することができます。
空文字列または yes: ページをローカライズする際に翻訳すべきであることを示します。
no: 要素を翻訳してはならないことを示します。
すべてのブラウザーがこの属性を認識しているわけではありませんが、 Google 翻訳のような自動翻訳システムがこれを尊重しており、人間の翻訳者によって使用されるツールによっても尊重される可能性があります。そのため、ウェブ制作者がこの属性を使用して、翻訳されるべきではないコンテンツをマークすることが重要です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 19 | 79 | 111 | 6 | 25 | 6 | |
| DOM API | ||||||
| translate は HTMLElement インターフェイスのプロパティで、ページがローカライズされるとき、要素の属性値や Text ノードの子の値を対応させるか、そのままにするかを示します。 | 19 | 79 | 111 | 6 | 25 | 6 |
基本構文
HTML
<p>For inquiries, please contact <span translate="no">support@example.com</span>.</p>
<p>Email: <code translate="no">npm install</code></p>ライブデモ
Protect product names
Keep brand names or code-like terms out of automatic page translation.
プレビュー全画面表示
Localized UI labels
Mix translatable labels with fixed names such as account plans or brand tags.
プレビュー全画面表示
Translation hint comparison
Compare content that translation tools may translate with content marked as fixed.
プレビュー全画面表示
実務での使いどころ
-
translate の活用
translate グローバル属性 は列挙型属性で、要素の翻訳可能な属性の値や Text 子ノードを、ページをローカライズする際に翻訳するべきか、あるいは変更せずにおくかを指定します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。