Доступность клавиатуры на сайтах прокрутки

Question

Пожалуйста, посмотрите на этот сайт -> http://vanityclaire.com/ (на случай, если он изменится в будущем, это сайт с боковой прокруткой) и попробуйте просмотреть с помощью TAB (не нажмите ввод, просто вкладка). После того, как вы добавили все вкладки в первом разделе, вы заметите, что когда фокус переключается на другой раздел, он перепутался: вы видите половину двух разделов.

Как сделать так, чтобы пользователь мог просто перемещаться по разделу?

Я знаю, что могу установить свойство размытия для последнего элемента (будь то привязка или ввод), чтобы фокусировался на первом элементе меню ... Таким образом, пользователь не будет переходить на другой раздел ... НО это означало бы, что пользователь будет «пойман в ловушку» на странице и не сможет, например, переключаться между адресной строкой.

Есть ли способ отправить фокус в адресную строку? Там нет window.locationbar.focus(); или чего-то подобного, и $(windows).focus(); тоже не помогло ...

Кто-нибудь может придумать хорошее решение этого вопроса?

---

Обратите внимание, что я не хочу запрещать пользователю перемещаться с помощью клавиш ... Я просто хочу, чтобы сайт не развалился из-за этого (что я могу придумать, как решить) и чтобы пользователь не попал в ловушку ...

Заранее спасибо, ребята,

  Óscar

Answer 1

Для чего бы это ни стоило, с этим типом боковой прокрутки есть куча других связанных проблем: если окно пользователя достаточно велико, или если оно уменьшено, или щелкните фон и перетащите вправо, остальные страницы может стать видимым. Кроме того, поскольку они «видны» (просто прокручиваются), программа чтения с экрана, скорее всего, за один раз прочитает всю страницу, а не только текущую страницу.

Вот подход, который может решить все эти проблемы: установите для других областей страницы либо отображение: нет, либо видимость: скрытые, пока они не понадобятся. (видимость: скрытый, вероятно, лучше всего подходит для этого случая, так как он не влияет на макет.) Это предотвращает их случайную прокрутку в вид, предотвращает их чтение с помощью программы чтения с экрана и предотвращает их вкладку. Вкладка будет просто пропущена, а это именно то, что вам нужно.

Таким образом, чтобы перейти от области A к области B, сделайте области от A до B видимыми, прокрутите и переместите фокус в область B, а затем сделайте все области, кроме B, невидимыми.