WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Jumbotrons

for

From: Mallory
Date: Mar 29, 2018 2:50PM

So far as I know, "Jumbotron" is just Bootstrap's name for "hero image" which is a designy trendy hip design term for a large background image (sometimes full-screen with a scroll-jack button thing) and text laid on top (usually the h1).

The biggest a11y issues with them is that the text might actually need to be readable by humans, but often contrast with that background image fails.
I've recently ranted on them because they're almost guaranteed to piss me off. Don't do what these people did. Note I'm zoomed in, so sometimes what seems like it might be okay becomes a mess at different zoom levels so test that out.
https://twitter.com/stommepoes/status/960160475668537344

_mallory
On Thu, Mar 29, 2018, at 6:26 PM, Walker, Michael E wrote:
> Hi,
>
> Where can I find guidance on making jumbotrons accessible? Suppose that
> my app is built using Angular Material. When I Google, I find that the
> concept of a jumbotron comes from Bootstrap, and that the term
> "jumbotron" is Bootstrap terminology. How does this concept translate to
> native HTML, CSS, and JavaScript, or other frameworks based on these?
>
> Thank you,
> Mike
> > > >