Accessible Memes Can Be Done

American Chopper meme.

By now most of you have seen that four panel American Chopper meme. For those who cannot see, it whisked across Twitter as yet another undescribed image in a sea of inaccessible memes. Heck, for those of us whose data plan crapped out, it was just a missing block in a tweet.

Unlike the typical meme, this one contains quite a lot of text. More text than can fit in the 400 character limit of alt text on Twitter. More text than the typical user might try to convey.

I usually do not participate in memes specifically because they exclude so many. In this case I figured that while most meme creators do not even think about how those with poor vision (or awful monitors) will experience their memes, it was no reason for me to ignore an opportunity.

So I popped into CodePen and built the meme. When I tweeted it, I took a screen shot of the CodePen output and used that as my image. I also linked to the Pen as the text alternative so those who could not see the image could at least get all the text (and context).

Below the CodePen embed I explain a little bit of what I did so you can use this technique for other memes in the future. Or just fork this one and continue the awful American Chopper meme. If you cannot see the following CodePen embed, then go directly to the Pen.

See the Pen American Chopper Meme by Adrian Roselli (@aardrian) on CodePen.

Background

Because the best quality blank meme image I could find had the white boxes embedded in it, and the images were low quality anyway, I opted to just find the source video on YouTube and capture fresh stills.

From there I made them background images on some <div>s with a fixed aspect ratio which scaled up and down to fit the viewport (in retrospect, I probably should have made them an ordered list). This allowed me to easily put text blocks on top of the images, which means they would cover as much of the image as necessary to show the text. I even tried to keep the weird spacing of the blocks relative to the panel edges.

As background images, I could not rely on an alt attribute to describe the image behind the text. I chose to put the image description right in the box, and then use CSS to visually hide it. This way screen reader users will still hear an image description.

Because I opted to base the text size on a base font size modified by the viewport width (font-size: calc(1vw + .65em);), if the window gets too small then the text from one panel to the next can overlap. A screen reader user won’t care. For a sighted user, I already produced an image at the text size that fits the text I have in the boxes.

And that was it. Screen capture the full page and share, making sure to link to the pen so readers could get to the text.

Wrap-up

For accessibility practitioners or anyone else who wants to allow more people to enjoy your bizarre meme, maybe use this as an example of how you can make even terrible humor more inclusive.

Heck, maybe your meme will make it into the weekly CodePen Spark.

Update: Fork This Pen

I had another call, so I made this example (embedded below) that mimics the average meme of a single image with two blocks of text.

Adjust body { font-size } and the margins on p:nth-child(2) and p:nth-child(3) to fit your own favorite text. If you change the background image to make a different meme, be sure to update the text in the <span> as well, since right now it is the alternative text for the Willy Wonka image.

Go fork and memeify!

See the Pen Accessible Willy Wonka Meme by Adrian Roselli (@aardrian) on CodePen.

Update: Thoughtful Cat

From a Twitter conversation while on a call. All I did was fork the Willy Wonka pen, swap the image and text, and tweak the aspect ratio of the box.

See the Pen Accessible Thoughtful Cat Meme by Adrian Roselli (@aardrian) on CodePen.

Update: Winston Churchill

If you would like to follow in Texas Governor Greg Abbott’s footsteps and tweet completely fabricated quotes from Churchill, go nuts.

See the Pen Accessible Winston Churchill Meme by Adrian Roselli (@aardrian) on CodePen.

Update: Trump and Mowing Kid

The 11-year-old kid who got his dream of mowing the White House lawn has become an unintentional meme sensation. Make your own variation.

See the Pen Trump Lawn Mowing Kid Meme by Adrian Roselli (@aardrian) on CodePen.

Update: Steamed Ham

A soon-to-be-classic skit.

See the Pen Date Picker — Simpsons Steamed Hams Meme by Adrian Roselli (@aardrian) on CodePen.

Update: Daily Struggle

I use CSS transform properties, so if you do anything other than changing the text size to customize this you might hate me.

See the Pen Daily Struggle Meme by Adrian Roselli (@aardrian) on CodePen.

Update: Drake Meme but with LeVar Burton

There is no accessibility gag in this one. I just want people to stop using the Drake meme.

See the Pen Drake Meme but with LeVar Burton by Adrian Roselli (@aardrian) on CodePen.

Update: Galaxy Brain

I used the progressively more accessible 2020 Tokyo Paralympics (held in 2021) video tweet as the example in this one, but you can replace it with text of your thing. Be sure to update the text size and maybe the font.

See the Pen Galaxy Brain Meme by Adrian Roselli (@aardrian) on CodePen.

Update: Are You Going To Sleep? Meme

You will definitely want to tweak this one since the third panel has a lot of text. Which also throws the spacing off just a bit as browser display quirks are more apparent with such a tight space for text.

See the Pen Are You Going To Sleep? Meme: Star Wars by Adrian Roselli (@aardrian) on CodePen.

Update: Vivek with His Notepad Meme

You will want to change the text size in the p span selector.

See the Pen Vivek has a message by Adrian Roselli (@aardrian) on CodePen.

Update: Confused Anime Guy Meme

Adapt as you see fit or use as-is for your favorite disability dongle (coined by Liz Jackson).

See the Pen Butterfly Meme by Adrian Roselli (@aardrian) on CodePen.

Update: Loud and Wrong Meme

Sometimes the loudest, angriest person is not the correctist.

See the Pen Angry Travis Kelce by Adrian Roselli (@aardrian) on CodePen.

2 Comments

Reply

Very cool. There is a lot of prior art (not generally for Twitter or memes) https://css-tricks.com/accessible-svgs/

HTML overlay is a pretty rare take though.

In response to Lewis Cowles. Reply

Yep, there is a ton of prior art. The article you reference gathers techniques that have generally been in play for years. The hidden text technique is widely used in the accessibility industry and you will see it in play in a lot of posts on this site (such as for checkboxes or text styles or even my GitHub suggestion). The text overlay is not new, and is common for making easily editable text on sites that use hero images (and those who want more accessible images or want to support Windows High Contrast Mode for IE11).

What I am mostly saying is that the tools & tricks to make things accessible are out there and have been for a while. We just need to apply them to new things as we see them.

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>