What is the right way to hide labels from inputs for IE11?

Question

css

Can you please tell me how to hide the labels so that they remain accessible to screen readers and behave appropriately in IE11?
-----------------------

Adequate behavior of modern browsers

Kalichny IE11

-----------------------

HTML

<p>
  <label class="visually-hidden" for="user-login">Логин</label>
  <input class="user-login" id="user-login" type="text" name="login" placeholder="Логин">
</p>
<p>
  <label class="visually-hidden" for="user-password">Пароль</label>
  <input class="user-password" id="user-password" type="password" name="password" placeholder="пароль">
</p>

In styles I use this option visually-hidden

css

.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
          clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

Answer 1

The problem is in the CSS. Fun constructions like not() are not needed here, because you stupidly exclude the application of the necessary styles if the element is either active or in focus. I don't know why this is at all, you need it like this:

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

Here's an example that can be opened in IE11 in read mode from the link to test: