Перемещение фокуса после действия
Перемещайте фокус туда, где он понадобится пользователю дальше.
«Перемещение фокуса после действия» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
Focus Is the User's Cursor
For keyboard and screen reader users, focus is where they are on the page. After an action, you decide where that point lands next.
Why Move Focus at All
When a button reveals new content, focus often stays put and the user never learns anything changed. Moving focus brings them to the result.
The focus Method
You move focus in JavaScript by calling element.focus() on the target you want the user to land on next.
document.getElementById('results').focus();Make the Target Focusable First
A plain div will not accept focus, so give the destination tabindex="-1" so your script can move focus to it.
<div id="results" tabindex="-1">3 matches found</div>Example: Reveal and Focus
After loading new content, show it and then send focus there so the screen reader starts reading the new region. 🔎
panel.hidden = false;
panel.focus();Focus the Heading, Not the Whole Region
Pointing focus at the new section's heading often reads best, giving the user a clear title for where they just arrived.
Deleting an Item
When the user removes a row, focus would otherwise be lost. Move it to the next item or a nearby control so they can keep going.
Avoid the Focus-to-Top Jolt
Letting focus snap back to the page top after every action is jarring. Aim it at the relevant spot instead so context is preserved.
Do Not Steal Focus Randomly
Only move focus in response to a user action. Grabbing it during background updates yanks people out of whatever they were doing.
Confirm It Worked
Test by triggering the action with the keyboard and watching the focus ring land where you intended, every single time.
One Move Per Action
Each meaningful action should result in exactly one deliberate focus move. Predictable beats clever every time.
Quick Check
You want to move focus to a freshly shown div after a button click. What must the div have?
Recap
You learned to move focus on purpose: make the target focusable with tabindex="-1", call focus() after the action, and aim for the most useful spot. ✨
Часто задаваемые вопросы
Урок «Перемещение фокуса после действия» бесплатный?
Да — полный текст урока «Перемещение фокуса после действия» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Перемещение фокуса после действия»?
Перемещайте фокус туда, где он понадобится пользователю дальше. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Перемещение фокуса после действия»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- tabindex 0, -1 и никогда не положительный
- Перемещение фокуса после действия
- Возврат фокуса после закрытия слоя
- Управление перемещаемым tabindex в виджетах