Визуальное сокрытие контента на веб-странице, обычно текстового, иногда является жизнеспособной техникой в веб-дизайне и разработке. Это может быть сделано по нескольким причинам, наиболее важным из которых является улучшение восприятия пользователем программы чтения с экрана. Другие причины включают улучшение читаемости, когда CSS не может быть отображен, и улучшение поисковой оптимизации (SEO). Для пользователей программы чтения с экрана возникают ситуации, в которых возникает необходимость:
- Пометка элемента формы, значение которого передается визуально, но не иначе, например, вводимые данные для поиска и код области телефонного номера.
- Предоставление заголовков, в которых связанный контент имеет смысл, передаваемый визуально, но не иначе, например, меню.
- Скрытие «пропускающих» ссылок — якорных ссылок, которые перепрыгивают через большие блоки контента на странице. Эти типы ссылок должны быть фокусируемыми и видимыми для зрячих пользователей клавиатуры. Наиболее типичной является ссылка «перейти к основному содержанию» в начале веб-страницы, которая часто проходит мимо мачты веб-страницы и глобальной навигации.
- Предоставление специальных инструкций в особых обстоятельствах, когда взаимодействие может сбивать с толку пользователей вспомогательных технологий. Будьте осторожны с этим и будьте осторожны при этом; важно не быть снисходительным, как веб-сайт британской переписи .
Обратите внимание, что визуальное скрытие контента — это отдельная концепция контента, которая намеренно полностью скрыта , метод, который может быть разработан для всех пользователей. Примером является набор вкладок и панелей, где одновременно отображается только одна панель контента. Использование display:none CSS display:none и / или visibility:hidden в этом случае является адекватным и приемлемым решением.
Классический метод
В течение многих лет широко применяемый и принятый метод скрытия контента использовался. WebAIM хорошо объясняет это в своей статье « CSS в действии: невидимый контент» только для пользователей программы чтения с экрана . Вот пример классического метода кодирования скрытого содержимого, абсолютно позиционирующего элемент, содержащий текст, и перемещающего его с экрана:
.hidden { position: absolute; left: -9999em; top: auto; width: 1px; height: 1px; overflow: hidden; } <div class="hidden">Hidden content here.</div>
Вариации в CSS развивались годами, включая отрицательную верхнюю позицию (вместо левой); отрицательный текстовый отступ; и высота 0.
Были обнаружены проблемы с классическим методом и его вариациями, такими как:
- может привести к тому, что область просмотра будет неуклюже прыгать, когда невидимый элемент получает фокус
- метод отступа отрицательного текста не будет работать, если направление языка справа налево
- программа чтения с экрана VoiceOver (Apple) не будет читать содержимое элемента, имеющего высоту 0
- скрытые заголовки можно произносить как «текстовые заголовки» вместо текстовых заголовков (сообщается в Safari с VoiceOver на SnowLeopard)
Новый метод: клип
Недавно для решения этих проблем появился новый метод визуального сокрытия контента, известный как CSS-отсечение. Впервые он был впервые представлен Джеффом Бернцем в своей статье AdaptiveThemes « Использование CSS-клипа как доступного метода сокрытия контента» . Основная концепция сводится к следующему фрагменту. По сути, свойство клипа CSS 2.1 позволяет вам указать размеры абсолютно позиционированного элемента, используя верхнее, правое, нижнее и левое значения, создавая контейнер для содержимого в штучной упаковке. Если все значения равны 0 пикселям, содержимое становится невидимым.
.hidden { position: absolute; clip: rect(0px 0px 0px 0px); }
Теоретически, это должно работать идеально, но мы все знаем, что рендеринг браузеров может немного отличаться, и браузеры много раз не соответствуют должным образом стандартам W3C. Приложения для чтения с экрана также могут вести себя по-разному. Другие разработчики улучшили метод клипа, в том числе Джонатан Снук в « Скрытие контента для доступности» и Тьерри Кобленц в « Закрепление скрытого контента для улучшения доступности» . Таким образом, после нескольких итераций и большой кропотливой работы в сообществе были сделаны некоторые большие усовершенствования, в том числе (см. Окончательный код ниже):
- Приспособление различного синтаксиса в IE6 и IE7; см. строку с комментарием.
- Исправление ошибки в Webkit и Opera, когда отсеченный контент вызывает переполнение, когда руководство говорит, что это не должно; исправлено с
overflow:hidden. - Установите высоту в 1 пиксель, чтобы VoiceOver считывал содержимое.
- И в качестве дополнительной меры предосторожности атрибуты padding и border устанавливаются в 0, чтобы предотвратить любые проблемы, связанные с краями обрезанного поля.
Вот последний фрагмент кода. Обратите внимание, что значения клипа изменились с 0 на 1, что приводит к тому же результату. Добавьте этот класс или замените текущий класс этим, и у вас будет гораздо более надежная и доступная техника для сокрытия контента!
.hidden { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; }
Резюме
Есть несколько причин, по которым вы можете захотеть скрыть контент на веб-странице, в первую очередь для пользователей программ чтения с экрана. Классический метод CSS работает, но могут быть проблемы при определенных крайних случаях. До настоящего времени метод отсечения, позволяющий скрыть содержимое, оказался усовершенствованным методом. Некоторый дополнительный код все еще требуется для размещения всех браузеров и программ чтения с экрана, но в целом это более надежное решение.
Дальнейшее чтение:
- Drupal 7, два новых системных класса для улучшения доступности (Everett Zufelt)
- Отображение и скрытие контента с помощью чистого CSS3 (Dev.Opera)
- Скрытие контента для пользователей программы чтения с экрана (Mike Cherim, Beast Blog)