css 画像置換 display:none vs 可視性:隠しとテキストインデント:9999 スクリーンリーダーはそれぞれどのように振る舞いますか?




text indent 100% seo (4)

これらの3つのスクリーンリーダーユーザーの違いは何ですか?


Answer #1

コンテンツを視覚的に隠すためには多くのテクニックがありますが、スクリーンリーダーには利用可能です。

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;
}

Answer #2

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

PRODUCT                         DISPLAY: NONE       VISIBILITY: HIDDEN
Hal version 5.20                Does not read       Reads
IBM Home Page Reader 3.02       Does not read       Does not read
Jaws (4.02, 4.50, 5.0 beta)     Reads               Reads
OutSpoken 9                     Does not read       Does not read
Window-Eyes 4.2                 Does not read       Does not read

Answer #3

Complete Answereは、クロムがautoshow / autofill入力ボックスを確認しないようにするためのものです。 私のWebページ(New User)では、電話帳とパスワードフィールドがキャッシュされたデータで自動入力されていました。 これを取り除くために、私は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"/>

Answer #4

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

一言で言えば、 visibility: hiddendisplay:noneは他の人のようにスクリーンリーダーからテキストを隠すでしょう。 他のすべてのメソッドは、スクリーンリーダーに「可視」になります。





screen-readers