А ваш сайт

доступен

с клавиатуры?

Глафира Жур,

Accessibility Lead в SpurIT

Глафира Жур

Twitter: @glafirazhur

Accessibility Lead в

#GDE for Web, #WTM

Кому нужна доступность с клавиатуры

WCAG: 2.1.1 Keyboard - Benefits

Незрячим пользователям
Пользователям с ограничениями моторики и мобильности
Слабовидящим пользователям
Ситуативно (нет мыши)

@glafirazhur

mos.ru

@glafirazhur

Убираем запрет отображения фокуса

@glafirazhur

Отображаем фокус только с клавиатуры

/* дефолт */
a:focus {
  outline: 2px solid black;
}

/* если с мыши */
a:focus:not(:focus-visible) {
  outline: none;
}

/* если с клавиатуры */
a:focus-visible {
  outline: 2px solid black;
}

Can I Use :focus-visible

@glafirazhur

:focus-visible polyfill

Добавляем Skip Link

<a class="skiplink" href="#main">
	Перейти к основному контенту
</a>

<style>
    .skiplink {
        position: absolute;
        top: -200px;
        left: 2px;
        transition: top 0.2s;
    }

    .skiplink:focus {
        top: 20px;
    }
</style>

Skip Navigation Link

@glafirazhur