このワイヤーの特徴
多くの言語を、ヘッダーを広く使わずに並べられる
ボタン1つに言語の一覧をまとめ、対応する言語が多くてもヘッダーの幅を取らないようにしています。
アイコンと言語名で、何のボタンかを伝える
地球のアイコンに、表示中の言語名を添えています。
アイコンだけでは言語の切り替えだと気づかれないことがあり、言語名があれば別の言語の読み手も見つけやすくなります。
開閉の状態と、表示中の言語を伝える
ボタンに aria-expanded を付けて開閉の状態を伝え、ボタンの名前にも「現在：日本語」と表示中の言語を入れています。
一覧では表示中の言語に印を付けています。
Escキーや外を押して、閉じられる
一覧はEscキーや一覧の外を押したときにも閉じ、閉じたらボタンに戻ります。
言語を選んだあとも、ボタンに戻ります。
制作時のよくある失敗
アイコンだけで、言語名を出さない
地球のアイコンだけでは、言語の切り替えだと気づかない読み手がいます。
表示中の言語名を添えます。
SPで幅が足りない場合も、ボタンの名前で伝えます。
一覧に、国旗を並べる
国旗は言語を表しません。
一覧でも、言語名をそれぞれの言語で書きます。
メニューの役割（role=”menu”）で組み、操作が複雑になる
アプリのメニューの役割で組むと、矢印キーでの移動など決まった操作が必要になります。
言語の一覧はリンクの並びなので、開閉ボタンとリンクの一覧で組むほうが扱いやすいと考えられます。
一覧の言語が、決まった順番に並んでいない
言語の並び順がページによって変わると、読み手が迷います。
利用の多い順など、順番を決めてそろえます。
よくある質問
言語の一覧は、何の順番で並べればよいですか?
サイトの主な言語を最初に置き、残りは利用の多い順や、言語名の順に並べる方法があります。
読み手の分布やサイトの運用方針に合わせて決め、どのページでも同じ順番にそろえることが大切です。
セレクトボックスで言語を切り替えてもよいですか?
使えますが、選んだ瞬間にページが移る作りだと、キーボードで選んでいる途中で移ってしまうことがあります。
セレクトボックスを使う場合は、決定のボタンを添えるか、選び終えてから移るようにします。
SPでは、どこに置けばよいですか?
ヘッダーにアイコンのボタンとして残すか、メニューの中の目立つ位置に置く方法があります。
メニューの中に置く場合も、言語名を文字で書き、見つけやすくします。
