フォーム入力要素の注釈のマークアップ
Web サイトのフォームの中には、入力要素 (<input> 要素、<textarea> 要素、<select> 要素) のすぐ上か下に、注釈を付け加える場合があります (たとえば、入力フォーマットを指定したい場合などです)。
この際、セマンティックに (マシンリーダブルな形で) 入力要素と注釈を紐づけるマークアップをしておくと、なおよいでしょう。たとえばスクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、フォーム入力要素にフォーカスが当たったときに、その要素に紐づいた注釈も併せて音声読み上げされる、といったことが期待できるからです。
「aria-describedby」を用いて入力要素と注釈を紐づける
入力要素と注釈を紐づけるには、WAI-ARIA (W3C の Web Accessibility Initiative ワーキンググループが策定した Web アプリケーション向けのアクセシビリティ仕様) で規定されている「aria-describedby」を用いて、以下のように記述します。
<label for="password">パスワード</label> <input type="password" id="password" name="password" aria-describedby="password_format" /> <br /> <small id="password_format">* パスワードは、半角アルファベットの大文字と小文字、および数字を組み合わせた8文字以上で設定してください。</small>
上記のように、入力要素の aria-describedby 属性と、注釈を記述した要素の id 属性が同じ値 (文字列) の場合、その入力要素と注釈が一対の組として紐づけられます。
たったこれだけですが、スクリーンリーダー使用時に入力要素にフォーカスを当てると、注釈も自動的に併せて読み上げられます。
筆者の環境で試したところ、Windows の NVDA (+ Internet Exolorer、Firefox、Google Chrome) および iOS の VoiceOver (+ Safari、Google Chrome) で読み上げてくれました。Mac OS X の VoiceOver でも、Firefox との組み合わせであれば、読み上げてくれます (OS X 標準ブラウザである Safari や、Firefox よりだいぶ前に VoiceOver に対応している Chrome では、なぜか読み上げてくれないのですが... これらのブラウザでもいずれ対応されることを期待したいところです)。
目に見えない部分ではありますが、簡単にアクセシビリティを改善できるテクニックのひとつだと思いますので、ぜひお試しいただければと思います。