display:none vs Visibility:hidden vs text-indent:9999 スクリーン リーダーはそれぞれどのように動作しますか?

Question

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

Answer 1

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

表示:なし: 見られず、聞かれなくなります。*
可視性:隠れた： 見られず、聞かれなくなります。*
テキストインデント:9999: 見えませんが、聞こえます。

• ほとんどのスクリーン リーダーは「話しません」 ディスプレイ:なし そして 可視性:隠れた 、ただし、次のようなスクリーンリーダーはほとんどありません pwWebSpeak HtReader はこれらも読み取ります。

Answer 2

別に一覧でこの程度の良い説明があります。 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

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

は、一言で言えば、visibility: hiddenとdisplay:noneでは、それは他の人からの場合と同じようにスクリーンリーダーからテキストを非表示になります。他のすべての方法は、スクリーンリーダーに「見える」になります。

Answer 4

多くの技術は、あり、視覚的にコンテンツを非表示にするにそれを用意していますスクリーンリーダー用ます。

H5BP技術はFFで動作し、Webkitの、オペラとIE6 +

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

Answer 5

完全Answereは必ずクロームdoesntのautoshow /オートフィル入力ボックスを作るためにここにあります。 私のWebページ（新しいユーザー）、電話フィールドとパスワードfioeld上にキャッシュされたデータを自動入力されていました。これを取り除くために、私は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"/>