ボタンに対する追記がある場合のマークアップ

ウェブサイトでボタンを設置する際、そのボタンのラベルとは別に、ボタンのすぐ下などに、追記を配置することがあると思います。たとえば、フォームの送信ボタンにおいて、送信実行前に今一度ユーザーに確認してもらいたいことを念押ししたり、行動喚起 (Call To Action : CTA) ボタンにおいて、ユーザーの背中をもう一押ししたり、といったケースが考えられます。

フォームの送信ボタンにおいて、送信実行前に今一度ユーザーに確認してもらいたいことを念押しする。(例 : [送信する] ボタンの下に「メールアドレスの綴りや、お問い合わせ本文の内容を今一度ご確認のうえ、送信してください。」という追記がある。)
[送信する] ボタンの下に「メールアドレスの綴りや、お問い合わせ本文の内容を今一度ご確認のうえ、送信してください。」という追記がある例。
行動喚起 (Call To Action : CTA) ボタンにおいて、ユーザーの背中をもう一押しする。(例 : [早割を申し込む] ボタンの下に「おトクな早割の受け付けは、今月末までです！」という追記がある。)
[早割を申し込む] ボタンの下に「おトクな早割の受け付けは、今月末までです！」という追記がある例。

このようなケースでは、「フォーム入力要素の注釈のマークアップ」でご紹介したテクニックと同様に、セマンティックに (マシンリーダブルな形で) ボタンと追記を紐づけるマークアップをしておくと、なおよいかなと思いました。たとえばスクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、ボタンにフォーカスが当たったときに、追記も併せて音声読み上げされる、といったことが期待できるからです。

ボタンと追記を紐づけるには、WAI-ARIA で規定されている「aria-describedby」を用いて、以下のように記述します。<button> 要素 (または <input type= "submit">) の aria-describedby 属性と、追記要素の id 属性が同じ値 (文字列) の場合、そのボタンと追記が一対の組として紐づけられます。

<button aria-describedby="note">早割を申し込む</button>
<small id="note">おトクな早割の受け付けは、今月末までです！</small>

私の手元の環境で挙動を試したところ、以下のとおりでした。

Windows NVDA ＋ Firefox
OK。<button>、<input type= "submit"> ともに、フォーカスが当たると、追記の内容も同時に読み上げられる。
Windows NVDA ＋ IE11
OK。<button>、<input type= "submit"> ともに、フォーカスが当たると、追記の内容も同時に読み上げられる。
Windows NVDA ＋ Chrome
OK。<button>、<input type= "submit"> ともに、フォーカスが当たると、追記の内容も同時に読み上げられる。
OS X VoiceOver ＋ Safari
<button>、<input type= "submit"> ともに、フォーカス後しばらく時間が経ってからボタンの説明が読み上げられ、その後に「ヘルプタグ」という言葉に続いて追記の内容が読み上げられる。(恐らくユーザーはそこまで待てない。)
OS X VoiceOver ＋ Chrome
<button>、<input type= "submit"> ともに、フォーカス後しばらく時間が経ってからボタンの説明が読み上げられ、その後に「ヘルプタグ」という言葉に続いて追記の内容が読み上げられる。(恐らくユーザーはそこまで待てない。)
OS X VoiceOver ＋ Firefox
問題あり。<button>、<input type= "submit"> ともに、ボタンのラベルが読み飛ばされて、追記の内容のみが読み上げられる。
iOS VoiceOver ＋ Safari
OK。<button>、<input type= "submit"> ともに、フォーカスが当たると、追記の内容も同時に読み上げられる。
iOS VoiceOver ＋ Chrome
OK。<button>、<input type= "submit"> ともに、フォーカスが当たると、追記の内容も同時に読み上げられる。
Android Talkback ＋ Chrome
問題あり。<button>、<input type= "submit"> ともに、ボタンのラベルが読み飛ばされて、追記の内容のみが読み上げられる。
Android Talkback ＋ Firefox
<button> であれば OK。フォーカスが当たると、追記の内容も同時に読み上げられる。<input type= "submit"> の場合、フォーカスが当たっても、追記の内容は読みあげられない。

現時点では、上記のように挙動にバラツキが大きく、残念ながら実装はまだ時期尚早と言えるかもしれません。せめて、OS X VoiceOver ＋ Firefox や Android Talkback ＋ Chrome で見られる現象 (追記よりも重要な、ボタンのラベルが読み飛ばされてしまう) がなければ、よいのですが…。今後のユーザーエージェント側のアップデートに期待したいと思います。