Перехід до основного вмісту

дивитись опис критерію у WCAG 2.1

Це – початок основного вмісту сторінки. Нагорі можете побачити шапку сайту, яка містить чимало посилань. Необхідно дати можливість швидко "обійти" всі ці посилання (тобто перейти одразу до основного вмісту) користувачам, які:
• використовують клавішу Tab;
• або використовують клавіші стрілка вниз і стрілка вгору з одночасно увімкненим скрінрідером.

Для цього можна використати спеціальний елемент (далі – посилання), який зможете побачити, якщо оновите цю сторінку і одразу почнете натискати клавішу Tab. У коді сторінки це посилання розташоване одразу після тега <body>, що гарантує доступ до нього після першого натискання клавіші Tab.

Такий механізм легко впроваджується у 2 кроки.

Крок 1

Необхідно створити і налаштувати зовнішній вигляд посилання. Нижче показано приклад CSS і HTML коду для цього:

CSS

.link-skip {
    position: absolute;
    top: 100px;
    left: 16px;
    padding: 0px;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.link-skip:focus {
    position: fixed;
    background-color: #fff;
    color: #5f4ee4;
    font-weight: bold;
    width: auto;
    height: auto;
    overflow: initial;
    display: inline;
    padding: 8px;
    outline: 3px solid #5f4ee4;
    z-index: 1000;
}

HTML

<body>
    
    <a class="link-skip" href="#main-content-start">Перейти до головного вмісту</a>
    
    ...
</body>

Крок 2

Відповідно, в місці, де на вашому сайті починається основний вміст, першому елементу необхідно встановити атрибут id з таким самим значенням, що вказане в атрибуті href вищезгаданого посилання. В даному випадку це значення main-content-start. Таким чином, натискання по посиланню буде скролити сторінку до початку основного вмісту.

Нижче показано приклад HTML-коду, що формує такий елемент основного вмісту:

<div id="main-content-start">
<h1>Перехід до основного вмісту</h1>
...
</div>

Додаткове пояснення

Такий механізм дозволяє користувачам, які з тих чи інших причин змушені користуватися лише клавіатурою, уникнути постійного "прогортання" усіх посилань в шапці при відкритті кожної наступної сторінки сайту. На зображенні нижче показано, який шлях фокусу проходить користувач за відсутності такого механізму:

Зображено верхню частину сайту, на якій червоними стрілками показано, в якому порядку фокус відвідує елементи.

На наступному зображенні показано, який шлях зможе пройти користувач за наявності такого механізму:

Зображено верхню частину сайту, на якій зеленими стрілками показано, як фокус переходить від спеціального посилання до основного вмісту.