Не все посетители сайта пользуются мышью или сенсорным экраном — часть людей перемещается по странице исключительно с клавиатуры, будь то по личному предпочтению, из-за ограничений по здоровью или просто потому, что мышь в моменте недоступна. Хороший сайт остаётся полностью рабочим и в этом сценарии.
Клавиша Tab перемещает фокус между интерактивными элементами страницы — ссылками, кнопками, полями форм — в том порядке, в котором они идут в HTML-коде. Именно поэтому логичный порядок элементов в разметке важен не только для структуры, но и для удобства навигации без мыши.
Видимый индикатор фокуса — рамка или подсветка вокруг элемента, на котором сейчас находится фокус клавиатуры, — обязателен для комфортной навигации. К сожалению, его нередко убирают из чисто эстетических соображений через outline none, даже не задумываясь, что взамен не предложено вообще ничего.
Если стандартная рамка фокуса действительно не вписывается в дизайн, её можно заменить на кастомную стилизацию — например, изменение цвета фона или тени вокруг элемента, — но убирать индикатор фокуса совсем без всякой замены не стоит ни при каких обстоятельствах.
Интерактивные элементы, реализованные не через нативные кнопки и ссылки, а через div или span с обработчиком клика, по умолчанию вообще не попадают в последовательность табуляции и не реагируют на клавишу Enter — их приходится отдельно делать доступными для клавиатуры, что заметно сложнее, чем изначально использовать подходящий тег.
Порядок обхода элементов Tab можно скорректировать через атрибут tabindex, но злоупотреблять этим не стоит — естественный порядок, соответствующий структуре разметки, почти всегда понятнее для пользователя, чем искусственно заданная последовательность.
Подробнее о принципах доступной навигации с клавиатуры рассказано в разделе про клавиатурную навигацию на MDN.
