Accessibility of Smooth Scrolling

Whatever technology you use for smooth scrolling, accessibility is a concern. For example, if you click a #hash link, the native behavior is for the browser to change focus to the element matching that ID. The page may scroll, but the scrolling is a side effect of the focus changing.

If you override the default focus-changing behavior (which you have to, to prevent instant scrolling and enable smooth scrolling), you need to handle the focus-changing yourself.

Scroll Me

HTML Code:

<a class=”scroll” href=”/#how-it-works”>click me for scroll</a>

jQuiery Code:

$(‘a.scroll’).smoothScroll({
afterScroll: function(options) {
$(options.scrollTarget).find(‘input’)[0].focus();
}
});

To quickly and smoothly scroll the page to the destination content, but take a short time to do so.  This time allows the user to see what content is being skipped over, giving her a clear sense of her current location. You’ve probably seen this in action. Often, sites have a small scroll to top link on some pages. When you click that link, the page quickly but smoothly scrolls to the top instead of instantly rocketing you there. The effect is aesthetically pleasing and ensures that you don’t lose your bearings.

Smooth scrolling vs instant jumping is the difference between using a baseball and a bullet to hit a close target. Both have the same effect – hitting the target. However, the baseball can be visually tracked by an observer and the bullet cannot. With the baseball, the observer understands the starting point, the ending point, and the path taken; with the bullet, the ending point is the only clue to the path taken.

More Details please visit here

Leave a Reply

Your email address will not be published. Required fields are marked *

Get In Touch

rony10320578

websdevusa@gmail.com

ronykayes@gmail.com

1200 18th St NW #700, Washington, DC 20036, USA

Get Started

Need your free quote? Drop us a note or give us a mail; we’re happy to answer all your questions.

Get A Quote