CODEWITHSUNDEEP
accessibilitysmooth-scrolling
WebDeg Brian
WebDeg Brian

Reputation: 832

Smooth Scrolling while navigating with 'tab' key

How to force browsers to scroll pages smoothly to the focused element while navigating with 'tab' key?
Note: I've looked this up but haven't found the solution yet.

Upvotes: 2

Views: 2112

Answers (2)

GrahamTheDev
GrahamTheDev

Reputation: 24905

As this as marked as accessibility the simple answer is don't.

You may not like that the page jumps about but you have to consider the opposite side effect of changing scrolling behaviour.

What if your user is partially sighted and has the zoom set to 300% on your page. A tabble item such as a link may be many many pixels off screen when zoom levels are so high, having to wait for it to scroll into view will only be frustrating.

Additionally for WCAG 2.1 (applies to level AA I think) guidelines you should avoid animation of any kind or have the option for users to switch it off, you are adding a lot of extra work in needing a setting to remove this scrolling directly within your site. This is because certain cognitive impairments make animations far more jarring and distracting than a simple jump and also that is expected behaviour - changing expected behaviour can also lead to disorientation for people with cognitive impairements.

Another thing to consider is that to achieve this you would have to intercept the tab key - this is a terrible idea as screen readers rely heavily on this key in different scenarios (tabbing in a list of items tabs down to the next item in some screen readers, intercepting the tab key would result in unexpected behaviour.)

Don't worry about it, disabled and able bodied users will thank you for leaving the tab key well alone (as I hate when people slow my scroll speed)

If you did want to do this you would intercept the keypress of the tab key and manually cycle to the next tabbable element - but please don't do it!!

You would also (for accessibility and WCAG 2.1) have to then add an option to remove this functionality within the site accessibility settings (if you have them).

Upvotes: 4

slugolicious
slugolicious

Reputation: 17553

Smooth scrolling is a browser setting (chrome > about:flags, firefox > about:preferences, ie > tools>options>advanced). You might be able to change the browser's setting programmatically, but that would seem like a security risk that browsers would block. It's a personal setting. Some users like it and some don't. If you forced it upon a user that didn't like it, that would not be nice.

Upvotes: 1

Related Questions