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

この記事をお読みの場合は、ワールド ワイド ウェブを使用しています。フォームは、さまざまな言語を話す人、国や文化が異なる人々に利用される可能性があります。多言語対応とローカライズに向けてフォームを準備する方法について説明します。

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

フォームをさまざまな言語で適切に表示する方法を見てみましょう。

サイトをローカライズ可能にするための最初のステップは、<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 の論理プロパティを使用します。

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

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

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

論理プロパティの詳細をご確認ください。

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

ユーザーが名前を入力する必要があるフォームがあるとします。 フォームにフィールドを追加するには、どうすればよいですか？

この場合、姓のフィールドと名のフィールドをそれぞれ 1 つずつ追加できます。ただし、名前は世界中で異なります。たとえば、姓のない人の場合、姓のフィールドにどのように入力する必要がありますか？

名前をすばやく簡単に入力できるように、また形式を問わず誰でも名前を入力できるようにするために、可能な場合は 1 つのフォーム項目で名前を入力します。

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

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

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

Google の本社は、1600 Amphitheatre Parkway, Mountain View, CA 94043, United States です。

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

その一つは汎用的な入力を使用する方法です。

国際住所フィールドを使用するその他の方法については、こちらをご覧ください。

理解度チェック

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

スクリーン リーダー用に正しい発音を呼び出すにはどうすればよいでしょうか。

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

ウェブサイトの書記体系を変更するには、

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

関連情報