Скрытие элементов в Веб

Скрытие элементов в Веб Сайтостроение

Скрытие элементов в Веб

От автора: в процессе веб-разработки нам нужно скрывать элементы по многим причинам. Например, кнопка, которая должна быть видна в мобильном представлении и скрыта в настольном. Или элемент навигации, который скрыт на мобильном устройстве и отображается на настольном.

При скрытии элемента существует три разных состояния:

Элемент полностью скрыт и удален из потока документа.

Элемент скрыт только визуально и по-прежнему доступен для вспомогательных технологий (АТ), таких как программы чтения с экрана.

Элемент видим, но скрыт только для программ чтения с экрана.

В этой статье мы узнаем о скрытии элементов в HTML и CSS и рассмотрим аспекты доступности, анимацию и варианты использования для скрытия. Давайте начнем!

Атрибут HTML5 hidden

Это логический атрибут HTML, который скрывает прикрепленный к нему элемент. Когда браузер загружает веб-страницу, он не будет отображать элементы с атрибутом hidden, если это не было переопределено вручную из CSS. Это похоже на эффект применения к элементу display: none. Рассмотрим следующий пример.

Скрытие элементов в Веб

У нас есть заголовок, рисунок и описание. Рисунок должен отображаться только в том случае, если ширина области просмотра больше, чем 400px. Я добавил к элементу img атрибут hidden. В CSS я использовал атрибут hidden, чтобы отобразить элемент только в желаемом размере области просмотра.

Скрытие элементов в Веб

CSS

123456789img[hidden] {  display: none;} @media (min-width: 400px) {  img[hidden] {    display: block;  }}

Демонстрация

Ну, вы можете быть удивлены, почему бы не использовать display: none? Хороший вопрос. Когда селектор изображения вызывается через его атрибут hidden, мы можем быть уверены, что даже если CSS по какой-то причине не загрузится, элемент будет скрыт.

Влияние hidden на доступность

С точки зрения доступности hidden полностью скрывает элемент с веб-страницы, поэтому он не будет доступен для программ чтения с экрана. Не используйте его, чтобы скрыть элементы только визуально.

Свойство CSS Display

Каждый элемент имеет значение display по умолчанию, например, inline-block, block, table и т.д. Чтобы скрыть элемент со свойством display, мы должны использовать display: none. Когда элемент скрыт через display: none, все его потомки будут удалены вместе с ним.

Учтите, что у нас тот же пример, что и выше, и мы хотим скрыть изображение.

CSS

123456789img {  display: none;} @media (min-width: 400px) {  img {    display: block;  }}

Это полностью скрывает изображение из потока документа и от программ чтения с экрана. Может быть, вам интересно, что такое поток документа? Смотрите рисунок ниже:

Скрытие элементов в Веб

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

Вот анимация, показывающая, что происходит при удалении книги:

Скрытие элементов в Веб

Загружаются ли ресурсы, если они были скрыты через CSS?

Короткий ответ — да. Например, если img скрыт с помощью CSS, и мы отображаем его на определенной контрольной точке, он уже будет загружен. Изображение вызовет HTTP-запрос, даже если оно скрыто с помощью CSS.

READ
Состояние современных методов оптимизации изображений в 2019 году

В этой демонстрации я добавил только изображение и скрыл его с помощью CSS. Затем я открыл DevTools и проверил вкладку сети, где показано, что изображение загружено.

Скрытие элементов в Веб

Мы вернемся к этому позже, чтобы объяснить, как уменьшить количество HTTP-запросов, когда они не нужны на определенной контрольной точке или размере области просмотра.

Элемент style

Стоит отметить, что существуют элементы с display: none по умолчанию. Элемент style может быть добавлен внутри HTML страницы, и мы можем изменить значение его свойства display на block, чтобы он был виден.

12345<body>    <style>       .title { color: #000; }    </style></body>

CSS

123style {    display: block;}

Это полезно, если вы хотите, чтобы блок стилей был всегда видимым и редактируемым. Его можно редактировать, добавив в тег style атрибут contenteditable=true.

Скрытие элементов в Веб

Демонстрация

Влияние display: none на доступность

При использовании display: none это полностью скрывает элемент от программ чтения с экрана.

Непрозрачность

Если установить непрозрачность 0, элемент и все его потомки будут скрыты. Однако это скрывает их только визуально. Кроме того, элемент со значением непрозрачности, отличным от 1, создаст новый контекст стека.

Скрытие элементов в Веб

На рисунке выше синяя книга скрыта только визуально. Ее пространство все еще зарезервировано, и порядок стека не изменился, по сравнению с тем, что произошло, когда мы использовали display: none.

CSS

123img {    opacity: 0;}

Исходя из нашего первоначального примера, если мы хотим скрыть изображение с помощью непрозрачности, результат будет выглядеть следующим образом:

Скрытие элементов в Веб

Изображение все еще там, и его место зарезервировано. Оно скрыто только визуально.

Душан Милованович отметил, что pointer-events: none | auto может использоваться для отключения событий мыши на элементах, скрытых с помощью opacity: 0. Это важно, поскольку пользователю может быть неудобно кликать, наводить курсор или выбирать текст скрытого элемента.

Демонстрация

Влияние opacity: 0 на доступность

Элемент, скрытый с помощью opacity: 0, будет по-прежнему доступен для программ чтения с экрана и может быть выделен фокусом ввода с помощью клавиатуры.

Видимость

Используя visibility: hidden, мы можем отобразить или скрыть элементы, не влияя на визуальный поток документа, аналогично использованию opacity: 0.

Скрытие элементов в Веб

Обратите внимание, что синяя книга скрыта из визуального потока, но это не влияет на порядок книг в стопке. Тем не менее, когда visibility: hidden применено к родительскому элементу, все будет скрыто, но когда к дочернему элементу этого родителя будет применено visibility: visible, он будет виден.

Скрытие элементов в Веб

12345<article>  <h1>Spring is on the way</h1>  <img src=”landscape.jpg” alt=””>  <p><!– Desc –></p></article>

CSS

1234567article {    visibility: hidden;} img {    visibility: visible;}

Скрытие элементов в Веб

В приведенном выше примере к элементу article применено visibility: hidden. Однако добавление к изображению visibility: visible сделало его видимым. Опять же, это потому, что видимость применяется к потомкам элемента, но она может быть переопределена для дочернего элемента.

Демонстрация

Влияние visibility: hidden на доступность

Элемент скрыт, и его потомки будут удалены из дерева доступности, программа чтения с экрана не будет его объявлять.

Позиционирование

Чтобы скрыть элемент с помощью свойства position, нам нужно переместить его за пределы экрана и установить его размер равным нулю (ширина и высота). Примером этого является ссылка пропуска навигации. Рассмотрим следующий рисунок:

Скрытие элементов в Веб

Чтобы разместить ссылку вне экрана, нам нужно добавить следующее:

CSS

1234.skip-link {    position: absolute;    top: -100%;}

Значение -100% будет выдвигать элемент на 100% высоты области просмотра. В результате он будет полностью скрыт. Когда он выделен фокусом ввода на клавиатуре, его можно отобразить так:

CSS

1234.skip-link:focus {    position: absolute;    top: 0;}

Демонстрация

Влияние position: absolute | fixed на доступность

Элемент доступен для программ чтения с экрана и фокусируем с помощью клавиатуры. Он скрыт только визуально из области просмотра.

READ
Модульная структура в проекте с использованием фреймворка Laravel. Часть 1

Обрезка по контуру

Когда к элементу применяется clip-path, это создает область отсечения, которая определяет, какие части должны быть отображены или скрыты.

Скрытие элементов в Веб

В приведенном выше примере к прозрачной темной области применено clip-path. Когда к элементу применяется clip-path, ничего под прозрачной темной областью отображаться не будет.

Чтобы продемонстрировать вышесказанное более наглядным способом, я использую инструмент Clippy. На GIF ниже у меня есть следующий clip-path:

CSS

123img {    clip-path: polygon(0 0, 0 0, 0 0, 0 0);}

Скрытие элементов в Веб

Установка значений многоугольника 0 0 для каждого направления изменит область отсечения до нуля. В результате изображение не будет отображаться. Также это можно сделать вместо многоугольника с помощью круга:

CSS

123img {    clip-path: circle(0 at 50% 50%);}

Скрытие элементов в Веб

Влияние clip-path на доступность

Элемент скрыт только визуально. Он все еще доступен для программ чтения с экрана и фокусируем с клавиатуры.

Демонстрация

Управление цветом и размером шрифта

Хотя эти два метода не являются общими, как предыдущий, они могут быть полезны для некоторых случаев использования.

Прозрачный цвет

Сделав для текста цвет прозрачным, мы скроем его визуально. Это может быть полезно для кнопки содержащей только иконку.

Размер шрифта

Кроме того, может быть полезно установить размер шрифта на ноль, так как это скроет текст визуально. Рассмотрим следующий пример, где у нас есть кнопка со следующей структурой:

123456<button>  <svg width=”24″ height=”24″ viewBox=”0 0 24 24″ aria-hidden=”false” focusable=”false”>    <!– Path data –>  </svg>  <span>Like</span></button>

Наша цель — скрыть текст доступным способом. Для этого я добавил следующий CSS:

CSS

1234.button span {    color: transparent;    font-size: 0;}

Теперь текст скрыт. Это может работать даже без изменения цвета, но я добавил его для ясности.

Скрытие элементов в Веб

Демонстрация

Aria Hidden

При добавлении к элементу атрибута aria-hidden он удаляется из дерева специальных возможностей, что может улучшить работу пользователей программы чтения с экрана. Обратите внимание, что это не скрывает элемент визуально, только для пользователей программы чтения с экрана.

1234<button>    Menu    <svg aria-hidden=”true”><!– –></svg></button>

В приведенном выше примере у нас есть кнопка меню с меткой и иконкой. Чтобы скрыть иконку от программ чтения с экрана, добавлено aria-hidden. Согласно Mozilla Developer Network (MDN), ниже приведены варианты использования атрибута:

Скрыть декоративный контент, такой как иконки, изображения.

Скрыть дублированный текст.

Скрыть закадровый или свернутый контент.

Влияние aria-hidden=»true»на доступность

Это предназначено для программ чтения с экрана, поскольку скрывает содержимое только от программ чтения с экрана. Тем не менее, контент остается видимым для зрячих пользователей и фокусируем с клавиатуры.

Анимация и интерактивность

Прежде чем мы рассмотрим примеры, я хочу выделить свойства, упомянутые ранее, чтобы сравнить их и выбрать подходящий метод на основе наших потребностей. Соображения основываются на этой замечательной статье на CSS-Tricks.

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

Анимация меню — плохой пример

У нас есть меню, которое должно сворачиваться с помощью анимации скольжения. Проще всего добавить следующее:

CSS

12345678910ul {    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out;} ul.active {    opacity: 1;    transform: translateX(0);}

С учетом вышеизложенного, меню будет раздвигаться и сворачиваться в зависимости от класса .active, который будет добавлен через JavaScript, как показано ниже.

READ
Многостолбцовый макет и column-span в Firefox 71

JavaScript

1234menuToggle.addEventListener(‘click’, function(e){  e.preventDefault();  navMenu.classList.toggle(‘active’);});

Скрытие элементов в Веб

Результат может показаться корректным, но здесь есть серьезная ошибка. Использование opacity: 0 не скрывает меню из дерева доступности. Даже если навигация скрыта визуально, она по-прежнему фокусируема с клавиатуры и доступна для программ чтения с экрана. Меню должно быть скрыто, чтобы не запутать пользователя.

Вот скриншот дерева доступности из Chrome DevTools:

Скрытие элементов в Веб

Короче говоря, дерево доступности — это список всего, что может получить пользователь программы чтения с экрана. В нашем случае существует список навигации, хотя визуально он скрыт. Нам нужно решить две проблемы:

Предотвратить возможность выделения фокусом ввода с клавиатуры, когда меню скрыто.

Предотвратить объявление навигации с помощью программы чтения с экрана, когда меню скрыто.

На приведенном ниже снимке экрана показано, как видит страницу VoiceOver на Mac OS. Хотя список навигации пока скрыт визуально!

Скрытие элементов в Веб

Демонстрация

Анимация меню — хороший пример

Чтобы исправить эту ошибку, нам нужно использовать для меню навигации visibility: hidden. Это гарантирует, что меню скрыто визуально и для программ чтения с экрана.

CSS

123456789101112ul {    visibility: hidden;    opacity: 0;    transform: translateX(100%);    transition: 0.3s ease-out;} ul.active {    visibility: visible;    opacity: 1;    transform: translateX(0);}

Теперь меню скрыто от программ чтения с экрана. Давайте снова посмотрим, что покажет VoiceOver:

Скрытие элементов в Веб

Демонстрация

Пользовательский чекбокс

Скрытие элементов в Веб

Дизайн чекбокса по умолчанию сложно настроить, и в результате нам нужно создать собственный дизайн чекбокса. Давайте посмотрим на основной HTML:

1234<p class=”c-checkbox”>  <input class=”sr-only” type=”checkbox” name=”” id=”c1″>  <label class=”c-checkbox__label” for=”c1″>Custom checkbox</label></p>

Чтобы настроить чекбокс, нам нужно скрыть элемент ввода доступным способом. Для этого наряду с другими свойствами следует использовать position. Существует общий класс CSS с именем sr-only или visually-hidden, который скрывает элемент только визуально и делает его доступным для пользователей клавиатуры и программ чтения с экрана.

CSS

12345678910111213.sr-only {  border: 0;   clip: rect(0 0 0 0);   -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);  height: 1px;   margin: -1px;  overflow: hidden;  padding: 0;  position: absolute;  width: 1px;  white-space: nowrap;}

При этом пользовательский чек-бокс остается доступным для программ чтения с экрана. Если вы хотите узнать больше, я написал статью на эту тему.

Демонстрация

Скрытие контента от программ чтения с экрана

Скрытие элементов в Веб

В заголовке таблицы я добавил после элемента заголовка Emoji. Если его не скрыть должным образом, вот как программа чтения с экрана объявит его:

1Hiding On The Web grinning face with open mouth

Поскольку к каждому Emoji прикреплено определенное описание, программа чтения с экрана попытается сообщить об этом. Теперь представьте, что вы просматриваете веб-страницу и вдруг услышите этот заголовок! Это очень запутанно. Чтобы избежать такой путаницы для пользователя, следует использовать aria-hidden. Я оберну Emoji в элемент span, а затем скрою его только для программ чтения с экрана.

1<h1>Hiding On The Web <span aria-hidden=”true”>Emoji</span></h1>

Значительный результат с незначительными усилиями!

Сокрытие кнопок

Скрытие элементов в Веб

В Твиттере есть кнопка с надписью «Смотреть новые твиты», которая скрыта для программ чтения с экрана через aria-hidden и отображается только визуально, когда доступны новые твиты.

Скрытие декоративного контента

Скрытие элементов в Веб

Точка между именем пользователя и датой является декоративной. В результате с помощью aria-hidden=»true» мы предотвращаем объявление «точки» программами чтения с экрана.

И это все.

Автор: Ahmad Shadeed

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.
Добавить комментарий