このワイヤーの特徴
どのページからも、言語を切り替えられる
ヘッダーの右に言語名を並べ、どのページからでも同じ場所で言語を切り替えられるようにしています。
言語名を、その言語で書く
「日本語」「English」のように、言語名をそれぞれの言語で書いています。
日本語が読めない人に「英語」と書いても、英語のページへの入口だと気づけません。
表示中の言語を、色の反転と aria-current で示す
表示中の言語は色を反転させ、aria-current で示しています。
リンクには lang と hreflang を付けています。
lang はリンクの文字(「English」など)の言語を、hreflang はリンク先のページの言語を示します。
lang があることで、読み上げでもそれぞれの言語で読まれます。
同じ内容の、別の言語のページへ移る
言語を切り替えると、トップページではなく、今見ているページと同じ内容の別の言語のページへ移ります。
読み手がもう一度ページを探し直す必要がありません。
制作時のよくある失敗
言語の名前の代わりに、国旗を使う
国旗は国を表すもので、言語を表しません。
英語は多くの国で使われ、1つの国でも複数の言語が使われます。
言語の名前を文字で書きます。
切り替えると、トップページに戻ってしまう
読んでいたページから別の言語のトップページへ移ると、読み手は同じ内容を探し直すことになります。
同じ内容のページへ移るようにし、ない場合は案内を出します(翻訳がないページの案内型 言語切り替えを参照)。
アクセスした場所だけで、言語を自動で切り替える
IPアドレスなどで言語を自動で切り替えると、海外にいる日本語の読み手や、日本にいる英語の読み手が困ります。
自動で切り替えず、読み手が選べるようにします。
言語名を、今の言語に訳して書く
日本語のページで「英語」、英語のページで「Japanese」と書くと、その言語を読む人に伝わりにくくなります。
言語名は、その言語での呼び名で書きます。
よくある質問
「日本語」「English」と、「JP」「EN」のどちらがよいですか?
略称は短く収まりますが、読み手によっては何の略か分からないことがあります。
スペースが許すなら、言語名をそれぞれの言語で書くほうが伝わりやすいと考えられます。
言語ごとのページは、検索エンジンにどう伝えればよいですか?
各ページの head に、ほかの言語の同じ内容のページを hreflang で示す方法があります。
ページの html 要素には、そのページの言語を lang 属性で指定します。
選んだ言語は、覚えておいたほうがよいですか?
読み手が選んだ言語を覚えておくと、次に訪れたときに同じ言語で案内できます。
ただし、覚えた言語で自動的に転送する場合も、ほかの言語へいつでも切り替えられるようにします。