дисплей: нет, видимость: скрытый или текстовый отступ: 9999. Как программа чтения с экрана ведет себя с каждым из них?
-
20-09-2019 - |
Вопрос
В чем разница между этими тремя для пользователей программ чтения с экрана?
Решение
ссылаться: http://css-discuss.incutio.com/?page=ScreenreaderVisibility
дисплей: нет: не будет видно и услышано.*
видимость:скрытый: не будет видно и услышано.*
отступ текста:9999: не будет видно, но будет услышано.
- Большая часть программы чтения с экрана не будет «говорить» дисплей: нет и видимость:скрытый , но таких программ чтения с экрана мало, как pwWebSpeak и HtReader, который даже их прочитает.
Другие советы
Об этом есть хорошее объяснение в 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
Очень хорошее описание того, как программы чтения с экрана интерпретируют эти свойства, можно найти на странице ВебАИМ.
В двух словах, visibility: hidden
и display:none
скроет текст от программ чтения с экрана, как и от других.Все остальные методы будут «видны» для программы чтения с экрана.
Есть много техник чтобы визуально скрыть контент, но сделать его доступным для программ чтения с экрана.
Метод 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;
}
Полный ответ здесь, чтобы убедиться, что Chrome не отображает/автозаполняет поля ввода автоматически.На моей веб-странице (Новый пользователь) поле телефона и поле пароля автоматически заполнялись кэшированными данными.Чтобы избавиться от этого, я создал два фиктивных поля и присвоил им класс, который делает их невидимыми для пользователя.Функция 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"/>