Доступное скрытие: паттерн .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 свойство display display: none;
• через CSS свойство visibility, visibility: hidden;
• через атрибут HTML5 hidden, например <span 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>