Архитектура фронтенда
Доступные формы: тест с выбором ответа
Суть Синтез по всему юниту в формате тестов: связь label, озвучивание ошибок, фокус на первом невалидном поле, native против ARIA и constraint validation.
Высота — путь к senior
НольJuniorMiddleSenior
Ты на senior-высоте — в орбитеШесть вопросов, охватывающих весь юнит. Каждый отражает решение, которое вы принимаете на реальном ревью формы, — не определение для пересказа, а выбор между формой, которая работает для всех, и формой, которая работает только с мышью.
Цель
Убедитесь, что вы связываете воедино связь label, озвучивание ошибок, focus management, нативную семантику и constraint validation — тот синтез, к которому вёл урок.
Викторина
Completed
Поле показывает свою подпись только как placeholder. Коллега утверждает, что это нормально, ведь текст виден. Почему это всё равно нарушение WCAG?
Heads-up Визуально соседний текст или placeholder не создаёт программную связь. Дереву доступности нужны явные for/id или обёртка; пиксели на экране не создают имя, которое читает AT.
Heads-up aria-label работает, но не даёт зрячим пользователям видимой подписи, поэтому это крайняя мера для полей-иконок. Настоящий label — это базовый вариант; здесь проблема в полном отсутствии связанного имени.
Heads-up Даже при идеальном контрасте placeholder исчезает при фокусе и не является надёжным accessible name. Контраст не превращает placeholder в программную подпись.
Викторина
Completed
Кастомная JS-валидация на submit находит три невалидных поля. Команда красит их в красный и прокручивает к первому. Пользователь клавиатуры/screen reader всё равно ничего не слышит. Какой главный пропущенный шаг?
Heads-up Прокрутка помогает только зрячему пользователю мыши. Цвет невидим для screen reader и бесполезен для дальтоника, а фокус не сдвинулся, поэтому ничего не озвучивается. Нужно переместить фокус, а не только viewport.
Heads-up alert() прерывает всех, теряет пофайловую связь aria-describedby и не ставит фокус туда, где происходит исправление. Для клавиатуры и AT это хуже.
Heads-up После preventDefault и собственной валидации aria-required ничего не меняет. Пробел — в focus management и озвучивании, а не в повторном запуске нативной валидации.
Викторина
Completed
Вы добавили div с role=button и обработчиком клика, стилизованный точно по дизайну. Пользователь клавиатуры сообщает, что кнопка не работает. Что забыли помимо role?
Heads-up role=button меняет только то, как AT озвучивает элемент. Она не добавляет его в порядок табуляции и не подключает активацию Enter/Space; именно это даёт бесплатно нативный button, а div — нет.
Heads-up У div с текстом accessible name есть; не хватает операбельности с клавиатуры (tabindex + обработчики клавиш), а не имени. Поэтому нативный button — выбор по умолчанию.
Heads-up Обработчики мыши вообще не помогают пользователям клавиатуры. Нужна активация с клавиатуры (Enter и Space) и членство в порядке табуляции — поэтому переизобретать кнопку почти всегда не стоит.
Викторина
Completed
Вы вставляете сообщение об ошибке в div с role=alert в том же рендере, где этот div впервые монтируется. Зрячие видят его; многие пользователи screen reader ничего не слышат. Почему?
Heads-up role=status — вежливая (polite) и ждёт паузы, что подходит для несрочных обновлений. Ошибки заслуживают assertive role=alert; здесь баг в том, когда регион существует, а не в выборе роли.
Heads-up Любой элемент может быть live-регионом. Ограничение в том, что он должен присутствовать до изменения контента, чтобы изменение было замечено, а не регион появился уже заполненным.
Heads-up Они озвучивают изменения внутри уже существующего live-региона. Сбой — в монтаже региона и его текста за один проход, так что наблюдать нечего.
Викторина
Completed
Форма полагается полностью на нативную constraint validation (required, type=email, pattern). Затем команда добавляет e.preventDefault() ради кастомных сообщений и асинхронных проверок. Какую ответственность они только что унаследовали?
Heads-up preventDefault полностью подавляет нативный UI валидации, включая автоматический фокус, прокрутку и пузырёк. С этого момента поведение focus-on-first-invalid переизобретать вам.
Heads-up Нативные фокус, прокрутка и пузырёк ошибки перестают срабатывать, как только вы перехватываете submit. Вашей ответственностью становится поведение, а не только стилизация.
Heads-up pattern больше не управляет никаким UI после preventDefault. Пользователи screen reader теперь зависят от вашего region с role=alert, aria-invalid и aria-describedby плюс перемещения фокуса — всё это нужно добавить.
Викторина
Completed
Дизайну нужен стилизованный дропдаун, который нативный select не повторяет визуально. Какая реализация — выбор по умолчанию для senior, и почему?
Heads-up Наполовину построенный role=listbox хуже нативного select, который он заменяет: стрелки, type-ahead, Escape/Home/End и aria-activedescendant отсутствуют, поэтому для клавиатуры и AT он недостижим или сломан.
Heads-up Фокус, значение и видимый виджет расходятся; фокус клавиатуры попадает на невидимый контрол, а мышь видит фейковый. Вы получаете стоимость поддержки обоих с корректностью ни одного.
Heads-up У div нет role, его нет в порядке табуляции и у него нет поведения с клавиатуры, поэтому он невидим для screen reader и недостижим клавиатурой. Это классический тихий сбой WCAG 1.3.1 / 4.1.2.
Итог
Сквозная линия — одно дерево решений: каждому контролу нужно программно связанное имя (настоящий label, а не placeholder); ошибки должны жить в уже существующем live-регионе и быть привязаны к полю через aria-invalid + aria-describedby; на неудачном submit нужно переместить фокус на первое невалидное поле, а не просто прокрутить; нативные элементы несут role, фокусируемость и обработку клавиатуры, которые нельзя полностью воспроизвести; и как только вы делаете preventDefault, вы наследуете ответственность за фокус и озвучивание, которую браузер брал на себя бесплатно. К виджетам на ARIA обращайтесь в последнюю очередь и только когда нативный элемент действительно не справляется.