Скрыт визуально до получения фокуса
Скрывайте ссылку от пользователей мыши и показывайте её при нажатии Tab.
«Скрыт визуально до получения фокуса» — бесплатный урок Web Accessibility Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Web Accessibility Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Web Accessibility Academy содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
The Design Tension
Skip links are vital, yet many teams worry they clutter the layout. The classic answer: hide it visually, but keep it ready for keyboard users.
Never display none
Do not reach for display none or visibility hidden. Those remove the link from the accessibility tree, so no one can focus it.
Visually Hidden, Still There
The goal is a visually hidden state: invisible on screen, but fully present for keyboards and screen readers.
The Clip Pattern
A common trick shrinks the link to one pixel and clips it. It stays in the DOM and focus order, just out of sight.
.skip-link { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }Reveal It on Focus
The magic is the focus state. When Tab lands on the link, your CSS restores its size and pulls it back into view.
.skip-link:focus { width: auto; height: auto; clip: auto; top: 0; }Why focus, Not hover
Use focus, never hover. A keyboard user cannot hover, so a hover-only reveal leaves the link permanently invisible to them.
Make It Clearly Visible
When revealed, give it a solid background and padding. It should look like an obvious button, not faint text the user might miss.
Keep the Focus Outline
Do not strip the focus outline on the revealed link. Users need to see exactly where their focus has landed.
Mind the Position Math
Often the hidden link sits offscreen with a negative top, then slides to top zero on focus. The slide makes the reveal feel deliberate.
A Reusable Utility
This visually hidden pattern is so useful that most teams keep it as a shared utility class for any sr-only content.
Test the Reveal
Press Tab from a fresh load. The skip link should pop into view immediately. Tab away and it should vanish again. ✅
Quick Check
Which approach correctly hides a skip link until needed?
Recap
Hide the skip link with clipping, never display none, and reveal it on focus with a clear outline. Invisible until it is needed. 🎯
Часто задаваемые вопросы
Урок «Скрыт визуально до получения фокуса» бесплатный?
Да — полный текст урока «Скрыт визуально до получения фокуса» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Accessibility Academy, подпишись на CoddyKit PRO. Курс Web Accessibility Academy содержит 4 уроков всего.
Чему я научусь в уроке «Скрыт визуально до получения фокуса»?
Скрывайте ссылку от пользователей мыши и показывайте её при нажатии Tab. Ты практикуешь Web Accessibility Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Accessibility Academy?
Предыдущий опыт не требуется. Web Accessibility Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Скрыт визуально до получения фокуса»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Accessibility Academy?
Да. Каждый урок Web Accessibility Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Зачем нужен переход к основному содержимому
- Создание действительно работающей ссылки пропуска
- Скрыт визуально до получения фокуса
- Несколько ссылок пропуска для больших страниц