Какой вариант расположения формы с лейблом и инпутом лучше: лейбл слева или справа?

Что проверяют

Умеете ли вы обосновать решение в интерфейсе, а не отвечать вкусом. Хороший ответ сразу уточняет, о каком поле идёт речь: для текстового поля и для чекбокса правильный ответ разный. Следом часто спрашивают про доступность: как экранный диктор узнаёт, к какому полю относится подпись.

Как отвечать

• текстовые поля: подпись справа от поля почти не встречается, взгляд натыкается на поле раньше, чем узнаёт, что в него вводить. Выбор обычно между подписью сверху и слева;
• сверху: самый быстрый для заполнения вариант, взгляд идёт по одной вертикали. Хорошо переносит длинные подписи, переводы и узкие экраны, поэтому на мобильных подпись почти всегда сверху;
• слева: экономит высоту и удобен в плотных формах для опытных пользователей, например в админках. Текст в колонке подписей можно выровнять по правому краю, ближе к полю, либо по левому, тогда список подписей легче просматривать;
• справа от контрола: стандарт для checkbox, radio и переключателей, подпись идёт после квадратика и кликабельна вместе с ним.

Доступность от визуального положения почти не зависит. Экранный диктор связывает подпись с полем через разметку: <label for="email"> и id="email" у поля, обёртка <label> вокруг <input> или aria-labelledby. Порядок в DOM должен совпадать с визуальным, а видимый текст подписи должен входить в доступное имя поля (критерий WCAG 2.5.3).

Для языков с письмом справа налево форма зеркалится целиком. Отступы лучше задавать логическими свойствами вроде margin-inline-start, а не margin-left, тогда разметку не придётся переписывать.

Где спотыкаются

Считают, что подпись слева «лучше для скринридеров». Скринридер ориентируется на связь в разметке, а не на пиксели, и подпись без for одинаково бесполезна в любом месте.

Заменяют подпись атрибутом placeholder. Он исчезает при вводе, часто слишком бледный по контрасту, и пользователь забывает, что вводил в поле.

Отвечают категорично, без условий. Сильнее звучит «сверху по умолчанию, слева для плотных десктопных форм, справа только у чекбоксов и радиокнопок».