web-dev-qa-db-ja.com

HTML5プレースホルダー属性のコンテンツは使いやすさに影響しますか？

HTML5でプレースホルダー属性を使用する場合、プレースホルダーのコンテンツがフォームのユーザビリティにどのように影響するかについての調査はありましたか？

プレースホルダー属性をreplaceラベル属性に使用するのと比較して、プレースホルダー属性をreplaceラベル属性に使用するのと比べて具体的に考えていますが、フォームコンテンツの例を提供しています。 。

<input placeholder="University">

<input placeholder="Harvard, Brown, Yale etc">

ラベルの使用とandの例のフォームコンテンツの横に説明的なラベルを提供するプレースホルダーのどちらかと比較して、どちらかと比較して調査があるかどうかについても知りたいですちょうどラベルを使用またはjustプレースホルダー属性を使用...

<label>University</label>
<input placeholder="Harvard, Brown, Yale etc">

<label>University</label>
<input>

<input placeholder="University">

[〜＃〜] edit [〜＃〜]：ラベルとプレースホルダー属性を使用している現在使用しているユースケースを定義するのを忘れていましたが、ラベルは非表示になっているため、スクリーンリーダー。画面には表示されません。

usabilityformshtml5placeholder
11
Dan Christian

ラベルを置き換えるためにプレースホルダーを使用することは問題ではないという点でコンセンサスがあります。

http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/

http://www.shiftedbits.net/rambling/why-html-placeholders-dont-replace-html-labels/

http://dev.w3.org/html5/spec/common-input-element-attributes.html#attr-input-placeholder

主な理由は非常に単純です。ラベルを入力し始めるとすぐにラベルが消え、すべてのフィードバックが消えます。検索フィールドで使用する場合、これは通常問題にはなりません。しかし、大きなフォームの場合、これは一部のユーザーにとって問題になります。また、サーバーがいくつかのフィールドに事前に入力した場合。

編集：ラベルを置き換えることは一般に悪い考えと見なされますが、この解決策は良い妥協のようです： http://css-plus.com/examples/2011/09/userfriendly-input-placeholder/

10
TomDoes

ユーザーテストにおける私の経験では、ラベルをプレースホルダーに置き換えると、多くの場合、2つの理由で害を及ぼす可能性があります。

1）ユーザーがフォームを通過するとき、フォームフィールドに入力し、何を入れたかについて考え始めます。しかし、フィールドにフォーカスすると、プレースホルダーがなくなります。そのため、フィールドに出入りする必要があることを理解するには、フィールドに出入りする必要があります。

2）フォームの間違いを確認するとき（送信前またはエラー後）、ラベルがないため、フィールドがどうあるべきかがわかりません-プレースホルダーは実際のフォーム入力でカバーされているためです。

一般的な場所にある単一目的のフォームの場合-おそらく（検索ボックス、ログインボックスなど）。しかし、ラベルを置き換える一般的なものとして-私の経験では悪い考えです。

キャロラインジャレットの素敵なuxmattersの作品があります（フォームで彼女の本を購入してください-とても良いです） Webフォームのテキストボックス内にヒントを置かないでください 同じことのほとんどをカバーしています。

2
adrianh

TomDoesはそれをうまく説明しました、labelタグをplaceholder属性。ただし、ラベルタグが別の目的にも役立つという細かい点は見落としました。

Labelタグを使用すると、ラベルをクリックすることができ、関連するinput要素をクリックするように扱われます（これは、ラジオボタンやチェックボックスに特に役立ちます）。このようなクリック操作は、次の方法で実現できます。

入力をラベルに配置する

<label>My label:
    <input name="myFieldName" id="myField" type="text"/>
</label>

「for」属性の使用

<label for="myField">My label:</label
<input name="myFieldName" id="myField" type="text"/>

HTML <label>の例のAttribute

0
Igorek

いいえ、フィールドにフォーカスするとラベルが消えるという事実に対処するための適切な回避策を適用する限り、ラベルとしてプレースホルダーSTYLINGを使用しても、使いやすさに影響はありません。

私のお気に入りのメソッドはfloatラベルを使用しています。入力に焦点を合わせたとき、または値が入力されたときに入力の一部を占めるため、ラベルが何であったかについての参照がまだあります。

フロートラベルを追加する方法はいくつかありますが、実際にはそのうちの1つが実際の「label」要素を使用し、プレースホルダーのように見栄えをよくします。これがそのチュートリアルへのリンクです： https://css-tricks.com/float-labels-css/

0
Sabrina Gelbart