Part I: Scroll Animations, the Golden Ratio, White Space — and the Accessibility That Makes It Work

Innovation in web design isn’t just about beauty. It’s about experience — for everyone.

Today’s most compelling websites combine visual storytelling with timeless design principles and inclusive accessibility practices.

A recent innovative design trend winning recognition and awards is the scroll animation. This involves taking the user on a journey down the page, where sections have animated elements waiting to be triggered. If done well, it enhances the message of the page, while also pushing the boundaries of static web scrolling. This type of design is exploring the traditional limitations of scroll, by building an experience around that predictable user action.

However, these beautiful experiences must follow strict accessibility guidelines, and this commitment to inclusion, such as proper use of negative space, line heights, aria’s and other standards, will only enhance the wonder of it all.

An example of a website that was nominated in Awwwards (they are the awards that recognise and promote the talent and effort of the best developers, designers and web agencies in the world) for design, is Jamarea . It has recently been awarded ‘Site of the day’, with a score of 7.51/10. The beauty of this site is missing important accessibility features that would help bring that beauty to users of assistive technology. Here is a little breakdown:

• Scroll animation timing

  If the content reveals only after a scroll-triggered animation completes, users with motor impairments or screen readers may miss critical information. Content should be present in the DOM from the start, even if hidden visually, and must be available to assistive tech.

• Reduced Motion Respect

  Scroll animations that involve fast, parallel or horizontal slide-ins must respect users who have prefers-reduced-motion: reduce enabled in their system settings. Wrap animation triggers with a check for reduced motion and disable transitions accordingly

• Focus handling

  Animated sections often fail to shift focus programmatically or allow keyboard users to enter/exit scroll-locked content. This breaks tab order and can lead to focus traps. Ensure each scroll section is focusable and has a logical tab index or ARIA role.

• Visual Orientation and Landmarks

  If scrolling introduces visual shifts, users with low vision or cognitive challenges may lose track of their position. Use clear heading hierarchy, skip links and visible focus states.

Under the Hood

From a software engineering perspective, implementing scroll animations without thoughtful attention to mobile, is like building a ship without sails. The animations can hog the main thread on mobile, using costly operations so that the scroll is janky and uncomfortable for the user.

Take ToreBenson's website as an example. Personally, I enjoyed the beautiful swinging animation on scroll. It was a truly innovative delight on desktop. However, on closer inspection and some mobile testing, it is clear that it falls dreadfully short in terms of speed, user experience and accessibility.

It could use intersectionObserver over manual scroll events and prefer CSS transforms over layout altering properties such as top and margin. It could ensure animation values are set with vw, vh or clamp() to maintain harmony across screen sizes. It could modularise the scroll behaviour into isolated testable functions or components using React or Vue. If the content is rendered statically and the animations are then applied, the page is still readable and navigable without Javascript.

Finally, the most innovative websites today use scroll animation responsibly to elevate the journey, apply the Golden Ratio for a natural rhythm that feels human, and embrace white space that breathes — while complying with WCAG 2.1 guidelines for spacing and readability. This intersection of aesthetics and accessibility isn’t just good design — it’s great UX. It tells users: this space was built with you in mind.

Head over to 'Part II: The Golden Ratio: Harmony That Feels Right — and Works Responsively', to read about this beautiful mathematical ratio. Or, 'Part III:White Space: Not Just Stylish — Necessary' for a deeper look at Apple's famously clean aesthetic!