HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 7

[ifap]

<label class="field__hint">E-mail</label>
<input type="email" class="field__input">

1. Зачем кому-то оборачивать ярлык в label и потом не связывать его с соответствующим input? Ошибка верстки? Так давайте тогда еще и незакрытые теги сюда добавим - тоже проблема.

2. Явно указанный тип input'a (email), мягко говоря, снимает остроту проблемы.

[melnik909]

Зачем кому-то оборачивать ярлык в label и потом не связывать его с соответствующим input? Ошибка верстки?

Нет. Разрешенный стандартом способ связи поля ввода и метки

[ifap]

?! Каким именно образом в этом примере связаны label и input? Вы вроде как именна на отсутствие связи между ними и сетовали.

[melnik909]

Я не правильно прочитал предыдущее сообщение.

Ошибка верстки? Так давайте тогда еще и незакрытые теги сюда добавим - тоже проблема.

Я пишу о том, с чем встречаюсь в своей жизни. Если это ошибка на уровне незакрытого тега, то я и о ней напишу. Я не делаю приоритеты ошибкам. Для меня ошибка это ошибка.

[pantsarny]

Как в numeric можно ввести серию и номер паспорта?

[vadimk91]

Вот буквально на днях покупал авиабилет, поле одно, ввел серию и номер через пробел (на компьютере) - в результате слиплось вместе. Но если в российских паспортах серия и номер только цифры, то в документах других стран вполне могут быть и буквы.

[kspshnik]

А какие есть тонкости для модалки, которая не является диалогом/формой? Например, показывает картинку/текст (условно)? И влияет ли способ открытия модалки ( display или .append() , например) ?

[melnik909]

Например, показывает картинку/текст (условно)? 

Это зависит не только от какой в контент в модалке, но и в каком контексте находится пользователь. Какие шаги до этого делал. Что ожидает.

И влияет ли способ открытия модалки

По моему опыту, не влияет.

[kspshnik]

Это зависит не только от какой в контент в модалке, но и в каком контексте находится пользователь. Какие шаги до этого делал. Что ожидает.

Например, кликнул по картинке (картинка обёрнута кнопкой или проставлена aria-role ) в галерее.

[melnik909]

На сайте Etsy посмотрите пример

[bubn0ff]

Спасибо за статью, познавательно. inputmode="numeric" - это интересный вариант.

[dprotopopov]

Полезное дело!!!

[spravka-region]

На сайте вместо связки label+input, есть input с атрибутом placeholder="Название"... Это плохая практика ?

[urchifox]

Спасибо за полезную статью!

Подскажите пожалуйста, а если ставить label перед input, то как стилизовать label у соответствующего input:checked? Для обратного порядка (сначала input, потом label) работает селектор input:checked + label. Для предложенного вами порядка я придумала только способ с оберткой и селектором :has(:checked) > label, но :has пока не поддерживается в старых браузерах, интересно как еще можно решить эту задачу.

[melnik909]

Без :has не получится. В случаях с чекбоксами и радиокнопками я не встречал проблем с порядком. Пользователям не нужно вводить данные в этом случае, они подтверждают что-то. Соответственно не нужно предварительно погружать их в контекст.