A11Y 101: Скрытие содержимого

Мы, разработчики, склонны скрывать элементы, используя display: none или visibility: hidden.

И это прекрасно работает для того, чтобы скрыть элементы с экрана.
Однако имейте в виду, что это делает именно то, что мы ему говорим. Он скрывает элементы от экрана, что включает в себя программы чтения с экрана!

Скрытие от экранов, но не от считывателей экрана

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

Примером может служить скрытие метки для поля поиска.

Мы должны быть внимательны к тому, какой CSS мы хотим использовать для достижения такого поведения.

Мне нравится использовать CSS, предоставленный проектом A11Y, поскольку он очень полный и актуальный.

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Если вы добавите этот класс к любому элементу, он будет удален с экрана, но объявлен экранным сканерам.

Заключение

Мы должны быть осторожны, когда скрываем элементы с экрана. Если мы полностью скроем элемент, читатели экрана могут не прочитать информацию.

Используя приведенный код CSS, мы можем добиться желаемого эффекта.

Спасибо, что прочитали, и давайте общаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.

Оцените статью
Procodings.ru
Добавить комментарий