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: Cool

The Willy Wonka meme got picked to appear on the CodePen home page. Which lasted for like an hour before it was pushed out by a bunch of penguins. Kudos to Scott Vinkle for the heads-up tweet.

Screen shot of the CodePen home page with my pen in the Picked Pens category.

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.

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>

This site uses Akismet to reduce spam. Learn how your comment data is processed.