On the homepage of your VCC, a "hero banner" section is added underneath the primary navigation bar. If you use the Events module, you can optionally display a calendar overlay in this area.

Newer clients only have the option to add a single banner to this area. Older clients still have the option to add multiple slides, which creates a sliding carousel. However, we encourage the use of just 1 banner for the homepage hero banner and have a prominent in-app warning that is displayed when adding or editing additional banners.

As we no longer support this functionality for new clients, we have opted not to make accessibility enhancements to the carousel. However, we made accessibility, visual, and responsive design enhancements when only a single banner is displayed.

If you are using a banner, ensure that you have entered alt text for the image if it's not used in a decorative way. Atmospheric, decorative images do not require alt text. However, any images that contain text should have that information repeated in the alt text area so that visitors using assistive technology can access the same information. If you use the text boxes to overlay text on your image, that content should not be repeated in the alt text field.

If you are using multiple banners in a carousel, consider removing Banner 2, Banner 3, and/or Banner 4 so that you are using just a single banner.

Learn more about editing your homepage banners: Add a front page banner

During our WCAG 2.1 AA upgrade, we performed significant research on carousels. We discovered that in many cases, carousels were both inaccessible and ineffective. Should I use a carousel? provides a great overview of these issues, including how statistics from one school (not a uConnect platform) revealed that "1% clicked a feature. Of those, 89% were on the item in the first position.” That’s just 1% of clicks for the most significant object on the home page!

We then reviewed our uConnect clients' sites and identified some additional common problems, such as text-heavy images without alt text making the content invisible to screen readers, and "carousel dots" (the navigation between slides) overlapping with content on mobile devices when clients had optimized their banners for desktop instead.

To solve for these and other issues, we’ve turned off the carousel functionality and use a single banner instead for all new VCC instances, which is better optimized for accessibility and the mobile experience. We also added a few thoughtful styles to make added-text content more readable on mobile.

For existing sites, we didn't want to suddenly remove functionality that our clients were actively using. Multi-banner carousels can still be used, but we added an in-app warning about the accessibility considerations when clients edit their banners.

Being able to recognize and address a potential problem spot like this instead of waiting on an accessibility report is a huge win for our clients, and being warned rather than suddenly blocked means that clients can adjust their content strategy on their own timelines.