Перемещение фокуса к первой ошибке
Сразу направляйте пользователей к месту, которое нужно исправить.
«Перемещение фокуса к первой ошибке» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Lost After Submit
A user submits, the page shows errors at the top, but focus stays on the button. They have no idea anything failed. 😕
Send Focus to the Problem
On a failed submit, move focus to the first invalid field. The user lands exactly where the fix begins, no hunting required.
Use focus in JS
Find the first failing control and call focus() on it. Now both keyboard and screen reader users start at the right place.
const first = form.querySelector("[aria-invalid='true']");
if (first) first.focus();Read Name, Type, Error
When focus lands there, the screen reader announces the field's name, that it is invalid, and its described error all at once.
First, Not Random
Always target the first error in document order. Jumping to a later field skips problems the user must still address.
Do Not Just Scroll
Scrolling the error into view helps the mouse, but keyboard and screen reader users need real focus moved, not just pixels shifted.
A Summary Box Helps
For many errors, focus an error summary at the top first. List each problem as a link that jumps to its field.
<div tabindex="-1" id="errors">
3 errors found
</div>Make the Summary Focusable
A heading or div is not focusable by default. Add tabindex="-1" so your script can move focus to it programmatically.
Link Errors to Fields
Inside the summary, each item is a link to the field's id. Activating it sends focus straight to the broken input.
<a href="#email">Email is required</a>Avoid Stealing Focus Early
Only move focus in response to the user's submit, never on every keystroke. Yanking focus mid-typing is jarring and unwelcome.
Confirm the Recovery
After the user fixes everything and resubmits, move focus to a success message so they hear that it finally worked.
Quick Check
Where should focus go when a form submit fails?
Recap
On failure, move focus to the first invalid field or a focusable error summary, and to a success message once it passes. ✅
Часто задаваемые вопросы
Урок «Перемещение фокуса к первой ошибке» бесплатный?
Да — полный текст урока «Перемещение фокуса к первой ошибке» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Перемещение фокуса к первой ошибке»?
Сразу направляйте пользователей к месту, которое нужно исправить. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Перемещение фокуса к первой ошибке»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Связь ошибок с полями с помощью aria-describedby
- Обозначение недопустимого состояния с помощью aria-invalid
- Перемещение фокуса к первой ошибке
- В строке, при потере фокуса или при отправке: время имеет значение