Плавная прокрутка при навигации с помощью клавиши «Tab»

Как заставить браузеры плавно прокручивать страницы до сфокусированного элемента при навигации с помощью клавиши «таб»?
Примечание. Я просмотрел этот вопрос, но пока не нашел решения.


person WebDeg Brian    schedule 03.07.2018    source источник
comment
Попробуйте stackoverflow.com/a/24739173/923560 . По состоянию на май 2020 года он, по-видимому, поддерживает плавную прокрутку как для вкладок, так и для перехода к идентификатору hrefs, по крайней мере, в Chrome.   -  person Abdull    schedule 20.05.2020


Ответы (2)


Поскольку это помечено как доступность, простой ответ - нет.

Вам может не нравиться, что страница прыгает, но вы должны учитывать противоположный побочный эффект изменения поведения прокрутки.

Что делать, если ваш пользователь слабовидящий, а масштаб на вашей странице установлен на 300%. Элемент таблицы, такой как ссылка, может быть на много пикселей за пределами экрана, когда уровни масштабирования настолько высоки, что необходимость ждать, пока он прокрутится, будет только раздражать.

Кроме того, для рекомендаций WCAG 2.1 (я думаю, относится к уровню AA) вам следует избегать анимации любого рода или иметь возможность для пользователей отключать ее, вы добавляете много дополнительной работы, требуя настройки для удаления этой прокрутки непосредственно в вашем сайт. Это связано с тем, что определенные когнитивные нарушения делают анимацию гораздо более резкой и отвлекающей, чем простой прыжок, а также это ожидаемое поведение — изменение ожидаемого поведения также может привести к дезориентации людей с когнитивными нарушениями.

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

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

Если бы вы действительно хотели это сделать, вы бы перехватили нажатие клавиши табуляции и вручную перешли бы к следующему элементу с вкладками, но, пожалуйста, не делайте этого!!

Вам также необходимо (для специальных возможностей и WCAG 2.1) добавить возможность удаления этой функции в настройках специальных возможностей сайта (если они у вас есть).

person Graham Ritchie    schedule 05.07.2018
comment
Благодарю вас! Очень хороший и хорошо структурированный ответ :) - person WebDeg Brian; 21.07.2018

Плавная прокрутка — это настройка браузера (chrome > about:flags, firefox > about:preferences, т.е. > инструменты > параметры > дополнительно). Возможно, вы сможете изменить настройки браузера программно, но это может показаться угрозой безопасности, которую браузеры заблокируют. Это личная установка. Некоторым пользователям это нравится, а некоторым нет. Если бы вы навязывали это пользователю, которому это не нравилось, это было бы нехорошо.

person slugolicious    schedule 03.07.2018
comment
Извините, но я думаю, вы не поняли мой вопрос. Я пытался сказать, что при нажатии «вкладки» для навигации по веб-странице страница плавно прокручивается к сфокусированной части. Обычно он просто переходит к сфокусированному/активному элементу, что довольно раздражает. - person WebDeg Brian; 04.07.2018
comment
Вы правы, я думал, вы спрашиваете, как заставить плавную прокрутку из вашего приложения. Таким образом, у вас есть плавная прокрутка в любом браузере, который вы используете, и нормальная страница вверх / вниз работает плавно, верно? Но когда вы переходите от элемента к элементу (будь то ссылка, кнопка или любой другой интерактивный элемент), если элемент, к которому вы переходите, находится за пределами экрана, он прокручивается в поле зрения, но не плавно? Я это вижу в файрфоксе, т.е. и в хроме на пк. Извините, я не знаю, как это исправить, кроме как сообщить о проблеме во все браузеры. Работает ли это в сафари на Mac? - person slugolicious; 04.07.2018
comment
Я еще не тестировал свое приложение в Safari, но думаю, что кусок кода Javascript подойдет. - person WebDeg Brian; 05.07.2018