ウェブサイトの言語セレクトメニューを作る時、英語で一覧させることも多いが、それと同じくらいそれぞれの言語名でそれぞれの言語を表示することもある。母国語で表示されていれば絶対にわかるだろうし、見つけやすいだろうという理屈だ。そのこと自体にはいくつか欠点が考えられるわけだが、HTMLとしてはlang属性を使えばうまくマークアップできるだろう。同時にtitle属性を使って英語でフォローすると完璧……だが、そこそこ面倒くさいことになる。
それぞれの言語名でそれぞれの言語を表示した言語選択メニューは択一しづらい(またはスキャンしづらい)という問題がある。特にアルファベット＋αの言語名は混同しやすいし、ソート順が不明確になりやすく、順にたどって見つけなければならない。どこら辺にありそうかアタリをつけることができないわけだ。
ルート要素のlang属性でen-USが指定されているとする。
<span lang="ja" title="Japanese">日本語</span>タグの内容は日本語なので、lang属性でjaを指定すれば良い。そして「日本語」というラベルが認識できない人のためにフォローとしてtitle属性を使って英語のラベルも提供しているわけだが、こちらは間違いだ。
<span title="Japanese"><span lang="ja">日本語</span></span>正しくはこのようにtitle属性でのフォローが日本語ではないなら外に出す必要がある。つまりlang属性を指定した要素のtitle属性は、そのlang属性の効果範囲に入ってしまうので、そこで元の言語(ここではアメリカの英語)を使用することはできないというわけだ。
言語選択メニューにはいくつかのパターンがあるが、どれもこれも欠点がある。なるべくブラウザーの言語設定(IPアドレスは使ってはいけない)に従うことで、なるべく利用させないという形にするのが絶対条件だが、それでも提供しないわけにはいかない。
僕としては国旗を使ったものが現時点では最良と考えている。認識しやすいことや択一しやすいこと、サイズが統一できること、縦横に並べられること、今ならEmojiでOKなどなど良いところが多い。似た図案の国旗があることと、かなり複雑な図案もあるためある程度の大きさが要求されることには注意が必要だが、概ね期待通りに機能するだろう。
しかし国旗はカラフルで主張が強いので、うまく周囲となじまないこともある。もちろんモノクロにするわけにもいかない。その場合はその時点での言語設定に従ったラベルによるメニューが良いのだが、たかだか10言語の選択メニューですら100の項目(18言語なら324項目)が必要になり、メンテナンスの必要がほぼないとはいえ面倒くさい。CSSでカッコよくデザインしたドロップダウン・メニューへちゃんと収まるかとかそういうことも全項目で確認する必要があり、ちょっとした地獄の様相を呈してくる。
というわけで、それぞれの言語名でそれぞれの言語を表示したメニューが効率的となり、これに落ち着くことが多くなる。するとこのような煩雑なマークアップが必要になるわけだ。