CSS visually-hidden: подпись для скринридера

Категория: CSS · Язык: CSS · Обновлено:

Класс visually-hidden скрывает текст с экрана, но оставляет его в accessibility tree. Он полезен для текстовых подписей иконок, дополнительного контекста кнопок и вспомогательных инструкций.

Рабочий пример

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

Примените класс к текстовому элементу внутри кнопки, например <span class="visually-hidden">Закрыть</span>. Саму кнопку оставьте в обычном порядке фокуса.

Частый вопрос

Можно ли этим классом скрывать целые панели?

Нет. Он предназначен для небольших вспомогательных текстов. Для управления видимостью разделов используйте соответствующее состояние интерфейса.