マルチパートのラベル

内部にフィールドが埋め込まれているラベル向けの ARIA

問題点

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

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

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

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

例:

Shut down computer after minutes
<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 も問題がありません。

TBD: さらに互換性情報を追加する

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

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

 

Document Tags and Contributors

Contributors to this page: yyss
最終更新者: yyss,