От автора: в процессе веб-разработки нам нужно скрывать элементы по многим причинам. Например, кнопка, которая должна быть видна в мобильном представлении и скрыта в настольном. Или элемент навигации, который скрыт на мобильном устройстве и отображается на настольном.
При скрытии элемента существует три разных состояния:
Элемент полностью скрыт и удален из потока документа.
Элемент скрыт только визуально и по-прежнему доступен для вспомогательных технологий (АТ), таких как программы чтения с экрана.
Элемент видим, но скрыт только для программ чтения с экрана.
В этой статье мы узнаем о скрытии элементов в HTML и CSS и рассмотрим аспекты доступности, анимацию и варианты использования для скрытия. Давайте начнем!
Атрибут HTML5 hidden
Это логический атрибут HTML, который скрывает прикрепленный к нему элемент. Когда браузер загружает веб-страницу, он не будет отображать элементы с атрибутом hidden, если это не было переопределено вручную из CSS. Это похоже на эффект применения к элементу display: none. Рассмотрим следующий пример.
У нас есть заголовок, рисунок и описание. Рисунок должен отображаться только в том случае, если ширина области просмотра больше, чем 400px. Я добавил к элементу img атрибут hidden. В CSS я использовал атрибут hidden, чтобы отобразить элемент только в желаемом размере области просмотра.
img[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, все его потомки будут удалены вместе с ним.
Учтите, что у нас тот же пример, что и выше, и мы хотим скрыть изображение.
img { display: none;
} @media (min-width: 400px) { img { display: block; }
}Это полностью скрывает изображение из потока документа и от программ чтения с экрана. Может быть, вам интересно, что такое поток документа? Смотрите рисунок ниже:
Обратите внимание, что когда синяя книга скрыта, она полностью удалена из стопки. Пространство, которое было отведено ей, ушло. Та же концепция применяется при скрытии элементов в HTML. Зарезервированное пространство для элемента исчезло, и это меняет поток документа или, в нашем примере, стопку книг.
Вот анимация, показывающая, что происходит при удалении книги:
Загружаются ли ресурсы, если они были скрыты через CSS?
Короткий ответ — да. Например, если img скрыт с помощью CSS, и мы отображаем его на определенной контрольной точке, он уже будет загружен. Изображение вызовет HTTP-запрос, даже если оно скрыто с помощью CSS.
В этой демонстрации я добавил только изображение и скрыл его с помощью CSS. Затем я открыл DevTools и проверил вкладку сети, где показано, что изображение загружено.
Мы вернемся к этому позже, чтобы объяснить, как уменьшить количество HTTP-запросов, когда они не нужны на определенной контрольной точке или размере области просмотра.
Элемент style
Стоит отметить, что существуют элементы с display: none по умолчанию. Элемент style может быть добавлен внутри HTML страницы, и мы можем изменить значение его свойства display на block, чтобы он был виден.
<body> <style> .title { color: #000; } </style>
</body>style { display: block;
}Это полезно, если вы хотите, чтобы блок стилей был всегда видимым и редактируемым. Его можно редактировать, добавив в тег style атрибут contenteditable=true.
Влияние display: none на доступность
При использовании display: none это полностью скрывает элемент от программ чтения с экрана.
Непрозрачность
Если установить непрозрачность 0, элемент и все его потомки будут скрыты. Однако это скрывает их только визуально. Кроме того, элемент со значением непрозрачности, отличным от 1, создаст новый контекст стека.
На рисунке выше синяя книга скрыта только визуально. Ее пространство все еще зарезервировано, и порядок стека не изменился, по сравнению с тем, что произошло, когда мы использовали display: none.
img { opacity: 0;
}Исходя из нашего первоначального примера, если мы хотим скрыть изображение с помощью непрозрачности, результат будет выглядеть следующим образом:
Изображение все еще там, и его место зарезервировано. Оно скрыто только визуально.
Душан Милованович отметил, что pointer-events: none | auto может использоваться для отключения событий мыши на элементах, скрытых с помощью opacity: 0. Это важно, поскольку пользователю может быть неудобно кликать, наводить курсор или выбирать текст скрытого элемента.
Влияние opacity: 0 на доступность
Элемент, скрытый с помощью opacity: 0, будет по-прежнему доступен для программ чтения с экрана и может быть выделен фокусом ввода с помощью клавиатуры.
Видимость
Используя visibility: hidden, мы можем отобразить или скрыть элементы, не влияя на визуальный поток документа, аналогично использованию opacity: 0.
Обратите внимание, что синяя книга скрыта из визуального потока, но это не влияет на порядок книг в стопке. Тем не менее, когда visibility: hidden применено к родительскому элементу, все будет скрыто, но когда к дочернему элементу этого родителя будет применено visibility: visible, он будет виден.
<article> <h1>Spring is on the way</h1> <img src="landscape.jpg" alt=""> <p><!-- Desc --></p> </article>
article { visibility: hidden;
} img { visibility: visible;
}
В приведенном выше примере к элементу article применено visibility: hidden. Однако добавление к изображению visibility: visible сделало его видимым. Опять же, это потому, что видимость применяется к потомкам элемента, но она может быть переопределена для дочернего элемента.
Влияние visibility: hidden на доступность
Элемент скрыт, и его потомки будут удалены из дерева доступности, программа чтения с экрана не будет его объявлять.
Позиционирование
Чтобы скрыть элемент с помощью свойства position, нам нужно переместить его за пределы экрана и установить его размер равным нулю (ширина и высота). Примером этого является ссылка пропуска навигации. Рассмотрим следующий рисунок:
Чтобы разместить ссылку вне экрана, нам нужно добавить следующее:
.skip-link { position: absolute; top: -100%;
}Значение -100% будет выдвигать элемент на 100% высоты области просмотра. В результате он будет полностью скрыт. Когда он выделен фокусом ввода на клавиатуре, его можно отобразить так:
.skip-link:focus { position: absolute; top: 0;
}Влияние position: absolute | fixed на доступность
Элемент доступен для программ чтения с экрана и фокусируем с помощью клавиатуры. Он скрыт только визуально из области просмотра.
Обрезка по контуру
Когда к элементу применяется clip-path, это создает область отсечения, которая определяет, какие части должны быть отображены или скрыты.
В приведенном выше примере к прозрачной темной области применено clip-path. Когда к элементу применяется clip-path, ничего под прозрачной темной областью отображаться не будет.
Чтобы продемонстрировать вышесказанное более наглядным способом, я использую инструмент Clippy. На GIF ниже у меня есть следующий clip-path:
img { clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}
Установка значений многоугольника 0 0 для каждого направления изменит область отсечения до нуля. В результате изображение не будет отображаться. Также это можно сделать вместо многоугольника с помощью круга:
img { clip-path: circle(0 at 50% 50%);
}
Влияние clip-path на доступность
Элемент скрыт только визуально. Он все еще доступен для программ чтения с экрана и фокусируем с клавиатуры.
Управление цветом и размером шрифта
Хотя эти два метода не являются общими, как предыдущий, они могут быть полезны для некоторых случаев использования.
Прозрачный цвет
Сделав для текста цвет прозрачным, мы скроем его визуально. Это может быть полезно для кнопки содержащей только иконку.
Размер шрифта
Кроме того, может быть полезно установить размер шрифта на ноль, так как это скроет текст визуально. Рассмотрим следующий пример, где у нас есть кнопка со следующей структурой:
<button> <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="false" focusable="false"> <!-- Path data --> </svg> <span>Like</span> </button>
Наша цель — скрыть текст доступным способом. Для этого я добавил следующий CSS:
.button span { color: transparent; font-size: 0;
}Теперь текст скрыт. Это может работать даже без изменения цвета, но я добавил его для ясности.
Aria Hidden
При добавлении к элементу атрибута aria-hidden он удаляется из дерева специальных возможностей, что может улучшить работу пользователей программы чтения с экрана. Обратите внимание, что это не скрывает элемент визуально, только для пользователей программы чтения с экрана.
<button> Menu <svg aria-hidden="true"><!-- --></svg> </button>
В приведенном выше примере у нас есть кнопка меню с меткой и иконкой. Чтобы скрыть иконку от программ чтения с экрана, добавлено aria-hidden. Согласно Mozilla Developer Network (MDN), ниже приведены варианты использования атрибута:
Скрыть декоративный контент, такой как иконки, изображения.
Скрыть дублированный текст.
Скрыть закадровый или свернутый контент.
Влияние aria-hidden=»true»на доступность
Это предназначено для программ чтения с экрана, поскольку скрывает содержимое только от программ чтения с экрана. Тем не менее, контент остается видимым для зрячих пользователей и фокусируем с клавиатуры.
Анимация и интерактивность
Прежде чем мы рассмотрим примеры, я хочу выделить свойства, упомянутые ранее, чтобы сравнить их и выбрать подходящий метод на основе наших потребностей. Соображения основываются на этой замечательной статье на CSS-Tricks.
Когда мы хотим анимировать скрытый элемент, например, отобразить скрытое мобильное меню навигации, это нужно сделать доступным способом. Чтобы создать доступный опыт, мы изучим несколько хороших примеров и несколько плохих, чтобы избежать ошибок, которые могут привести к плохому опыту для пользователей программ чтения с экрана.
Анимация меню — плохой пример
У нас есть меню, которое должно сворачиваться с помощью анимации скольжения. Проще всего добавить следующее:
ul { opacity: 0; transform: translateX(100%); transition: 0.3s ease-out;
} ul.active { opacity: 1; transform: translateX(0);
}С учетом вышеизложенного, меню будет раздвигаться и сворачиваться в зависимости от класса .active, который будет добавлен через JavaScript, как показано ниже.
menuToggle.addEventListener('click', function(e){ e.preventDefault(); navMenu.classList.toggle('active');
});
Результат может показаться корректным, но здесь есть серьезная ошибка. Использование opacity: 0 не скрывает меню из дерева доступности. Даже если навигация скрыта визуально, она по-прежнему фокусируема с клавиатуры и доступна для программ чтения с экрана. Меню должно быть скрыто, чтобы не запутать пользователя.
Вот скриншот дерева доступности из Chrome DevTools:
Короче говоря, дерево доступности — это список всего, что может получить пользователь программы чтения с экрана. В нашем случае существует список навигации, хотя визуально он скрыт. Нам нужно решить две проблемы:
Предотвратить возможность выделения фокусом ввода с клавиатуры, когда меню скрыто.
Предотвратить объявление навигации с помощью программы чтения с экрана, когда меню скрыто.
На приведенном ниже снимке экрана показано, как видит страницу VoiceOver на Mac OS. Хотя список навигации пока скрыт визуально!
Анимация меню — хороший пример
Чтобы исправить эту ошибку, нам нужно использовать для меню навигации visibility: hidden. Это гарантирует, что меню скрыто визуально и для программ чтения с экрана.
ul { visibility: hidden; opacity: 0; transform: translateX(100%); transition: 0.3s ease-out;
} ul.active { visibility: visible; opacity: 1; transform: translateX(0);
}Теперь меню скрыто от программ чтения с экрана. Давайте снова посмотрим, что покажет VoiceOver:
Пользовательский чекбокс
Дизайн чекбокса по умолчанию сложно настроить, и в результате нам нужно создать собственный дизайн чекбокса. Давайте посмотрим на основной HTML:
<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, который скрывает элемент только визуально и делает его доступным для пользователей клавиатуры и программ чтения с экрана.
.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. Если его не скрыть должным образом, вот как программа чтения с экрана объявит его:
Hiding On The Web grinning face with open mouth
Поскольку к каждому Emoji прикреплено определенное описание, программа чтения с экрана попытается сообщить об этом. Теперь представьте, что вы просматриваете веб-страницу и вдруг услышите этот заголовок! Это очень запутанно. Чтобы избежать такой путаницы для пользователя, следует использовать aria-hidden. Я оберну Emoji в элемент span, а затем скрою его только для программ чтения с экрана.
<h1>Hiding On The Web <span aria-hidden="true">Emoji</span></h1>
Значительный результат с незначительными усилиями!
Сокрытие кнопок
В Твиттере есть кнопка с надписью «Смотреть новые твиты», которая скрыта для программ чтения с экрана через aria-hidden и отображается только визуально, когда доступны новые твиты.
Скрытие декоративного контента
Точка между именем пользователя и датой является декоративной. В результате с помощью aria-hidden=»true» мы предотвращаем объявление «точки» программами чтения с экрана.
И это все.
Автор: Ahmad Shadeed
Источник: https://ishadeed.com
Редакция: Команда webformyself.