アクセテキストボックス

StackOverflow https://stackoverflow.com/questions/934230

  •  06-09-2019
  •  | 
  •  

質問

私は多くのテキストボックスにHTMLページを持っています。私はアクセシビリティpurpose.Butのためにそれらをラベル付けする必要があり、私はvisible.Isことが可能にラベルをしたくないですか？または、任意の他の設計選択肢がありますか？

正しい解決策はありません

他のヒント

ページ内のテキストを入れて、（このような高い負のテキストのインデントなど）スクリーンリーダーのユーザーがアクセスしながら、それは視覚的なユーザーに隠さ持っている様々な方法があります。

ただし、「ユーザー補助」「ウェブを使用して問題がない人々」と「ブラインドされている人々」の間のラインではありません。そこどちらのグループに収まる人々の多くがあり、著者は、アクセシビリティを見ることができない人々にコンテンツを利用可能にする、より程度であることを忘れすることは、あまりにも簡単に、あまりにも一般的です。

そこにあなたがテキストエリアが含まれているものをユーザーに通知するために使用しているいくつかのタグになりそうだ、これだけマーク - どれもこれに悪いではない、と私はあなたがすべてのラベルを非表示にする理由としてクエリをサポートしています。

ディスプレイを使用してそれに応じてラベルやスタイルとしてその最大ます。

それでもラベルを非表示にしたい場合は、

、オフスクリーンを配置することは、より良いです。 456ベレア通りのブログでのこの最近の概要があります。

ラベルの点はちょっとそれにヘッダーを与えるように、入力の目的を説明することです。ラベルを使用しない場合、どのようにあなたの目の見えるユーザーが入力中に置くために何を知っているのだろうか？

また、支援技術のユーザーのためのラベルである必要があり、目の見えるユーザーに視覚的な手がかりを与えるものは何でも。

CSSを試してみてください。

label {
    display: none;
}

のみ「画面」中に、このスタイルシートを適用することを確認します 

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
前述のように

、それはすべての入力要素のための目に見えるラベルを持つことが常に望ましいです - これは、晴眼者と非晴眼ユーザーの両方を支援します。言ったので、私はあなたのケースを推測している、これは現実的ではありません特定のシナリオでは、該当があります。このような状況のために、あなたはカップルのオプションがあります。

まず、目の見えるユーザのためのツールチップを表示する追加の利点を有している「タイトル」属性を使用することである。

<input type="text" title="first name" />

カップルの他はCSSを使用して画面からラベルを配置する必要2番目のオプションを、述べています：

<label for="first_name" 
  style="position:absolute;left:-1000px;width:1px;overflow:hidden;" />
<input type="text" id="first_name" />

は、「表示：なし」を使用してとは異なり、スクリーンリーダーは、まだラベルを読み込みます。これは、CSSのラベルが表示されます無効にしているユーザーにもエレガントです。

どんなにあなたが一緒に行く何、私は間違いなくは、トライアル版をダウンロードすることをお勧めします JAWSのフリーダム・サイエンティフィックにから、あなたのソリューションをテストます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top