Large enterprise Design Systems require lots of considerations such as flexibility, theme-ability, and accessibility. Components in the wild tend to be pushed to its limits when you add either too much content or use them in the wrong way. When considering the permutations and having to adhere to WCAG 2.0 AA success criterion, it gets complicated rather quickly.

The following is a demonstration of how to make an accessible full-width image accessible Hero Component.

Making a hero accessible

Let’s start with a common Hero design with text displayed on top of a large background image or video.

While this looks great and you may…

Julian K

Design System Lead, UI Designer, Music Collector, Yello Super-fan

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store