I Need an Accessible Hero

What is a hero?

A hero is a large banner area for the main page heading displayed above the fold on a webpage. Many heroes, especially on a homepage, contain prominent images, videos or animation and can also include descriptive text and a call to action. Heroes’ prominent and bold positioning make them one of the most critical pieces of a site’s user experience. A good hero invites the user to explore your site further (or even convert on the spot).

Designing and building an accessible hero experience is especially important in serving your entire user base and avoiding inadvertent obstacles before users get to know you better.

Leveraging semantics

Heroes are meant to be attention-grabbing and include large text. But it’s important to think about semantics in addition to style. Screen reader users rely on encoded heading levels to understand page organization and structure. Instead of visually scanning a page, users can jump from heading to heading.

To that end, the main content heading should be in an <h1> element regardless of font size. Smaller subheadings should not skip heading levels (e.g. <h1> followed by <h4>).

Image & text contrast

Heroes often contain a background image (or even a video) with overlaid heading text. To ensure text legibility for all users, including those with low vision or colorblindness, all overlaid text should have sufficient contrast with the background. For example, large text – 18pt or 14pt bold – should have a contrast ratio of at least 3:1 with the background color while all other text must have a contrast ratio of at least 4.5:1.

This can be trickier than it seems. For one thing, images and videos don’t have a uniform color background, which means that the text contrast needs to be checked against multiple background colors. For another, the hero image may be swapped out as the content is updated.

You can use this WebAIM contrast checker browser bookmarklet to eyedrop and test color contrasts in multiple parts of an image. However, the best solution to ensure the color contrast exceeds minimum standards in all parts of the background image is to add an additional color layer between the image and text.

This overlay can be applied over the entire image as a semi-transparent layer or gradient.

The color overlay layer can also be positioned primarily behind the text (with or without additional color applied).

Images of text

Images of text are not considered accessible unless it is absolutely essential to convey information (e.g. in a product screenshot or logo), as it prevents users from being able to increase the font size or otherwise customize the text. When an image of text is necessary, the text itself must also meet the color contrast requirements described above.

Accounting for zoom and resizing

Speaking of increasing size, the design should be robust enough to work at multiple screen resolutions and viewports. Users with visual impairments rely on browser zoom, magnification and font size adjustments to read website text.

In general, designing a responsive design that works for mobile devices and other smaller screens should be sufficient. Make sure that text does not overflow offscreen when it is zoomed or resized. As the background image positioning and crop may change as the screen resizes, it’s also important to confirm that overlaid text has sufficient contrast at all supported sizes.

Background image alternative text

One of the most basic accessibility considerations is to add alternative text for images that convey information so screen readers can describe the image contents.

This can be a bit more complicated for hero banners that rely on CSS background images, where an alt attribute cannot be added.

Where the background image is purely decorative, do not provide alternative text. If the image is informative (and the information isn’t otherwise conveyed by adjacent text), some additional markup is needed to expose alternative text for screen readers and other assistive technologies. In these cases, add a role=”image” along with an aria-label attribute to the image.

Background videos

When using a background video, the same considerations around text overlay contrast and media alternatives apply. If the video is not decorative (i.e. if it conveys information), a text alternative or transcript must be provided.

In addition, autoplaying background video or animations longer than 5 seconds can be distracting for people with cognitive disabilities or attention deficits. The video needs a pause button to allow these users to stop the video.

And of course, as with any content, videos should not contain flashing content that can trigger seizures or other symptoms.

A note on carousels

Homepage real estate is valuable, especially the hero position. It’s common for multiple stakeholders to request prominent positioning for their product or program, making it difficult to satisfy them all. Enter carousels. The only problem is that users don’t actually engage with carousel contents! They don’t click through past the first slide and often don’t even engage with the first slide.

This lack of effectiveness is certainly related to usability issues inherent to most carousel implementations. But there are also significant barriers to building accessible carousels, including ensuring keyboard operability, properly labeledcontrols for screen readers, and user awareness of what is currently being shown. In our opinion, the juice isn’t worth the squeeze, especially considering that carousels rarely drive engagement or conversions.

(If you do insist on adding a carousel, Smashing Magazine has a good guide to carousel accessibility.)

Time to take action

We’ve gathered our recommendations on common hero features and considerations to help you ensure your hero banners are built with accessibility in mind.

Hero areas are canvases for creativity by their nature, which necessarily raises new accessibility questions. For that reason, this list of accessibility considerations for heroes is not exhaustive but should be a great start for designers building on common use cases and functionality.

Got questions? Access Armada can help ensure inaccessible heroes don't make it past the design phase. Learn more about our design and UX accessibility reviews.