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

#tabs #scroll #accessibility

#вкладки #прокрутка #Специальные возможности

Вопрос:

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

Как мне сделать так, чтобы пользователь мог просто переходить по разделам?

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

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

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


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

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

   Óscar
 

Ответ №1:

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

Однако вот подход, который может решить все эти проблемы: установите для других областей страницы значение либо display: none, либо visibility: hidden, пока они не понадобятся. (видимость: скрытая, вероятно, лучше всего подходит для этого случая, поскольку это не влияет на макет.) Это предотвращает их случайное прокручивание в поле зрения, не позволяет программе чтения с экрана читать их и не позволяет им переходить на вкладки. Табуляция будет просто переходить сразу, что именно то, что вы хотите здесь.

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

Комментарии:

1. Это невероятно умно!!! Я провел все утро, пытаясь найти решение, и вы исправили не только мою текущую проблему, но и будущие! Большое вам большое спасибо! : D