Skip-to-content link

Skip-link дозволяє користувачам клавіатури та screen-читачів пропустити повторювану навігацію й перейти прямо до main.

Код

<a href="#main" style="position:absolute;left:-9999px;top:0;background:#1f6feb;color:#fff;padding:0.6rem 1rem;z-index:1000">Перейти до основного контенту</a>
<style>
  a[href="#main"]:focus { left: 0; }
</style>
<main id="main">...</main>

Попередній перегляд

Пояснення

Посилання приховане за екраном (left:-9999px) доти, доки не отримає фокус Tab'ом — тоді воно з'являється у верхньому лівому куті.

id="main" повинен бути на реальному <main> елементі сторінки.

Схожі інструменти

Тег <main>

Призначення тегу <main>: унікальний основний вміст сторінки, без повторюваних елементів.