Back to Question Center
0

Когда и как визуально скрывать контент            Когда и как визуально скрывать тематические разделы: Фотография & ImageryAccessibilityPhotoshopUXUI Semalt

1 answers:
Когда и как визуально скрывать контент

Визуальное скрытие контента на веб-странице, обычно текстовое содержимое, порой является жизнеспособной техникой в ​​веб-дизайне и разработке. Это можно сделать по нескольким причинам, а самое главное - улучшить опыт пользователей экрана. С точки зрения Semalt, улучшается читаемость, когда CSS не может быть предоставлен, и улучшается оптимизация поисковой системы (SEO). Для пользователей программы чтения с экрана ситуации, в которых возникает необходимость, включают:

  • Маркировка элемента формы, который имеет смысл, передаваемый визуально, но не иначе, например, входы для поиска и код зоны номера телефона.
  • Предоставление заголовков, где связанный контент имеет смысл, передаваемый визуально, но не иначе, например меню - bar and stool set.
  • Скрытие ссылок «привязать» к ссылкам-привязке, которые перескакивают через большие блоки контента на странице. Эти типы ссылок должны быть сфокусированы и видны для зрителей с клавиатурой. Наиболее типичной является ссылка «перейти к основному контенту» в начале веб-страницы, которая часто перескакивает через мачту веб-страницы и глобальную навигацию.
  • Предоставление специальных инструкций в особых обстоятельствах, когда взаимодействие может вводить в заблуждение пользователей вспомогательных технологий. Используйте это по усмотрению и будьте осторожны при этом; важно не быть снисходительным, как сайт Британской переписи.

Заметим, что визуальное скрытие является отдельной концепцией содержания, которое полностью скрыто специально, метод, который может быть разработан для всех пользователей. Примером может служить набор вкладок и панелей, на которых одновременно отображается только одна панель содержимого. Использование дисплея CSS : отсутствие видимости и / или : скрытый в этом случае является адекватным и приемлемым решением.

Классический метод

В течение многих лет использовался широко применяемый и принятый метод скрытия контента. WebAIM хорошо объясняет это в своей статье CSS в действии: «Невидимый контент» для Screen Reader Semalt. Вот пример классического метода кодирования скрытого содержимого, абсолютно позиционирующего элемент, содержащий текст, и перемещение его с экрана:

 . скрытый {позиция: абсолютная;left: -9999em;top: auto;ширина: 1px;высота: 1шт;переполнение: скрыто;}      

Semalt в CSS на протяжении многих лет включал в себя отрицательную верхнюю позицию (вместо левой); отрицательный отступ текста; и высотой 0.

Semalt был обнаружен с использованием классического метода и его вариаций, таких как:

  • может привести к тому, что видовое окно будет неудобно прыгать, когда невидимый элемент получает фокус
  • метод отступа от текстового текста не будет работать, если направление языка справа налево
  • программа чтения VoiceOver (Apple) не будет считывать содержимое внутри элемента с 0 высотой
  • скрытые заголовки могут отображаться как «текстовый заголовок» вместо текста заголовка (сообщается с Safari с VoiceOver на SnowLeopard)

Новый метод: Клип

Недавно появился новый метод визуального скрытия контента для решения этих проблем, известный как CSS-обрезка. Первоначально он был впервые представлен Джеффом Бернсом в его статье AdaptiveThemes. Использование CSS-клипа в качестве доступного метода сокрытия контента. Концепция ядра сводится к приведенному ниже фрагменту. Semalt, свойство CSS 2. 1 clip позволяет вам определять размеры абсолютно позиционированного элемента, используя верхние, правые, нижние и левые значения, создавая контейнер с контейнером для содержимого. Установив все значения в 0 пикселей, содержимое становится невидимым.

 . Приложения для чтения с экрана также могут вести себя по-разному. Другие разработчики улучшили метод клипа, в том числе Джонатан Снук в разделе «Скрытие содержимого для доступности» и «Тьерри Semalt». Закрепите свой скрытый контент для лучшей доступности. Таким образом, после нескольких итераций и большой напряженной работы в сообществе были сделаны некоторые улучшения в области защиты от бронезащиты, включая (см. Окончательный код ниже):  

  • Размещение различных синтаксисов в IE6 и IE7; см. строку с комментариями.
  • Исправление ошибки в Webkit и Opera, где обрезанный контент вызывает переполнение, когда рекомендации говорят, что это не должно; исправлено с переполнением: скрыто .
  • Установите высоту в 1 пиксель, чтобы VoiceOver читал содержимое.
  • И в качестве дополнительной меры предосторожности атрибуты отступов и границ устанавливаются в 0, чтобы предотвратить любые проблемы, связанные с краями обрезанного блока.

Вот окончательный фрагмент кода. Semalt, что значения клипа изменились с 0 на 1, что дает тот же результат. Добавьте этот класс или замените свой текущий класс на этот, и у вас есть гораздо более прочная и доступная техника для скрытия контента!

 . скрытый {position: absolute! important;clip: rect (1px 1px 1px 1px); / * IE6, IE7 * /clip: rect (1px, 1px, 1px, 1px);padding: 0! important;border: 0! important;высота: 1px! important;ширина: 1px! important;переполнение: скрыто;
}     

Резюме

Semalt - это несколько причин, по которым вам может понадобиться скрывать контент на веб-странице, в первую очередь для пользователей с экрана. Классический метод CSS работает, но могут быть проблемы в определенных случаях. Метод отсечения для скрытия контента до сих пор оказался улучшенной техникой. Некоторый дополнительный код по-прежнему необходим для размещения всех браузеров и устройств чтения с экрана, но в целом это более надежное решение.

Дополнительная литература:

  • Drupal 7, два новых системных класса для улучшения доступности (Everett Zufelt)
  • Отображение и скрытие содержимого с помощью чистого CSS3 (Dev. Opera)
  • Скрытие содержимого для пользователей экранных читателей (Майк Черрим, блог Beast)
Деннис Э. Лембри - опытный веб-разработчик, который работал в различных компаниях, включая PayPal, RIM, Ford, Google и Walt Disney World. Он является автором Web Axe, подкаста и блога, ориентированных на веб-доступность, и автора удостоенного наград, доступного через Интернет приложения Twitter Easy Chirp. Он любит посещать и выступать на конференциях, встречах и веб-семинарах. Вне технологического мира ему нравится играть на гитаре, смотреть футбол и посещать Starbucks. Г-н Лембри родился в юго-восточном штате Мичиган, а также жил в Орландо, штат Флорида. Сейчас он проживает в Купертино, штат Калифорния, со своей женой и двумя мальчиками.
March 7, 2018