Все мы знаем и любим свойство display:none, которое “отключает” вывод блока, для которого оно задано в HTML-документе. Вроде бы свойство безотказное и работает всегда.
Но оказывается, что некоторые screen reader’ы запросто читают контент из блоков, скрытых с помощью display: none. Поэтому, если вам не наплевать на ваших посетителей, у которых плохое зрение или оно вобще отсутствует, то вместо того, чтобы создать класс
.hidden{
display:none;
}надо создавать
.hidden{
display: none;
visibility: hidden;
}Свойство visibility: hidden решает проблему и скрывает нужный блок от непослушных “читалок экрана” :) .
Пасиб, учтем :)
Ошибочка – вместо “block” должно быть “none”.
А которые именно читалки?
в случае, когда мы скрываем блок через свойство visibility большой неприятностью будет то, что он продолжит влиять на соседние элементы.
Dimox, точно, спасибо, ступил :)
Максим, JAWS for Windows и еще какая-то, не помню.
Larsz, в данном случае, visibility:hidden это только подкрепление свойства display:none, которое в браузерах не отобразится, так как display:none просто не отрисует блок.
писал, не заметив комментария Dimox :)
[quote comment="2122"]писал, не заметив комментария Dimox :)[/quote]
Да это я виноват на самом деле :) Писал про скрывание, а в коде написал display: block :)
вот как получается – ошибка, допущенная в статье, вызвала шквал откликов :)
Не стоит придавать этому малое значение, display:none в отличии от visibility:hidden также не переваривают мобильные браузеры :)
прошу прощения я НУБ.
подскажите, мне по большому тексту нужно скрывать некоторые абзацы, делать с помощью display:none этого я не хочу, так как в скрываемых абзацах текст превратиться в пыль для ПС. а использовать visibility:hidden не получиться так как будет оставаться много пустого места.
Как можно решить данный случай используя visibility:hidden