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!

Unfortunately, I found that setting both width and height to 1px may not work properly for the focus-only links in iOS VoiceOver.
The VO will announce it once reached, but it won't receive the DOM focus. On click, some internal "clickability" check won't mark the link as the event's target. That'll cause the app to ignore any custom click handlers with default prevention.
After I leave just the width or just the height, the VO navigation works better, and the link is marked as a target.