Что такое content hidden
Как добавить закрытый контент на WordPress-сайт
Рассказываем о лучших дополнениях, позволяющих скрыть посты в WordPress.
Что такое закрытый контент?
Под закрытым контентом понимаются сразу несколько видов постов в WordPress:
Материалы, которые визуально скрыты от посетителей и доступны по клику на специальную кнопку. Подобное часто встречается в опросниках или на страницах с часто задаваемыми вопросами.
Посты, защищенные от конкретных групп пользователей. То есть статьи и фотографии, не просто спрятанные визуально, а вообще недоступные для тех, кто не зарегистрировался на сайте или не заплатил за эксклюзивные тексты и медиа.
Ссылки, спрятанные от поисковых машин. Все страницы, которые не должны анализироваться ботами Гугла и Яндекса.
Зачем скрывать от кого-то посты или целый сайт?
Некоторые пользователи прячут весь WordPress-сайт, потому что используют его в качестве личного блога (да, есть еще динозавры, которым не нравится Твиттер).
Начинающие разработчики скрывают сайт от Google и от сторонних посетителей, потому что верстают проект для себя, чтобы опробовать какие-то функции движка или создать что-то, что пока не должно увидеть свет.
Но зачастую контент прячут, чтобы начать его продавать – это могут быть эксклюзивные тексты, ролики и другие материалы.
Как скрыть контент в WordPress?
В WordPress по умолчанию встроены инструменты, позволяющие скрыть контент от пользователей.
Открываем список с постами.
Переходим в режим редактирования.
В графе «Статус» выбираем пункт «Скрытый» или «Защищенный паролем».
В первом случае помеченные посты будут доступны только двум категориям пользователей: авторам текстов и администраторам. Во втором – посты будут доступны только тем, у кого есть пароль от них.
Плагины для скрытия контента на WordPress-сайте
Если по какой-то причине вам не нравятся встроенные в WP инструменты или вы хотите скрыть контент не от пользователей, а просто спрятать его визуально, то эта подборка плагинов для вас. Здесь собраны лучшие дополнения для скрытия контента в WordPress.
Aether Content Hider Plugin
Это довольно популярный плагин, часто используемый вебмастерами, чтобы спрятать контент на WordPress-сайтах. Одно из главных преимуществ конкретно этого расширения – возможность выбрать различные виды блокировки контента. Можно скрыть его на время для всех, можно спрятать только для нескольких конкретных пользователей, также можно использовать в качестве фильтра страну посетителя сайта и его устройство.
Помимо этого, в Aether Content Hider Plugin есть дополнительный фильтр для комментариев.
Лицензия на Aether Content Hider Plugin обойдется в 14 долларов.
Show-Hide/Collapse
Еще один плагин, позволяющий в пару кликов спрятать часть контента для некоторых пользователей. Отличительной чертой этого дополнения является возможность добавлять на сайте специальные кнопки, за которыми и прячется контент.
Поэтому Show-Hide/Collapse используется не только для того, чтобы спрятать информацию совсем, но и для того, чтобы просто скрыть ее под кнопкой (выпадающее меню). Поэтому Show-Hide/Collapse отлично подходит для всяких опросников, тестов и FAQ-разделов, где нужно вместить много контента, но не показывать его целиком.
Плагин платный и обойдется в 6 долларов. Оплачивать подписку нужно каждые полгода.
WooCommerce Hide Products
Несмотря на WooCommerce в названии, это дополнение можно установить на любой WordPress-сайт. С помощью него можно закрыть от взора посетителей практически любой контент на сайте. В качестве фильтра используются привилегии пользователей (читатель, автор, админ).
WooCommerce Hide Products продается в двух вариантах: первый – за 22 доллара, второй – за 65 долларов с поддержкой и обновлениями на 6 месяцев.
WooCommerce Products Visibility
Это более простая версия предыдущего плагина. Она работает только с товарами, отображаемыми в вашем магазине на базе WordPress. С помощью дополнения можно скрывать как отдельные единицы товаров, так и целые категории.
Фильтры можно настраивать, ориентируясь на параметры товаров, а также привилегии отдельных пользователей.
Плагин стоит 24 доллара за базовую версию. Расширенная лицензия обойдется в 105 долларов.
Ultimate Blocks
Ultimate Blocks расширяет функциональность базовых блоков в редакторе WordPress. Многие пользователи по праву считают Ultimate Blocks одним из наиболее продвинутых расширений для Gutenberg. В нем есть больше 20 модифицированных блоков, которые можно использовать вместо существующих. Каждый из блоков оснащен кнопкой для скрытия контента.
Стоит отметить, что Ultimate Blocks влияет исключительно на визуальную составляющую сайта. Скрытый контент будет доступен всем, кто нажмет на кнопку, независимо от статуса.
Плагин распространяется бесплатно.
Users Ultra
Это дополнение расширяет базовые возможности управления пользователями в WordPress. По умолчанию он задумывался как инструмент, который позволил бы создавать внутри WP-блога мини-сообщества. Но эти сообщества можно использовать для отображения уникального контента разным группам пользователей. Более того, скрытые материалы можно предоставлять пользователям только за деньги (подключив PayPal). Подписками можно управлять самостоятельно, выставляя определенную стоимость и время их действия.
Стоимость плагина – 5 долларов в месяц. Но есть бесплатная версия с ограниченной функциональностью.
Azurecurve Toggle Show/Hide
Один из наиболее простых в управлении плагинов из нашей подборки. Azurecurve Toggle Show/Hide не требует длительной настройки и чтения документации. Тут всего одна кнопка, позволяющая скрывать или показывать различные блоки с информацией на сайте.
Часто это дополнение используют, чтобы прятать со страницы изображения – как для оптимизации загрузки, так и сокращения визуального контента, появляющегося на сайтах сразу после загрузки.
Azurecurve Toggle Show/Hide распространяется бесплатно. Премиум-подписок нет.
Password Protected Categories
Аналогичное расширение, но с более тонкими настройками доступа. Password Protected Categories позволяет запрашивать у пользователей пароль перед тем, как они получат доступ к закрытому контенту.
Форму для запроса можно настроить на свое усмотрение. Можно добавить в нее свое сообщение, полностью настроить дизайн, стилизовав под общее оформление сайта, и т.п. Для спрятанного контента можно выставить срок действия пароля. Например, сделав так, чтобы спустя 10 дней после авторизации у всех пользователей пропадал доступ к контенту, пока они не получат новый пароль.
Password Protected Categories распространяется бесплатно.
Yoast
Если вы хотите спрятать контент не от пользователей, а от поисковиков, то пригодится Yoast. Это универсальное дополнение, которое помогает настроить множество SEO-параметров WordPress-сайта.
Всего в пару кликов можно запретить Google краулить ваши посты. Причем можно выставить эту настройку для всех новых материалов, появляющихся на странице.
Yoast распространяется по подписке за 90 евро в год. Есть бесплатная версия с ограниченной функциональностью.
Membership
Еще одно расширение, которое изначально создавалось с идеей сегрегации, то есть как дополнение, позволяющее делить пользователей на группы, в том числе на тех, кто платит за контент, и тех, кто потребляет его бесплатно. Поэтому его часто используют онлайн-школы и другие похожие проекты.
С помощью Membership можно добавить на свой ресурс платные подписки разных градаций, пряча более интересные тексты от тех, кто не платит за контент.
Дополнение распространяется бесплатно.
Вместо заключения
На этом все. Теперь вы знаете, как скрыть контент от пользователей или от поисковиков. Главное, следите за актуальностью установленных расширений, чтобы избежать появления уязвимостей на сайте.
Как и когда отображать скрытый контент?
Использование скрытого контента и скрытых элементов навигации — весьма популярный тренд современного интернет-маркетинга. На то есть две основных причины: первая заключается в нежелании перегружать пользователей информацией, вторая — в необходимости создания адаптивных лендингов, которые хорошо смотрелись бы как на лептопах, так и на мобильных устройствах.
Однако, использование скрытого содержания требует внимания к деталям: прежде чем показывать тот или иной элемент, следует убедиться в том, что человек действительно хочет и готов его увидеть.
Данный материал посвящен не тому, какие элементы контента стоит скрывать в первую очередь. Не коснемся мы и того, насколько хорошо дизайн «сообщает» пользователю, что на странице есть скрытые элементы, которые можно отобразить.
Сегодня мы сфокусируемся на механике самого процесса показа контента, скрытого от взглядов пользователей.
Примеры скрытого контента
Наиболее распространенный пример — это мега-меню. Данный инструмент лучше всего иллюстрирует главную проблему скрытого контента. Порой пользователям кажется, что мега-меню обладает «собственным разумом»: оно может неожиданно появиться и столь же внезапно исчезнуть.
На сегодняшний день не выработано единого стандарта относительно того, как должно демонстрироваться скрытое меню. В итоге, впервые попадая на лендинг, пользователи не знают, как активировать этот элемент: то ли просто навести курсор на некую область, то ли щелкнуть по определенному элементу интерфейса.
Если концепт мега-меню реализован правильно, проблем с юзабилити не возникает. В противном случае посетители пребывают в замешательстве от того, что меню самопроизвольно, по их мнению, открывается, когда люди просто перемещают курсор по экрану.
На примере ниже элемент меню появляется даже в том случае, когда курсор просто проходит над полем навигации. При этом раскрывающееся меню настолько велико, что почти полностью закрывает контент страницы. Человеку придется проделать дополнительную работу, свернув появившийся блок, дабы добраться до своей цели.
Всплывающие окна, рекламные объявления и СТА-элементы, которые активируются наведением курсора и появляются поверх контента, также могут раздражать людей, если настройки чувствительности будут слишком высокими.
Как узнать, чего хочет пользователь?
Дабы посетители чувствовали себя комфортно, скрытое содержание должно появляться в нужный момент. Нажатие или клик на определенный элемент страницы трудно интерпретировать неправильно — это явный признак того, что человек хочет увидеть контент. Однако, если речь заходит о таком способе активации, как наведение курсора, тут все гораздо сложнее: нужно правильно распознать намерение пользователя.
Слишком быстрое появление скрытого контента может привести к случайной активации тех или иных функций. С другой стороны, недостаточная скорость реакции страницы на действия пользователя способна создать впечатление инертности системы. Кроме того, чрезмерно длительное время отклика может навести человека на мысль о том, что произведенные действия вообще ни к чему не привели. Алгоритм появления скрытого содержания должен работать, как часы. В противном случае массового оттока клиентов не избежать.
Наиболее точным индикатором желания просмотреть тот или иной элемент является задержка курсора на нем. И чем дольше длится эта задержка, тем очевиднее намерения пользователя. Если курсор наведен на элемент, но при этом продолжает двигаться, вывод не так однозначен: вполне возможно, это всего лишь часть пути к другому элементу интерфейса. Кроме того, человек может водить курсором из стороны в сторону, пока просто что-то читает на сайте.
Если скрытый контент закрывает собой важные элементы, есть смысл увеличить время остановки курсора, требующееся для активации. Иными словами, чем серьезнее могут быть последствия неверной интерпретации намерений пользователя, тем более четкие сигналы требуются для вывода скрытого содержимого. При этом необходимо настроить визуальный фидбек для пользователя, который указывает на интерактивность конкретного элемента (даже если курсор не задерживался на нем). Очень важно, чтобы сигнал, сообщающий об интерактивности, был понятным и очевидным для посетителей, но в то же время ненавязчивым.
Анимация может включать в себя часть времени «остановки курсора»: к примеру, можно настроить ее так, чтобы при зависании курсора в определенной зоне начинался показ анимации, а заканчивался в тот момент, когда курсор ее покидает.
Подобный трюк минимизирует дезориентацию посетителей и риск ошибки. Удачное решение — демонстрация альтернативного изображения продукта при наведении на него курсора. К примеру, на сайте Herschel новое изображение сменяет предустановленное в момент, когда пользователь наводит курсор на картинку. Все это сопровождается плавным эффектом затемнения.
Анимация активируется непродолжительным нахождением курсора в целевой области, причем даже в том случае, если остановки указателя не произошло. Относительно невысокая скорость перехода к альтернативному изображению позволяет точнее определить намерения пользователя и тем самым сделать его пребывание на сайте более комфортным.
Если курсор мыши покидает целевую область после того, как скрытый контент был показан, блок не должен исчезать моментально. Необходимо настроить небольшую задержку, которая позволит определить, был ли указатель переведен в другую часть экрана намеренно или это произошло случайно. Игнорирование данной рекомендации приводит к возникновению так называемой «проблемы диагонали» (diagonal problem) мега-меню.
Ее суть заключается в том, что при движении к содержимому выпадающего меню курсор покидает целевую область и меню тут же сворачивается. Решение — в настройках, сделанных исходя из предположения, что непрерывное движение мыши и возвращение курсора в целевую область спустя небольшой промежуток времени свидетельствует о желании пользователя продолжить работу с меню.
Существуют и другие подходы к «проблеме диагонали». Так, например, в 1986 году специалисты из Tog разработали новый интерфейс Apple. Они решили, что наиболее эффективный способ удостовериться в намерениях пользователя заключается в том, чтобы проверить, остается ли курсор в треугольной области (в качестве вершин «контрольного треугольника» берется стартовая позиция курсора, а также верхняя и нижняя точки подменю).
Можно поступить и по-другому (этот вариант принят на вооружение компанией Amazon): нужно постоянно анализировать перемещения курсора. В данном случае система отслеживает его траекторию и оценивает вероятность того, что курсор направляется к определенной цели. Этот подход также предполагает более длительные задержки перед закрытием меню, которые позволяют не обладающим молниеносной реакцией людям хорошо ориентироваться на ресурсе.
Панель навигации с выпадающим подменю на сайте Los Angeles Times наглядно демонстрирует суть эффекта, описанного выше. При попытке переместить курсор от пункта Entertainment («Развлечения») верхнего уровня меню к одному из пунктов, тот на мгновение оказывается над категорией Sports («Спорт»), что приводит к открытию ненужного подраздела.
Настройка времени отображения скрытого контента
Демонстрация скрытого содержания должна быть организована таким образом, чтобы пользователь чувствовал — он полностью контролирует взаимодействие с интерфейсом. Визуальная обратная связь (изменение стиля или цвета текста, смена фона) должна активироваться не позднее, чем через 0,1 секунды после наведения курсора на элемент, чтобы у посетителей появлялось чувство моментального отклика со стороны системы.
Появление скрытого контента может быть инициировано либо щелчком мыши, либо остановкой курсора в целевой области примерно на 0,3–0,5 секунд (в течение этого времени может начинаться загрузка анимации). Однозначным сигналом к отмене показа контента служит щелчок (нажатие клавиши) за пределами целевой области, или тот факт, что пользователь переместил курсор в сторону более чем на 0,5 секунды.
Настроить показ элементов, появляющихся после клика или нажатия, достаточно просто:
Если же речь идет об элементах, появление которых инициируется наведением курсора, алгоритм выглядит немного сложнее:
Глобальный атрибут HTML5 hidden
Дата публикации: 2018-05-11
От автора: как вы, наверное, знаете, существует несколько атрибутов HTML, которые считаются глобальными, поскольку они могут применяться к любому элементу HTML. В качестве примеров можно привести class, id, style и tabindex. Атрибут hidden HTML5, который был добавлен несколько лет назад, и о котором вы, возможно, забыли, используется для двух элементах в следующем коде.
Атрибут hidden — это логическое значение, которое, если задано для элемента: «указывает, что элемент еще не указан или больше не имеет прямого отношения к текущему состоянию страницы, или что он используется для объявления содержимого для повторного использования другими частями страницы, а не для прямого доступа пользователя».
Ниже приведена демоверсия, в которой используется этот атрибут. Нажмите на кнопку, чтобы переключиться с атрибута hidden для соответствующих элементов. Обратите внимание, что для использования этого атрибута не нужен JavaScript; я просто применил некоторые скрипты для включения и выключения, чтобы продемонстрировать эту функцию.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
hidden Attribute» style=»width: 100%; overflow: hidden;» height=»418″ frameborder=»0″>
Для чего этот атрибут может использоваться?
Последняя часть определения в спецификации интересна тем, что она означает, что вы можете размещать контент на странице с атрибутом hidden, а затем обращаться к этому контенту через JavaScript для использования в другом месте. Я сделал это, прежде чем, например, использовать скрытый элемент textarea, но в стандартной ситуации я бы скрыл этот элемент с помощью CSS, используя что-то вроде display: none. С помощью hidden это сделать проще. Таким образом, элемент со атрибутом hidden является частью DOM, но недоступен для пользователя.
Вот пример, в котором я захватываю содержимое скрытого элемента innerHTML с помощью JavaScript:
hidden element with JavaScript» style=»width: 100%; overflow: hidden;» height=»411″ frameborder=»0″>
Есть некоторые вещи, которые вы должны знать при использовании этого атрибута. Как объясняется в спецификации:
Не следует использовать hidden, чтобы скрывать контент, который должен быть доступен на экране другого размера, разрешении и т. д.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Не следует использовать hidden, чтобы скрывать невидимые части компонента вкладок или аналогичного переключателя контента (Примечание: этот совет из спецификации является довольно небесспорным. См. эту тему)
Не скрытые элементы не должны содержать гиперссылок на скрытые элементы
Элементы, размеченные с использование hidden, по-прежнему потенциально активны. Например, элемент управления формой или даже элемент script по-прежнему будут работать.
Спецификация предоставляет информацию о допустимом использовании, и этот атрибут полностью поддерживается в браузерах при сопоставлении доступности. Он сопоставим с aria-hidden=»true», но ведет себя иначе. В этой статье Стив Фолкнер описывает ряд различий между ними. Основным из них, конечно же, является тот факт, что элементы с aria-hidden=»true» по прежнему отображаются в браузере, но не будут отображаться для вспомогательной технологии, тогда как элементы с hidden не отображаются ни там, ни там.
В той же статье Фолкнер также объясняет, как правильно использовать скрытый hidden: Если вы хотите скрыть контент от всех пользователей, используйте атрибут HTML5 hidden (наряду с CSS display:none для браузеров, которые еще не поддерживают hidden). Необходимости в использовании aria-hidden нет.
hidden Attribute with CSS» style=»width: 100%; overflow: hidden;» height=»218″ frameborder=»0″>
Элемент textarea по-прежнему скрыт, потому что селектор типа элемента недостаточно специфичен, чтобы переопределить CSS браузера. Однако элемент абзаца отображается, потому что я использую селектор классов, который переопределяет селектор атрибутов браузера.
Атрибут hidden поддерживается во всех современных браузерах и даже в IE11, поэтому его можно использовать в большинстве проектов.
Автор: Louis Lazaris
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Верстка. Быстрый старт
Практический курс по верстке адаптивного сайта с нуля!
Скрытие элементов в вебе
Благодаря нашей работе веб-разработчиков нам нужно скрывать элементы по многим причинам. Например, кнопка, которая должна быть видна в мобильном окне просмотра и скрыта в окне просмотра в декстопе. Или элемент навигации, который скрыт на мобильном устройстве и отображается в десктопе. При скрытии элемента существует три разных состояния:
В этой статье мы узнаем о сокрытии элементов в HTML и CSS и рассмотрении аспектов доступности, анимации и вариантов использования для сокрытия.
HTML5 атрибут hidden
Рассмотрим следующий пример.
Значения доступности для hidden
С точки зрения доступности hidden полностью скрывает элемент от веб-страницы, поэтому он не будет доступен для программ чтения с экрана. Не используйте его, чтобы скрыть элементы только в презентационных целях.
CSS свойство display
Учтите, что у нас тот же пример, что и выше, и мы хотим скрыть изображение.
Это полностью скрывает изображение от потока документов и от программ чтения с экрана. Может быть, вам интересно, что такое документооборот? Смотрите рисунок ниже:
Обратите внимание, когда синяя книга скрыта, она полностью удалена из стопки. Пространство, которое было сохранено для этого, ушло. Та же концепция применяется при скрытии элементов в HTML. Зарезервированное пространство для элемента исчезло, и оно меняет поток документов или, в нашем примере, стек книг.
Вот анимация, показывающая, что происходит при удалении книги:
Загружаются ли ресурсы, если они были скрыты с помощью CSS?
Да, это короткий ответ. Например, если скрыть тег img с помощью CSS, и мы показываем его в определенной точке останова, он уже будет загружен. Изображение вызовет HTTP-запрос, даже если оно скрыто с помощью CSS.
В этой демонстрации я добавил только изображение и скрыл его с помощью CSS. Затем я открыл DevTools и проверил вкладку сети, которая показывает, что изображение загружено.
Мы вернемся к этому позже, чтобы объяснить, как уменьшить HTTP-запросы, когда они не нужны в определенной точке останова или размере области просмотра.
Элемент style
Стоит отметить, что существуют элементы со значением display: none по умолчанию. Элемент style может быть добавлен внутри HTML страницы, и мы можем изменить его свойство отображения блока, чтобы он мог быть виден.
Значение доступности для display: none
При использовании display: none он полностью скрывает элемент от программ чтения с экрана.
Opacity
Исходя из нашего первоначального примера, если мы хотим скрыть изображение с непрозрачностью, результат будет выглядеть следующим образом:
Изображение все еще там, и его место зарезервировано. Оно скрыто только с визуальной точки зрения.
Значение доступности для opacity: 0
Visibility
Обратите внимание, как синяя книга скрыта от визуального потока, но это не влияет на порядок стопки книг.
Значения доступности для visibility: hidden
Элемент скрыт, и его потомки будут удалены из дерева доступности, и программа чтения с экрана не сообщит об этом.
Позиционирование
Чтобы разместить ссылку вне экрана, мы должны добавить следующее:
Значения доступности для position: absolute | fixed
Элемент доступен для программ чтения с экрана и фокусируется на клавиатуре. Это скрыто только визуально из области просмотра.
Clip Path
Чтобы продемонстрировать вышесказанное более наглядно, я буду использовать для этого инструмент Clippy. В GIF ниже у меня есть следующий clip-path:
Установка значений многоугольника 0 0 для каждого направления приведет к изменению размера области отсечения до нуля. В результате изображение не будет отображаться. Также это можно сделать с помощью круга вместо многоугольника:
Значения доступности для clip-path
Элемент скрыт только визуально. Это все еще доступно для программ чтения с экрана и клавиатуры.
Управление цветом и размером шрифта
Хотя эти два метода не являются общими, как мы обсуждали предыдущий, они могут быть полезны для некоторых случаев использования.
Прозрачный цвет
Сделав цвет прозрачным для текста, он будет скрыт визуально. Это может быть полезно для кнопки с иконкой.
Размер шрифта
Также может быть полезно установить размер шрифта равным нулю, так как это будет скрывать текст визуально.
Рассмотрим следующий пример, где у нас есть кнопка со следующей структурой:
И с этим, текст скрыт. Он может работать даже без изменения цвета, но я добавил его для пояснения.
Aria Hidden
При добавлении атрибута aria-hidden к элементу он удаляет этот элемент из дерева специальных возможностей, что может улучшить взаимодействие пользователям программ чтения с экрана. Обратите внимание, что он не скрывает элемент визуально, он предназначен только для пользователей программы чтения с экрана.
Значения доступности для aria-hidden=»true»
Он предназначен для программ чтения с экрана, поскольку скрывает содержимое только от программ чтения с экрана. Тем не менее, контент по-прежнему виден для зрячих пользователей и фокусируется на клавиатуре.
Анимация и интерактивность
Прежде чем мы начнем с примеров, я хочу выделить свойства, упомянутые ранее, чтобы сравнить их и выбрать подходящий метод на основе наших потребностей. Шпаргалка вдохновлена этой замечательной статьей о CSS-хитростях.
Когда мы хотим анимировать скрытый элемент, например, показать скрытую мобильную навигацию, это нужно сделать доступным способом. Чтобы сделать доступным опыт, мы изучим несколько хороших примеров, которые можно извлечь, и плохие примеры, чтобы избежать ошибок, которые могут привести к плохому опыту для пользователей программ чтения с экрана.
У нас есть меню, которое должно иметь анимацию скольжения или снятия холста, когда оно развернуто. Проще всего добавить в меню следующее:
Результат может показаться хорошим, но в нем есть большая ошибка. Использование opacity: 0 не скрывает навигацию от дерева доступности. Даже если навигация скрыта визуально, она по-прежнему фокусируется с клавиатуры и доступна для программ чтения с экрана. Он должен быть скрыт, чтобы не запутать пользователя.
Вот скриншот дерева доступности из DevTools Chrome:
На приведенном ниже снимке экрана показано, как VoiceOver в Mac OS видит страницу. Список навигации там пока скрыт визуально!
Чтобы исправить эту ошибку, нам нужно использовать visibility: hidden для меню навигации. Это гарантирует, что меню скрыто визуально и для программ чтения с экрана.
Как только это добавлено, теперь меню скрыто от программ чтения с экрана. Давайте снова протестируем и посмотрим, что VoiceOver покажет:
Checkbox
Дизайн флажка по умолчанию сложно настроить, и в результате нам нужно создать собственный дизайн флажка. Давайте посмотрим на основной HTML:
Скрытие контента от программ чтения с экрана
В заголовке таблицы я добавил Emoji после элемента заголовка. Если это не скрыто должным образом, вот как программа чтения с экрана будет читать текст:
Маленькая перемена, большая победа!
Сокрытие кнопок
В Твиттере есть кнопка с надписью «Смотреть новые твиты», которая скрыта для программ чтения с экрана с помощью aria-hidden и отображается только визуально, когда доступны новые твиты.
Скрытие декоративного контента
