Как скрыть элемент через CSS который будет доступен только через скринридер

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

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

Или используйте современный подход с clip-path:

.sr-only {
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

Это скроет элемент на экране, но оставит его в DOM и доступным для вспомогательных технологий. Не используйте display: none или visibility: hidden, так как они полностью скрывают элемент.