多言語対応とローカライズ

ご覧になっているのは、ワールド ワイド ウェブです。 フォームは、異なる言語を話すユーザーが使用する可能性があります。 多様な国の人々、異なる文化的背景を持つ人々の集まりです。 多言語対応とローカライズに向けてフォームを準備する方法をご覧ください。

フォームがさまざまな言語で機能することを確認する

さまざまな言語でフォームが機能することを確認する方法を見てみましょう。

サイトをローカライズできるようにするための最初のステップは、<html> 要素に言語属性 lang を定義することです。 この属性を使用すると、スクリーン リーダーで正しい発音を呼び出せるようになります。 既定の言語がブラウザのデフォルトの言語でない場合に、ブラウザがページを翻訳できるようにします。

<html lang="en-us">

詳しくは、lang 属性についての記事をご覧ください。

たとえば、フォームをドイツ語に翻訳したとします。 検索エンジンやブラウザが翻訳版を認識していることを確認するにはどうすればよいですか？ サイトの <head> に <link> 要素を追加して代替バージョンを記述できます。

<link rel="alternate" title="The form element"
  href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
  href="https://example.com/de/form" hreflang="de">

他の言語を話すユーザーがフォームを使用できるようにする

フォームの言語によっては翻訳できないため 翻訳ツールを使用することで 確実に翻訳できます

フォーム上のすべてのテキストを翻訳ツールで翻訳するには すべてのテキストが HTML で定義され、表示されることを確認します。 JavaScript で定義されたコンテンツを扱うツールもありますが、互換性を高めるため、 HTML には、できる限り多くのテキストを含めるようにします。

フォームがさまざまな書記体系に対応していることを確認する

言語が異なれば、使用する書記体系や文字セットも異なります。 スクリプトには、左から右に記述するスクリプトと、右から左に記述するスクリプトがあります。

スペースを書記体系に依存しない

さまざまな書記体系でフォームが機能するように、 CSS の論理プロパティを使用できます。

入力の上下左右の枠線の太さは 1px です。 枠線の太さは 4px です。 次に、CodePen を編集して、書記体系を右から左に変更します。 <main> 要素に dir="rtl" を追加する

太い枠線が右側に表示されます。 これは、論理プロパティを使用して境界線を定義したためです。

input {
  border-inline-start-width: 4px;
}

論理プロパティの詳細を確認する。

フォームでさまざまな名前形式を処理できるようにする

ユーザーが氏名を入力するフォームがあるとします。 そのフィールドをフォームにどのように追加すればよいですか。

名用と名字用のフィールドを 1 つずつ追加することもできます。ただし、名前は Google Cloud の たとえば、名字のない人もいます。その場合、 姓の項目はどれでしょうか？

名前をすばやく簡単に入力できるようにし 形式です。可能な場合は常に、名前に単一のフォーム フィールドを使用してください。

詳しくは、個人名についての記事をご覧ください。

ラテン文字以外の文字を使用する名前の場合、 一部の形式では名前が invalid として報告されるという問題が発生することがあります。ユーザーが フォームを作成する際には、使用できる文字をすべて許可してください。また、名前が 使用できます。

さまざまな住所形式を許可する

Google の本社は 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States に所在します。

この住所には、国、都道府県、郵便番号、市区町村、番地、番地が含まれます。 お住まいの国によっては、住所の形式がまったく異なる場合があります。 フォームで誰もが自分の住所を確実に入力できるようにするには、どうすればよいでしょうか。

一つの方法は、汎用入力を使用することです。

その他の作業方法の詳細 国際住所フィールド。

理解度をチェックする

国際化とローカライズに関する知識をテストする

スクリーン リーダーの正しい発音をどのように呼びますか。

lang 属性を使用する場合。
🎉
hreflang 属性を使用する場合。
もう一度考えてみましょう。
使用する言語の説明を追加する。
もう一度考えてみましょう。
language 属性を使用する場合。
もう一度考えてみましょう。

ウェブサイトの書記体系をどのように変えればよいでしょうか。

direction 属性を使用する場合。
もう一度考えてみましょう。
dir 属性を使用する場合。
🎉
CSS 論理プロパティを使用する。
もう一度考えてみましょう。
<link> 要素を使用する。
もう一度考えてみましょう。

リソース