web-dev-qa-db-ja.com

display：none vs visibility：hidden vs text-indent：9999スクリーンリーダーがそれぞれに対してどのように動作するか？

スクリーンリーダーのユーザーにとって、これら3つの違いは何ですか？

cssaccessibilityscreen-readers
43
Jitendra Vyas

参照： http://css-discuss.incutio.com/?page=ScreenreaderVisibility

display：none：は表示も再生もされません。 *
可視性：非表示：は、表示も再生もされません。 *
text-indent：9999：は表示されませんが、聞こえます。

  • ほとんどのスクリーンリーダーは（読み上げません）display：noneおよびvisibility：hiddenですが、次のようなスクリーンリーダーはほとんどありません- pwWebSpeak およびこれらも読み取るHtReader。
35
Rakesh Juyal

A List Apartにこれについての良い説明があります。 http://www.alistapart.com/articles/fir/ 製品によって異なります。

製品の表示：非表示：非表示
 Halバージョン5.20読み取りを読み取らない
 IBMホームページリーダー3.02読み取らない、5.0ベータ）読み取り読み取り
 OutSpoken 9読み取りません読み取りません
 Window-Eyes 4.2読み取りません読み取りません
16
Sanghyun Lee

スクリーンリーダーがこれらのプロパティをどのように解釈するかについての非常に優れた要約が WebAIM にあります。

一言で言えば、 visibility: hiddenおよびdisplay:noneは、他のユーザーと同様に、スクリーンリーダーからテキストを非表示にします。他のすべてのメソッドは、スクリーンリーダーに「表示」されます。

9
anschauung

コンテンツを視覚的に非表示にする 多くの手法 がありますが、スクリーンリーダーで利用できます。

H5BPテクニックはFF、Webkit、OperaおよびIE6 +で機能します

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
3
Oriol

完全な回答は、chromeが入力ボックスを自動表示/自動入力しないことを確認するためにここにあります。私のWebページ（新規ユーザー）では、電話フィールドとパスワードフィールドは、キャッシュされたデータで自動入力されていました。これを取り除くには、2つのダミーフィールドを作成し、それらをユーザーから見えないようにするクラスを提供しました。これらを分数の後に表示して非表示にするjquery関数です。

表示および非表示にするjquery関数：

$().ready(function() {
    $(".fake-autofill-fields").show();
    // some DOM manipulation/ajax here
    window.setTimeout(function () {
        $(".fake-autofill-fields").hide();
    }, 1000);
});

クラス：

.fake-autofill-fields
{ 

     border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px; 
}

入力フィールド：

<input style="display:none" type="text" class="fake-autofill-fields" name="fakeusernameremembered"/>
<input style="display:none" type="password" class="fake-autofill-fields" name="fakepasswordremembered"/>
0
Nitasha