Как реализовать навигацию без мышки?

Question

[Ragtime Kitty]

Каким образом в вебе можно реализовать управление с помощью стрелок? То есть как на телевизорах, приставках, консолях или в любом другом интерфейсе, где для управления используются пульт/геймпад со стрелками.

Как перемещать курсор? Как определять направление и на каком элементе должен быть фокус после нажатия стрелки?

Есть примеры или инфа где почитать про это?

Answer 1

[Владимир Солнцев]

a11yproject.com/posts/navigate-using-just-your-keyboard
Вот тут близко к вашей теме.
А как-то двигать курсор напрямую и кода в рамках браузера, нельзя.
Можно попробовать скрыть настоящий курсор, создать блок-курсор, повесить на страницу слушатели событий и по этим событиям двигать этот блок как настоящий курсор.

index.html
<div class="custom-cursor"> </div>

style.css
body {
cursor: none;
}
.custom-cursor {
// стили кастомного курсора
}

scripts.js
class CustomCursor { ... } 
// реализация поведения кастомного курсора. Должен уметь, наводиться на 
//другие элементы (hover), кликать и перемещаться по странице.

Comments

[Ragtime Kitty]

Это не совсем то, что я имею ввиду, добавила небольшой пример.

Answer 2

[profesor08]

Дополнительно к слушателю нажатий на кнопки, задай элементам tabIndex чтоб можно было переключаться по ним с помощью TAB.

Comments

[Ragtime Kitty]

Дополнительно круто, но как основное перемещение делается, если интерфейс сложный и двигать курсор можно в любом направлении?

[profesor08]

Ragtime Kitty, я бы для каждого элемента организовал бы связи, чтоб после нажатия кнопки, на основе связей, принималось решение, куда переключать фокус.
Для примера, если фокус на кнопке apps, то по стрелке вверх, фокус перейдет на "fake fhones", если вниз то на neflix, вправо то на панель где deezer с выделением первого.

[Ragtime Kitty]

profesor08, в этом и вопрос: как эти связи можно сделать более-менее автоматически.

[profesor08]

Ragtime Kitty, никак, браузер не умеет читать мысли, он тупой, ему наго говорить прямо