Accessible Memes Can Be Done

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.

Update: Trump to NYT Meme

I was inspired by Comfortably Numb’s idea and then meme generator to build an arguably more accessible one. You can either type into the textareas and screen shot it (use the debug version for that) or fork the pen and change the underlying HTML. It’s responsive, so capture portrait or landscape if you use your phone.

See the Pen Trump to NY Times Translator (meme only) by Adrian Roselli (@aardrian) on CodePen.

The placeholder is real text from the New York Times and that is a real Trump quote from his 8 August 2024 press conference.

Update: Trump to WaPo Meme

In case you want one ready to go for the Washington Post. Editable WaPo pen, or debug version of the WaPo pen.