Display: none vs visibility: hidden vs text-indent: 9999 Как работает экранный ридер с каждым из них?

Ответ 1

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

display: none: не будет видно и не слышно. *
видимость: скрыто: не будет видно и не слышно. *
text-indent: 9999: не будет видно, но он будет услышан.

• Большая часть экранного устройства не будет отображаться: нет и видимость: скрыта, но есть несколько программ чтения с экрана, например pwWebSpeak и HtReader который будет читать даже эти тоже.

Ответ 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

Ответ 3

Там очень хорошее представление о том, как читатели экрана интерпретируют эти свойства в WebAIM.

В двух словах, visibility: hidden и display:none будут скрывать текст от читателей экрана так же, как и от других. Все другие методы будут "видимыми" для устройства чтения с экрана.

Ответ 4

Есть много методов, чтобы скрывать контент визуально, но он доступен для чтения с экрана.

Технология 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;
}

Ответ 5

Завершить Answere, чтобы убедиться, что хром не имеет автозапуска/окна ввода автозаполнения. На моей веб-странице (новый пользователь), поле телефона и пароль fioeld автоматически заполнялись кэшированными данными. Чтобы избавиться от этого, я создал два фиктивных поля и дал им класс, который делает их невидимыми для пользователя. Функция 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"/>