Доступное скрытие: паттерн visually-hidden

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

Чтобы оставить элемент доступным, но при этом визуально спрятать, придумали специальный класс.visually-hidden

Мне нравится такой его вариант:

.visually-hidden {
  position: fixed;
  transform: scale(0);
}

Раньше использовали вот такую, более расширенную версию

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
}

Как полностью скрыть элементы

Полностью скрыть элементы можно тремя способами:

• через CSS свойство displaydisplay: none;
• через CSS свойство visibility,visibility: hidden;
• через атрибут HTML5 hidden, например

display: none;полностью скроет элемент,visibility: hidden; - скроет элемент, но оставит зарезервированное за ним пространство, при этом для дочерних элементов можно переопределить visibility наvisibility: visible и показать их. Атрибут hidden в современных браузерах (2019) работает какdisplay: none;. Не забудьте добавить в стили[hidden] {display: none} для старых браузеров.

Но, несмотря на разное поведение, все эти методы приводят к одинаковому результату: контент не отображается и не доступен

Как скрыть элементы семантически

Если перед нами стоит обратная задача: сохранить элементы видимыми, но скрыть от скринридеров, то можно использовать специальный атрибутaria-hidden="true".

Это может потребоваться для скрытия картинок-иконок, если они вставлены какimg илиi которые не должны быть прочитаны скринридером, потому что их наличие не повышает информативность контента, так как далее может идти обычный текст

<a href="">
  <img src="cart.png" alt="" aria-hidden="true">
  Перейти в корзину
</a>