How do I make an accessible, performant hero section?

A hero section appears as the topmost UI block of almost all websites and other digital products to welcome users with a good first impression. Since it’s the first visually prominent UI segment that the user sees, all users should be able to see it quickly and read, understand, and choose desired actions with less effort.

Every user is unique and has different abilities, so you should design your hero section with accessibility in mind to offer the same high-quality UX for all users, ethically considering their abilities and special circumstances. Moreover, you should optimize its performance to load it fairly fast on low-end devices and slow network connections to create a good first impression, regardless of the user’s device setup.

Accessibility-focused UX design and improving perceived performance are two major strategies to make your hero section accessible and performant for all users.

Designing for accessibility

Adhering to the following accessible design strategies makes your hero section suitable for all users, regardless of their abilities and special circumstances:

• Contrast and readability — Make sure that heading, supporting copy, CTA labels, and all other text elements have enough contrast, don’t blend with background layers, and use clean, readable, eye-comfortable typography
• Keyboard navigation — Support users who prefer keyboard input by implementing tab navigation and tab highlight in all interactive hero elements
• Motion sensitivity — Not all users love visually striking animations. Generally, avoid aggressive animations for better product quality and performance, and respect the prefers-reduced-motion setting if you use fast motions with animations
• Video backgrounds — Make sure to let users enable captions if your video background has sounds, and implement controls to loop or pause the video as they wish to see important details in the video calmly

Designing for perceived performance

The LCP (Largest Contentful Paint), the render time of the largest image, text block, or video in the above-the-fold area, is an effective measure to identify the perceived performance of your hero section.

Over 200k developers and product managers use LogRocket to create better digital experiences

Learn more →

The following design strategies help you keep LCP below the recommended 2.5 seconds and make key hero section elements quickly visible to create a good first impression, regardless of the user’s hardware capabilities and network conditions:

• Lightweight videos — Use a quality, lightweight, short, looping video. Using a 720p MP4/WebM video that weighs less than 1.5MB is ideal for good perceived performance
• Lightweight images — Use a quality, lightweight, web-optimized image format like WebP or PNG. Keeping the file size under 250KB is performance-friendly
• Lightweight, fairly fast animations — Use lightweight animations to avoid an initial CPU/GPU usage spike that puts a strain on low-end devices. Play initial intros fairly fast without affecting accessibility, so users can feel that the hero section loads fast
• Perceived performance tactics — Make the hero placeholder block, CTAs, and text blocks instantly visible, use skeleton loading, progressive loading, blurred backgrounds, and other perceived performance tactics to keep the user engaging til the hero section gets fully loaded

Collaboration with developers

The product design the UI/UX team creates isn’t the final product — developers build the final product after product handoff, so designers and developers should effectively communicate to improve accessibility and performance factors for creating the best hero section for the product:

• Specify formats early — Agreeing on a specific video/image format early helps developers prepare the hero section foundation early, and allows designers to deliver the final multimedia files smoothly
• Share motion and fallback states — Clearly specifying motion details, fallback states, along with the final high-fidelity prototype, is an effective way to re-create dynamic hero sections without missing accessibility features
• Performance audits on staging — Designers can request performance audits on staging environments to collaboratively fix perceived performance issues before users notice them in the production version

Accessibility and performance checklist

Reviewing your hero section design specification and actual implementation accordingly, using the following practical accessibility and performance checklist, helps you make your hero section well-accessible and performant for all users:

• Hero section generally adheres to WCAG 2.1 AA recommendations (refer to text contrast, size, orientation, etc. guidelines)
• The hero section uses motion optional, along with static core hero section elements
• LCP is less than 2.5 seconds (the hero section loads within 2.5 seconds on average under multiple devices)
• Hero video is muted by default, and users can easily unmute it if needed
• The Primary CTA is focusable, instantly gets rendered, and is visually prominent
• The hero section doesn’t shift layout when its assets are progressively getting loaded

Should hero sections have video backgrounds?

Using a video background for your hero section is optional, but it drastically improves aesthetics and effectiveness in some scenarios. Decide whether or not to use the following pros and cons:

Conclusion

Accessibility in hero sections makes your design inclusive and ready for everyone, and a performance-prioritized design makes hero sections instantly visible, preventing user confusion and frustration. Accessible, fast hero sections create trust even before users act, so making your hero section accessible and performant is crucial.

LogRocket helps you understand how users experience your product without needing to watch hundreds of session replays or talk to dozens of customers.

LogRocket's Galileo AI watches sessions and understands user feedback for you, automating the most time-intensive parts of your job and giving you more time to focus on great design.

See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.