Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

Long home pages and smooth scroll
Thoughts on emerging practices

I took a few days at the end of August to revamp our web site, using Bootstrap 3.3.7 (V4 is coming). I appreciated Heydon's suggestion to go with flex instead of "a whole tonne of grid framework boilerplate " but my clients are on Bootstrap.

I am experimenting with a scrolling home page. I think mobile users are more likely to scroll than open a hamburger.

Smooth Scroll

There is a proposal for WCAG 2.1 to require a mechanism to disable all user initiated animations, (i.e., smooth scroll). Dennis Boudreau also did a talk on emerging web animation patterns discouraging their use. Some people are affected by on screen movement but we don't know the extent of the problem, how much movement is provocative, or whether there are predictable tolerance thresholds.

Smooth scrolling for more than 3 pagedowns creates a lot of screen noise in the viewport, which I think is more likely to be provocative than scrolling past a couple of pages. I put smooth scroll on the first 3 items of our home page to help users know they can swipe freely, but left it off of items further down the page.

I may remove the smooth scroll, add a pause button, or leave the smooth scrolling for up to 3 screens. There are no studies that I know of, so this experience may help inform me. Try out our home page smooth scroll on our home page by activating the SERVICES or ABOUT links.

What do you think?

Should WCAG require a mechanism to stop smooth scroll and other effects like fly in, bounce out, etc. or is that overly perscriptive on authors. Will forcing athors to place a disable button on expensive real estate "above the fold" cause push back?

Feel free to comment on Twitter @davidmacd

Author information:

David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.




CONTACT US

For a quote or just to chat about your organization's needs


EMAIL

help at can hyphen adapt dot com, (spoken phonetically to trick spam bots)

PHONE

six one three, eight zero six, nine zero zero five

SOCIAL MEDIA