1

先端が隠されたフォームがあると想像してください。

<form>
    <input type='text' id='name' placeholder='Name'>
    <span id="name_hint" style="display: none;">Please enter your name</span>
</form>

また、入力値が無効な場合、jQueryはヒントをポップアップします。

$('#name').on('blur', function(){
    if(!this.value.length) {
        $('#name_hint').show();
    }
});

そのユーザーが何も入力せずにテキスト入力を残した場合、現在表示されているヒントのコンテンツを読み取るようにWebリーダーに指示するにはどうすればよいですか？

4

3 に答える 3

0

この質問はux.stackexchange.comに属すると思いますが、初心者には次のことをお勧めします。

  • それらを目立たせる：明るい色を使用します。また、成功/警告/エラーメッセージに関しては、通常の色に固執します（ twitterブートストラップがどのようにそれを行うかを参照してください）。

  • ユーザーにそれらを見る時間を与えます：トランジション効果を使用します。たぶん、超派手なものではありません。ユーザーは常に鼻の下に現れる何かを読みたいと思うでしょうが、彼はそれに気付く必要があります。トランジションは、ユーザーがそれらを見る時間を与えます。

  • ユーザーが操作しているコンテンツに関連していることを明確にします。ポップアップがフォーカスされているフィールドに関連していることを示す矢印を表示することもできます。

警告/エラー/重要なメッセージに関心があるかのように、このスレッドを確認することをお勧めします。

于 2013-01-18T23:56:58.143 に答える
0

手始めに、フォーム要素は本当に<label>アクセス可能である必要があります：

<form>
 <input type='text' id='name'>
  <label for='name'>Please enter your name</label>
</form>

プレースホルダー属性は、ラベルの代わりにはなりません。ただし、メソッドを使用する場合は、次のようにする必要があります。

<form>
    <input type='text' id='name' placeholder='Name' aria-labelledby="name_hint">
    <span id="name_hint" style="display: none;">Please enter your name</span>
</form>

次に、JSにもonFocusイベントが必要です。

于 2013-01-22T18:49:50.367 に答える
-1

spantabindex集中することができます。ヒントに追加tabindexし、入力値が無効なときにそれに焦点を当てることで、Webリーダーにポップアップされたヒントを強制的に読み取らせることができます。

<form>
    <input type='text' id='name' placeholder='Name'>
    <span id="name_hint" style="display: none;" tabindex="2">Please enter your name</span>
</form>


$('#name').on('blur', function(){
    if(!this.value.length) {
        $('#name_hint').show().get(0).focus();
    }
});
于 2013-01-19T00:23:05.917 に答える