Visually hidden CSS pattern

visually-hidden.css

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

You can add these:

outline: 0;
outline-offset: 0;

Если надо скрыть элементы от скрин-ридеров и убрать выделение табом и мышкой:

.is-hidden {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
}

ty =)

thank you!

cool. thanks

Thanks)

Thanks a lot!

thanks)

Use outline: transparent instead of outline:0 for compatibility with Windows High Contrast Mode.

oooooo assalomu alekom bratiim qandaysiiz ozbela bormi Uzbekistan

visually hidden means it can be "seen" by blind people using screen readers, but not by sighted people (no part of the item styled this way is drawn visually, because the clip rect is empty, but this item is still "visible" in the DOM.)

Thanks!