マルチパートのラベル

問題点

ユーザに質問をするフォームがありますが、その回答が質問文で触れられています。ブラウザの設定項目から皆が知っている伝統的な例を挙げると、“履歴を x 日後に削除する” 設定です。“履歴を” はテキストボックスの左側にあり、また x は例えば 21 といった数値であり、そして “日後に削除する” という文言はテキストボックスの後ろにあって、理解しやすい文を構成します。

スクリーンリーダーを使用している場合、Firefox でこの設定項目に達すると “履歴を 21 日後に削除する” と伝えられ、その後にあなたはテキストボックス内にいて、数値 21 が入っているとと知らされることに気づきます。すばらしいでしょう? 単位を見つけるために行き来する必要はありません。“日” は容易に “月” や “年” に変えることができ、また多くの通常のダイアログではこれを見つけるための方法が、スクリーンの再調査コマンドで行き来する以外にありません。

解決策は、ARIA の aria-labelledby という属性にあります。このパラメータは、ひとつのアクセシブルな名称になるように連結したい HTML 要素の ID で構成される文字列です。

aria-labelledby および aria-describedby はどちらもラベル付けされる要素、例えば <input> で指定します。どちらの場合もラベルとコントロールの紐付けがあってもかまいませんが、aria-labelledby によって上書きされます。aria-labelledby を提供する HTML ページでは、ARIA を未サポートとの古いブラウザもサポートするように構成したラベルも提供してください。Firefox 3 では新しい属性により、目の不自由なユーザが自動的によりよいアクセシビリティを得られますが、古いブラウザのユーザはこの方法でアクセシビリティがない状態を抜けられません。

例:

<input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" />
<span id="labelShutdown">Shut down computer after</span>
<input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" />
<span id="shutdownUnit"> minutes</span>

JAWS 8 ユーザへの注意

JAWS 8.0 はラベルを発見する独自のロジックを持っており、常に HTML ドキュメントで見つけたテキストボックスの accessibleName より優先します。JAWS 8 で、上記の例からラベルを受け入れるようにする方法は見つかっていません。しかし NVDA や Window-Eyes の動作は良好であり、また Linux での Orca も問題がありません。

ARIA を使用せずに実現できますか?

コミュニティーのメンバーである Ben Millard はブログへの投稿で、単に input を label 内に埋め込むことにより HTML 4 を使用して前出の例のようにコントロールをラベル内埋め込むことが可能であることを指摘しました。この情報をありがとう、Ben! これはとても役に立ち、また長年使用されてきたテクニックには時に権威から逃れるものもあることを示します。このテクニックは Firefox で動作しますが、現時点で IE を含む他の多くのブラウザは動作しません。従ってフォームコントロールを埋め込んだラベルについては、aria-labelledby を使用することがやはり最善の方法です。