Как правильно доступно прятать лэйблы у инпутов для IE11?

Question

[Федя]

Подскажите пожалуйста, как правильно прятать лэйблы, чтобы они оставались доступны для скринридеров и адекватно вели себя в IE11?
------------------------

Адекватное поведение современных браузеров

Каличный 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>

В стилях использую такой вариант 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;
}

Comments

[Александр]

Это какбэ placeholder. Следует отметить, что стили псевдоклассов для каждого браузера задаются отдельно, иначе работать не будет.

[Федя]

Александр, это какбэ не плейсхолдер)) удалил вообще его в HTML из тега input. Это именно label

теперь вот так

[Александр]

Федя, то, что вы наворотили, конечно же label, но можно было сделать проще и аккуратнее.

Answer 1

[Rustam Bainazarov]

Проблема в CSS. Забавные конструкции типа not() тут не нужны, потому что у вас тупо исключается применение нужных стилей, если элемент либо активный, либо в фокусе. Не знаю, зачем это вообще, нужно так:

.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;
}

Вот пример, который можно открыть в IE11 в режиме чтения по ссылке для проверки:

Comments

[Федя]

да, спасибо, действительно конструкции not( ) не нужны.

сделал такой visually-hidden

.visually-hidden,
.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;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

Но вопрос, не помешает ли это доступности? Изначальный visually-hidden был взят по советам учителей с HTML Academy, как оптимальный и правильный вариант скрывать элементы и не мешать скринридерам

[Rustam Bainazarov]

Федя, нормальным скринридерам скорее всего нет, можно opacity убрать на всякий пожарный.

[Федя]

Рустам Байназаров, ну так значит такой можно visually-hidden использовать и не париться?

[Rustam Bainazarov]

Федя, я использую такой вариант, как и Google, Facebook, Stripe (видел у них это).

[Федя]

Рустам Байназаров, Google, Facebook, Stripe

вот такой

.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;
}

используют, или

вот такой

.visually-hidden,
.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;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

?

[Rustam Bainazarov]

Федя, первый, но без opacity и некоторых свойств (у всех по-разному). Это больше как комплиляция всего этого в одном правиле.

[Федя]

Рустам Байназаров, понял, спасибо) хотел найти режим чтения в IE11, чтобы проверить, но никак не могу найти. у меня Win10, а режим тока в 8.1 есть видимо?

[Rustam Bainazarov]

Федя, обычно, когда говорят про них, имеют в виду стороннее ПО типа:
https://sourceforge.net/projects/nvda/files/releas...

Ну и кучи других, конечно. Ну и встроенные в ОС средства, конечно. Я не самый большой специалист в этом :))

Пользуюсь базой семантической разметки, расставляю area, нужные теги и т. п. Но без углубления в эту тематику.

[Федя]

Рустам Байназаров, спасибо за помощь! очень благодарен :)

[Rustam Bainazarov]

Федя, не за что!