1

私は Web エージェンシーで働いていますが、最近ちょっとした質問がありましたが、答えが見つかりませんでした。デザイナーから、フォームにラベルがなく、プレースホルダーのみのフォームを含む PSD ファイルが渡されました。前回これを使用したときは、HTML5 プレースホルダー属性 (古いブラウザーの JavaScript フォールバックを使用) を使用して簡単に進めました。しかし、その後、私は多くのことを読んで、ほとんどの人がアクセシビリティのためにラベルをフォームに入れなければならないと言っていることに気付きました. したがって、デザイナーが私に与えた「最小限の」デザインにラベルを入れずに、ラベルとプレースホルダーのアクセシビリティを実現する最善の方法は何かと考えていました。絶対位置などを使用して、スクリーンリーダー専用に非表示にする必要がありますか? これは、私がしなければならないことの写真の例です (コンテキストを明確に理解するためです)。

の例を見ることができますここに画像の説明を入力

4

2 に答える 2

3

steveax のコメントとリンクに基づいて、実装できる方法がいくつかあります。ラベル自体には対話性がないため、次のようなことができます

label {
  height: 1px;
  text-indent: -1000px;
  overflow: hidden;
}

別のオプションは、WebAIM が言及しているより包括的な隠蔽技術です。つまり、

.hidden {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

以下は、テキスト入力のそれぞれの例です。

可能であれば、視覚的にもラベルを含めるようにデザインを微調整することをお勧めします. 多くの情報源が、プレースホルダー テキストのみを使用することの悪影響を挙げています。

于 2013-07-20T15:27:53.917 に答える